/* ==========================================================================
   Khusi Jewelers — Design Tokens
   Source of truth: design.md Section 20 (values verbatim), Section 2.5 (dark mode)
   Application code must reference these custom properties, never raw hex.
   ========================================================================== */

:root {
  /* ---- Color · Core Palette (design.md §2.1) ---- */
  --color-primary-gold: #B08D57;
  --color-primary-gold-dark: #8C6D3F;
  --color-secondary-maroon: #6B1226;
  --color-secondary-maroon-dark: #4C0C1A;
  --color-accent-emerald: #0B6E4F;
  --color-accent-champagne: #E4D3B8;

  /* ---- Color · Neutrals (§2.2) ---- */
  --color-neutral-ink: #1B1815;
  --color-neutral-900: #2A2521;
  --color-neutral-700: #4A413A;
  --color-neutral-500: #8A7F73;
  --color-neutral-300: #C9BFB2;
  --color-neutral-100: #FAF6EF;
  --color-neutral-50: #FFFFFF;

  /* ---- Color · Functional (§2.3) ---- */
  --color-success: #1E7A4C;
  --color-warning: #B8792E;
  --color-error: #A32B2B;
  --color-info: #2E5E8C;

  /* ---- Semantic aliases (light mode defaults, §2.5) ---- */
  --surface-background: var(--color-neutral-100);
  --surface-primary: var(--color-neutral-50);
  --text-primary: var(--color-neutral-ink);
  --text-secondary: var(--color-neutral-700);
  --text-tertiary: var(--color-neutral-500);
  --border-default: var(--color-neutral-300);
  --accent-gold: var(--color-primary-gold);
  --accent-gold-hover: var(--color-primary-gold-dark);
  --accent-maroon: var(--color-secondary-maroon);

  /* ---- Metal swatches (design.md §12 — variant selector) ---- */
  --swatch-yellow-gold: #D4AF6A;
  --swatch-rose-gold: #E8B4A0;
  --swatch-white-gold: #E8E5DE;
  --swatch-platinum: #D9D9D6;

  /* ---- Spacing · 8pt base (§4 / §20) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius (§6 / §20) ---- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ---- Elevation (§7 / §20) ---- */
  --shadow-sm: 0 1px 2px rgba(27, 24, 21, 0.06);
  --shadow-md: 0 4px 12px rgba(27, 24, 21, 0.08);
  --shadow-lg: 0 12px 32px rgba(27, 24, 21, 0.12);
  --shadow-floating: 0 20px 48px rgba(27, 24, 21, 0.16);
  --shadow-hover: 0 16px 40px rgba(176, 141, 87, 0.18); /* gold-tinted, product card hover */
  --shadow-modal: 0 24px 64px rgba(27, 24, 21, 0.24);

  /* Luxury glass surface (§7) — sticky nav on scroll, announcement overlay */
  --glass-blur: blur(20px);
  --glass-background: rgba(250, 246, 239, 0.72);
  --glass-border: 1px solid rgba(255, 255, 255, 0.4);

  /* ---- Typography · families (§3.1) ---- */
  --font-display: "Fraunces", "Georgia", serif;          /* Display / Hero only */
  --font-heading: "Cormorant Garamond", "Georgia", serif; /* H1–H4, product names */
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif; /* Body / UI / Price */
  --font-label: "Jost", "Futura", sans-serif;             /* Labels / eyebrows / nav / buttons */

  /* ---- Typography · fluid anchors (§3.2, §3.3 — 375px→1440px clamp) ---- */
  --type-display-size: clamp(48px, 4.5vw + 31px, 96px);
  --type-hero-size: clamp(36px, 2.63vw + 26px, 64px);
  --type-h1-size: clamp(32px, 1.5vw + 26px, 48px);
  --type-h2-size: clamp(26px, 0.94vw + 22px, 36px);
  --type-h3-size: clamp(22px, 0.56vw + 20px, 28px);
  --type-h4-size: clamp(18px, 0.38vw + 17px, 22px);
  /* Fixed sizes (do not scale, §3.3) */
  --type-body-lg-size: 18px;
  --type-body-size: 16px;
  --type-caption-size: 13px;
  --type-label-size: 12px;
  --type-button-size: 14px;
  --type-nav-size: 13px;
  --type-product-name-size: 20px;
  --type-price-size: 20px;

  /* ---- Animation (§20) ---- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-entrance: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Opacity (§20) ---- */
  --opacity-disabled: 0.4;
  --opacity-overlay: 0.5;
  --opacity-glass-surface: 0.72;

  /* ---- Border (§20) ---- */
  --border-hairline: 1px solid var(--color-neutral-300);
  --focus-ring: 2px solid var(--color-primary-gold); /* always 2px offset, never suppressed (§2.4, §9) */

  /* ---- Z-index (§20) ---- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky-nav: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ==========================================================================
   Dark mode — "showcase at night" (design.md §2.5)
   Warmer black, never #000000; gold/maroon brightened for contrast.
   Activated via [data-theme="dark"] on <html>, falls back to OS preference.
   ========================================================================== */

[data-theme="dark"] {
  --surface-background: #15120F;
  --surface-primary: #211C18;
  --text-primary: #F3EEE4;
  --text-secondary: #B8AC9D;
  --border-default: #3A322B;
  --accent-gold: #D4AF6A;
  --accent-maroon: #8C2438;
  --glass-background: rgba(21, 18, 15, 0.72);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --border-hairline: 1px solid #3A322B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-background: #15120F;
    --surface-primary: #211C18;
    --text-primary: #F3EEE4;
    --text-secondary: #B8AC9D;
    --border-default: #3A322B;
    --accent-gold: #D4AF6A;
    --accent-maroon: #8C2438;
    --glass-background: rgba(21, 18, 15, 0.72);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --border-hairline: 1px solid #3A322B;
  }
}