/*
Theme Name: Roshni Optical
Theme URI: https://roshnioptical.com
Description: Premium Eyewear & Vision Care E-Commerce Theme for Roshni Optical. Engineered for high optical precision, designer frame collections, high performance, and full WooCommerce optimization.
Author: Roshni Optical Team
Author URI: https://roshnioptical.com
Template: hello-elementor
Version: 3.0.0
Text Domain: roshni-optical
*/

/* Roshni Optical Brand Design Tokens */
:root {
  /* Roshni Optical Brand Palette */
  --ro-navy: #0B192C;        /* Deep Vision Navy: Headings, primary text */
  --ro-blue: #1E40AF;        /* Precision Blue: Primary buttons, active tabs */
  --ro-amber: #F59E0B;       /* Radiance Gold (Roshni): Accent elements, badges, rating stars */
  --ro-cyan: #0EA5E9;        /* Clarity Cyan: Secondary accents, anti-glare highlights */
  --ro-light: #F8FAFC;       /* Clean boutique background */
  --ro-pale: #F1F5F9;        /* Soft grey-blue: Cards and subtle backgrounds */
  --ro-white: #FFFFFF;       /* White: Main backgrounds */
  --ro-line: #E2E8F0;        /* Borders and dividers */

  /* Backward compatible variable mappings */
  --ds-navy: var(--ro-navy);
  --ds-royal-blue: var(--ro-blue);
  --ds-aqua: var(--ro-amber);
  --ds-light-blue: #EFF6FF;
  --ds-pale-blue: var(--ro-pale);
  --ds-white: var(--ro-white);
  --ds-soft-grey: var(--ro-line);

  /* Legacy variable mappings for seamless compatibility */
  --ink: #0B192C;
  --muted: #64748B;
  --line: #E2E8F0;
  --soft: #F8FAFC;
  --yellow: #F59E0B;
  --green: #10B981;
  --red: #1E40AF;
  --blue: #1E40AF;
  --max: 1600px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color: var(--ro-navy);
  background-color: var(--ro-white);
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ro-navy);
}

/* Ensure Elementor full-width pages match design */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--max);
}

/* ==========================================================================
   ROSHNI OPTICAL COLOR SYSTEM OVERRIDES
   ========================================================================== */

/* 1. Global Buttons & Button Hovers */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
  background-color: var(--ds-royal-blue);
  color: #ffffff;
  border-color: var(--ds-royal-blue);
}

/* 2. Product Category Tabs & Pill Buttons (Big Deals, Top Picks, Best Sellers, etc.) */
.tabs .tab:hover,
.tabs button:hover,
.tab:hover,
button.tab:hover,
button[data-tab-target]:hover,
button[data-category]:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
  box-shadow: 0 4px 14px rgba(8, 120, 237, 0.28) !important;
}

.tabs .tab.active,
.tab.active {
  background: var(--ds-navy) !important;
  color: #ffffff !important;
  border-color: var(--ds-navy) !important;
}

.tabs .tab.active:hover,
.tab.active:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
  box-shadow: 0 4px 14px rgba(8, 120, 237, 0.28) !important;
}

/* 3. Modal Tabs, Nav Tabs & Category Pills */
.sf-tab-btn:hover,
.boat-tab-btn:hover,
.Storefront-tab-btn:hover,
.sf-category-pill:hover,
.sf-pill:hover,
.sf-filter-btn:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
}

/* 4. Default link hover to Royal Blue */
a:hover {
  color: var(--ds-royal-blue);
}