/**
 * -----------------------------------------
 * SAYR WATCHES
 * Design Tokens & Variables Stylesheet
 *
 * Responsibility:
 * Centralized design tokens (colors, margins, font sizes, transitions, shadows, corner rounding).
 *
 * Dependencies:
 * None
 *
 * Ownership Boundary:
 * Shared Core (Styling Tokens Layer)
 * -----------------------------------------
 */

:root {
  color-scheme: light;
}

/* ─── 1. SAYR MAIN (GOLD & NAVY THEME) ───────────────────────── */
:root, [data-theme="main"] {
  /* Backgrounds */
  --bg:                 #F8F5EE;   /* Warm Cream — page background */
  --surface-1:          #FFFFFF;   /* Card / panel white           */
  --surface-2:          #F2EEE6;   /* Section background           */
  --surface-3:          #EAE6DE;   /* Muted surface / borders      */

  /* Brand */
  --primary:            #0F3558;   /* Deep Navy                    */
  --primary-hover:      #174A78;   /* Lighter navy on hover        */

  /* Accent */
  --accent:             #C8A45D;   /* Luxury Gold                  */
  --accent-light:       #D9BA7A;   /* Lighter Gold                 */
  --accent-pale:        #E8CE9A;   /* Pale Gold                    */
  --accent-dark:        #9A7C38;   /* Dark Gold                    */

  /* Typography */
  --text:               #1A1A1A;   /* Main text                    */
  --text-muted:         #666666;   /* Secondary / Muted text       */
  --text-subtle:        #757575;   /* WCAG AA compliant muted text */

  /* Borders */
  --border:             rgba(200, 164, 93, 0.2);   /* Subtle gold border  */
  --border-strong:      rgba(200, 164, 93, 0.35);  /* Medium gold border  */
  --border-subtle:      rgba(200, 164, 93, 0.1);   /* Very light border   */
  --border-mid:         var(--border-strong);


  /* States */
  --success:            #2E7D32;   /* WhatsApp / success green     */
  --warning:            #C9A84C;   /* Low stock yellow-gold        */
  --error:              #C0706A;   /* Out of stock coral red       */

  /* Ratings */
  --rating-star:        #B2873A;   /* Deeper accessible gold (WCAG 3:1 AA on white) */

  /* ==========================================================
     LUXURY DEPTH SYSTEM
     ========================================================== */
  --shadow-xs:          0 1px 3px rgba(15,53,88,0.04);
  --shadow-sm:          0 3px 10px rgba(15,53,88,0.05);
  --shadow-md:          0 8px 24px rgba(15,53,88,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-lg:          0 16px 40px rgba(15,53,88,0.12), 0 0 24px rgba(200,164,93,0.05);
  --shadow-modal:       0 24px 72px rgba(15,53,88,0.16);
  --shadow-floating:    0 12px 32px rgba(15,53,88,0.14);

  /* ==========================================================
     LUXURY RADIUS SYSTEM
     ========================================================== */
  --radius-xs:          2px;
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          16px;

  --r:                  var(--radius-sm);
  --r-card:             var(--radius-xs);

  /* ==========================================================
     LUXURY CTA SYSTEM TOKENS
     ========================================================== */
  --radius-button-mobile:  8px;
  --radius-button-desktop: 10px;
  --radius-button-large:   12px;

  --button-height-mobile:  50px;
  --button-height-desktop: 54px;
  --button-height-large:   58px;

  --button-padding-x:      22px;
  --button-padding-y:      14px;
  --button-border-width:   1px;
  --button-gap:            12px;

  /* ==========================================================
     LUXURY MOTION SYSTEM
     ========================================================== */
  --ease-luxury:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:      180ms;
  --duration-normal:    260ms;
  --duration-slow:      420ms;

  /* ==========================================================
     CONTROL HARMONY SYSTEM TOKENS
     ========================================================== */
  --control-xs: 32px;
  --control-sm: 38px;
  --control-md: 50px;
  --control-lg: 54px;
  --control-xl: 58px;

  /* ==========================================================
     SPACING SYSTEM TOKENS
     ========================================================== */
  --space-control-xs: 8px;
  --space-control-sm: 12px;
  --space-control-md: 16px;
  --space-control-lg: 22px;

  /* ─── ROSE GOLD PALETTE (Women's section) ──────────────────── */
  --rose-gold:          #c9956c;
  --rose-gold-light:    #e8c4a8;
  --rose-gold-dim:      rgba(201,149,108,0.75);
  --rose-gold-glow:     rgba(201,149,108,0.18);
  --rose-gold-border:   rgba(201,149,108,0.28);

  /* ─── LEGACY COMPATIBILITY ALIASES ─────────────────────────── */
  --gold:               var(--accent);
  --gold-light:         var(--accent-light);
  --gold-pale:          var(--accent-pale);
  --gold-dark:          var(--accent-dark);

  --charcoal:           var(--primary);
  --charcoal-soft:      var(--surface-1);
  --charcoal-mid:       var(--surface-2);
  --charcoal-light:     var(--surface-3);

  --ivory:              #F8F6F1;
  --ivory-warm:         #F8F5EE;
  --ivory-dim:          var(--text-muted);

  --text-body:          #444444;
  --color-border:       var(--surface-3);
  --shadow-card:        var(--shadow-md);
  --shadow-hover:       var(--shadow-lg);
  --shadow-gold:        0 6px 24px rgba(200, 164, 93, 0.3);
}

/* ─── 2. SAYR BASIC (WARM CREAM THEME) ───────────────────────── */
[data-theme="basic"] {
  /* Backgrounds */
  --bg:                 #F8F5EE;   /* Warm Cream — page background    */
  --surface-1:          #FFFFFF;   /* Card / panel white               */
  --surface-2:          #F2EEE6;   /* Section background               */
  --surface-3:          #EAE6DE;   /* Muted surface / borders          */

  /* Brand */
  --primary:            #0F3558;   /* Deep Navy (supporting role)      */
  --primary-hover:      #174A78;   /* Lighter navy on hover            */

  /* Accent */
  --accent:             #0F3558;   /* Navy — functional UI color       */
  --accent-light:       #C8A45D;   /* Luxury Gold — hover accent       */
  --accent-pale:        #E8CE9A;   /* Pale Gold                        */
  --accent-dark:        #0A2840;   /* Darker Navy                      */

  /* Typography */
  --text:               #1A1A1A;   /* Main text (dark on cream)        */
  --text-muted:         #666666;   /* Secondary / Muted text           */
  --text-subtle:        #757575;   /* WCAG AA compliant muted text     */

  /* Borders */
  --border:             rgba(15, 53, 88, 0.12);    /* Subtle navy border  */
  --border-strong:      rgba(15, 53, 88, 0.2);     /* Medium navy border  */
  --border-subtle:      rgba(15, 53, 88, 0.06);    /* Very light border   */
  --border-mid:         var(--border-strong);


  /* States */
  --success:            #2E7D32;
  --warning:            #C9A84C;
  --error:              #C0706A;

  /* Ratings */
  --rating-star:        #B2873A;   /* Accessible gold (WCAG 3:1 AA)   */

  /* ==========================================================
     LUXURY DEPTH SYSTEM (BASIC OVERRIDES)
     ========================================================== */
  --shadow-xs:          0 1px 3px rgba(15, 53, 88, 0.04);
  --shadow-sm:          0 3px 10px rgba(15, 53, 88, 0.06);
  --shadow-md:          0 8px 24px rgba(15, 53, 88, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-lg:          0 16px 40px rgba(15, 53, 88, 0.12), 0 0 24px rgba(200, 164, 93, 0.05);
  --shadow-modal:       0 24px 72px rgba(15, 53, 88, 0.16);
  --shadow-floating:    0 12px 32px rgba(15, 53, 88, 0.14);

  /* ==========================================================
     LUXURY RADIUS SYSTEM
     ========================================================== */
  --radius-xs:          2px;
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          16px;

  --r:                  var(--radius-sm);
  --r-card:             var(--radius-xs);

  /* ==========================================================
     LUXURY CTA SYSTEM TOKENS (BASIC OVERRIDES)
     ========================================================== */
  --radius-button-mobile:  8px;
  --radius-button-desktop: 10px;
  --radius-button-large:   12px;

  --button-height-mobile:  50px;
  --button-height-desktop: 54px;
  --button-height-large:   58px;

  --button-padding-x:      22px;
  --button-padding-y:      14px;
  --button-border-width:   1px;
  --button-gap:            12px;

  /* ─── LEGACY COMPATIBILITY ALIASES (SEMANTIC INVERSION) ────── */
  /* On Premium: gold=accent, charcoal=dark surface, ivory=light text    */
  /* On Basic:   gold=navy UI, charcoal=cream surface, ivory=navy text   */
  --gold:               #0F3558;   /* Navy — buttons, UI elements     */
  --gold-light:         #C8A45D;   /* Gold — hover accent glow        */
  --gold-pale:          #E8CE9A;   /* Pale Gold                       */
  --gold-dark:          #0A2840;   /* Darker Navy                     */

  --charcoal:           #F8F5EE;   /* Cream — page surface            */
  --charcoal-soft:      var(--surface-1);
  --charcoal-mid:       var(--surface-2);
  --charcoal-light:     var(--surface-3);

  --ivory:              #0F3558;   /* Navy — body text, headings       */
  --ivory-warm:         #F8F5EE;   /* Warm cream reference            */
  --ivory-dim:          var(--text-muted);

  --text-body:          #444444;
  --color-border:       var(--surface-3);
  --shadow-card:        var(--shadow-md);
  --shadow-hover:       var(--shadow-lg);
  --shadow-gold:        0 6px 24px rgba(200, 164, 93, 0.3);
  /* ==========================================================
     CONTROL HARMONY SYSTEM TOKENS (BASIC OVERRIDES)
     ========================================================== */
  --control-xs: 32px;
  --control-sm: 38px;
  --control-md: 50px;
  --control-lg: 54px;
  --control-xl: 58px;

  /* ==========================================================
     SPACING SYSTEM TOKENS (BASIC OVERRIDES)
     ========================================================== */
  --space-control-xs: 8px;
  --space-control-sm: 12px;
  --space-control-md: 16px;
  --space-control-lg: 22px;
}


/* ── Native Responsive SVG Icon System ── */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.svg-icon svg {
  width: 1em;
  height: 1em;
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}