/**
 * Design Tokens — Premium Jewelry Brand Demo
 * Based on jewelry-brand-demo-design.md
 */

:root {
  /* ==========================================================================
     Typography Tokens
     ========================================================================== */
  --font-heading-primary: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading-secondary: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-devanagari: 'Noto Sans Devanagari', 'Poppins', sans-serif;

  /* Font Scales */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.844rem;    /* 13.5px */
  --text-base: 0.969rem;  /* 15.5px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.35rem;     /* 21.6px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2.125rem;   /* 34px */
  --text-3xl: 2.75rem;    /* 44px */
  --text-4xl: 3.5rem;     /* 56px */
  --text-hero: clamp(2.5rem, 5vw, 4.5rem); /* 40px - 72px */

  /* ==========================================================================
     Color System Tokens
     Exact values from Section 4 of jewelry-brand-demo-design.md
     ========================================================================== */
  --color-primary: #1f2b22;       /* Deep Forest / Heritage Green (25%) */
  --color-primary-light: #2c3c30; /* Elevated deep green */
  --color-primary-rgb: 31, 43, 34;

  --color-secondary: #6f2233;     /* Deep Wine / Burgundy (5%) */
  --color-secondary-light: #872e42;
  --color-secondary-rgb: 111, 34, 51;

  --color-background: #f7f2e7;    /* Warm Ivory Canvas (45%) */
  --color-background-rgb: 247, 242, 231;

  --color-surface: #efe6d2;       /* Warm Sand / Card Surface (15%) */
  --color-surface-card: #fdfbf7;  /* Pure Ivory for product cards */
  --color-surface-hover: #e7dcbe;

  --color-accent: #b08d4f;        /* Refined Metallic Gold (8%) */
  --color-accent-dark: #98753a;
  --color-accent-rgb: 176, 141, 79;

  --color-highlight: #d8c090;     /* Soft Gold Highlight / Borders (2%) */
  --color-highlight-subtle: rgba(216, 192, 144, 0.25);

  /* Neutrals & Functional */
  --color-text-dark: #1f2b22;
  --color-text-muted: #646b65;
  --color-text-light: #f7f2e7;
  --color-text-light-muted: #d0d5d1;
  --color-border: rgba(31, 43, 34, 0.12);
  --color-border-gold: rgba(176, 141, 79, 0.35);

  /* ==========================================================================
     Layout & Sizing
     ========================================================================== */
  --container-max-width: 1440px;
  --container-gutter: clamp(1.25rem, 4vw, 4.5rem);

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 112px;
  --space-6xl: 144px;

  /* Restrained Border Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Shadows - Minimalist Luxury (Avoid loud SaaS drop-shadows) */
  --shadow-sm: 0 2px 8px rgba(31, 43, 34, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 43, 34, 0.06);
  --shadow-lg: 0 16px 40px rgba(31, 43, 34, 0.09);
  --shadow-drawer: -8px 0 32px rgba(31, 43, 34, 0.16);

  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indices */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   Color Themes (From color-themes.html & jewelry-brand-demo-design.md)
   ========================================================================== */

/* Theme 1: Temple Gold (Default) */
:root[data-theme="temple-gold"],
[data-theme="temple-gold"] {
  --color-primary: #1f2b22;
  --color-primary-light: #2c3c30;
  --color-primary-rgb: 31, 43, 34;

  --color-secondary: #6f2233;
  --color-secondary-light: #872e42;
  --color-secondary-rgb: 111, 34, 51;

  --color-background: #f7f2e7;
  --color-background-rgb: 247, 242, 231;

  --color-surface: #efe6d2;
  --color-surface-card: #fdfbf7;
  --color-surface-hover: #e5dac1;

  --color-accent: #b08d4f;
  --color-accent-dark: #98753a;
  --color-accent-rgb: 176, 141, 79;

  --color-highlight: #d8c090;
  --color-highlight-subtle: rgba(216, 192, 144, 0.25);

  --color-text-dark: #211a13;
  --color-text-muted: #5c5346;
  --color-text-light: #f7f2e7;
  --color-text-light-muted: #d0d5d1;
  --color-border: rgba(31, 43, 34, 0.12);
  --color-border-gold: rgba(176, 141, 79, 0.35);
}

/* Theme 2: Rani Pink & Ivory */
:root[data-theme="rani-pink"],
[data-theme="rani-pink"] {
  --color-primary: #3a2530;
  --color-primary-light: #4d3240;
  --color-primary-rgb: 58, 37, 48;

  --color-secondary: #c98a4b;
  --color-secondary-light: #dca062;
  --color-secondary-rgb: 201, 138, 75;

  --color-background: #f8f3ec;
  --color-background-rgb: 248, 243, 236;

  --color-surface: #f2e2e6;
  --color-surface-card: #fffcf9;
  --color-surface-hover: #ebd2d8;

  --color-accent: #a13d5c;
  --color-accent-dark: #882e49;
  --color-accent-rgb: 161, 61, 92;

  --color-highlight: #c96b86;
  --color-highlight-subtle: rgba(201, 107, 134, 0.25);

  --color-text-dark: #2b1c22;
  --color-text-muted: #6e5c62;
  --color-text-light: #f8f3ec;
  --color-text-light-muted: #e6d9de;
  --color-border: rgba(58, 37, 48, 0.12);
  --color-border-gold: rgba(161, 61, 92, 0.35);
}

/* Theme 3: Ivory & Emerald */
:root[data-theme="ivory-emerald"],
[data-theme="ivory-emerald"] {
  --color-primary: #173a30;
  --color-primary-light: #224e41;
  --color-primary-rgb: 23, 58, 48;

  --color-secondary: #3a1620;
  --color-secondary-light: #52222f;
  --color-secondary-rgb: 58, 22, 32;

  --color-background: #f5f1e6;
  --color-background-rgb: 245, 241, 230;

  --color-surface: #e6ede3;
  --color-surface-card: #fafdf9;
  --color-surface-hover: #d7e3d2;

  --color-accent: #c9a24b;
  --color-accent-dark: #b28c39;
  --color-accent-rgb: 201, 162, 75;

  --color-highlight: #e0c47f;
  --color-highlight-subtle: rgba(224, 196, 127, 0.25);

  --color-text-dark: #1c2420;
  --color-text-muted: #5c645d;
  --color-text-light: #f5f1e6;
  --color-text-light-muted: #dbe6df;
  --color-border: rgba(23, 58, 48, 0.12);
  --color-border-gold: rgba(201, 162, 75, 0.35);
}

/* Theme 4: Midnight & Champagne */
:root[data-theme="midnight-champagne"],
[data-theme="midnight-champagne"] {
  --color-primary: #151517;
  --color-primary-light: #242428;
  --color-primary-rgb: 21, 21, 23;

  --color-secondary: #7c1f2e;
  --color-secondary-light: #952839;
  --color-secondary-rgb: 124, 31, 46;

  --color-background: #faf9f6;
  --color-background-rgb: 250, 249, 246;

  --color-surface: #f0eee8;
  --color-surface-card: #ffffff;
  --color-surface-hover: #e4e1d8;

  --color-accent: #c7a76b;
  --color-accent-dark: #b29255;
  --color-accent-rgb: 199, 167, 107;

  --color-highlight: #ddc48f;
  --color-highlight-subtle: rgba(221, 196, 143, 0.25);

  --color-text-dark: #0b0b0d;
  --color-text-muted: #5a5a5c;
  --color-text-light: #faf9f6;
  --color-text-light-muted: #d6d6d8;
  --color-border: rgba(21, 21, 23, 0.12);
  --color-border-gold: rgba(199, 167, 107, 0.35);
}

/* Theme 5: Terracotta & Brass */
:root[data-theme="terracotta-brass"],
[data-theme="terracotta-brass"] {
  --color-primary: #2e2015;
  --color-primary-light: #423021;
  --color-primary-rgb: 46, 32, 21;

  --color-secondary: #5c4632;
  --color-secondary-light: #735942;
  --color-secondary-rgb: 92, 70, 50;

  --color-background: #f6efe4;
  --color-background-rgb: 246, 239, 228;

  --color-surface: #ede0cd;
  --color-surface-card: #fdfbf7;
  --color-surface-hover: #e1d0b7;

  --color-accent: #b5652f;
  --color-accent-dark: #9e5323;
  --color-accent-rgb: 181, 101, 47;

  --color-highlight: #cf8a57;
  --color-highlight-subtle: rgba(207, 138, 87, 0.25);

  --color-text-dark: #241b14;
  --color-text-muted: #6e6152;
  --color-text-light: #f6efe4;
  --color-text-light-muted: #e6dcd0;
  --color-border: rgba(46, 32, 21, 0.12);
  --color-border-gold: rgba(181, 101, 47, 0.35);
}