/*
  Apple × LVMH Design System
  colors_and_type.css — Design Tokens
  ─────────────────────────────────────────────────────────────────
  Font substitutions (flag for production):
  • Display: Cormorant → production: Didot LT Pro / Sabon
  • UI Sans:  DM Sans  → production: SF Pro Text (Apple license)
  • Mono:     DM Mono  → production: SF Mono / DM Mono
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────
   BASE COLOR PALETTE
   ───────────────────────────────────────── */

:root {

  /* ── Gold (Sacred Accent) ── */
  --gold-100: #FDF8ED;
  --gold-200: #F5E9C3;
  --gold-300: #E8CF8A;
  --gold-400: #D4AA52;
  --gold-500: #C09A3A;   /* Primary gold */
  --gold-600: #A07D28;
  --gold-700: #7A5E1A;
  --gold-800: #4E3B0D;
  --gold-900: #2A1F06;

  /* ── Warm Ivory (Background) ── */
  --ivory-50:  #FDFCFA;
  --ivory-100: #FAFAF8;  /* Canvas white */
  --ivory-200: #F5F2EC;  /* Cream */
  --ivory-300: #EDEAE2;  /* Stone */
  --ivory-400: #E2DDD3;
  --ivory-500: #D1CAB8;
  --ivory-600: #B8AE98;
  --ivory-700: #9A8F78;

  /* ── Charcoal (Type & Dark) ── */
  --charcoal-50:  #F4F3F1;
  --charcoal-100: #E0DDD8;
  --charcoal-200: #C2BDB5;
  --charcoal-300: #9E9890;
  --charcoal-400: #7A7268;
  --charcoal-500: #565049;
  --charcoal-600: #3A3530;
  --charcoal-700: #252119;  /* Primary body text */
  --charcoal-800: #151410;  /* Rich black */
  --charcoal-900: #0C0B09;  /* Near black */

  /* ── Navy (Secondary) ── */
  --navy-100: #E8ECF2;
  --navy-200: #C4CDD9;
  --navy-300: #8F9EBA;
  --navy-400: #556E96;
  --navy-500: #2C4470;
  --navy-600: #1A2E52;
  --navy-700: #0D1B35;
  --navy-800: #060D1C;

  /* ── Pure ── */
  --pure-white: #FFFFFF;
  --pure-black: #000000;

  /* ─────────────────────────────────────────
     SEMANTIC TOKENS — Light Mode
     ───────────────────────────────────────── */

  /* Backgrounds */
  --bg-canvas:      var(--ivory-100);     /* Page background */
  --bg-surface:     var(--ivory-50);      /* Cards, panels */
  --bg-subtle:      var(--ivory-200);     /* Subtle section fill */
  --bg-inset:       var(--ivory-300);     /* Input background */
  --bg-overlay:     rgba(250, 250, 248, 0.72);  /* Frosted chrome */
  --bg-dark:        var(--charcoal-900);  /* Dark sections */
  --bg-dark-surface: var(--charcoal-800); /* Dark cards */

  /* Foreground / Text */
  --fg-primary:     var(--charcoal-700);  /* Body text */
  --fg-secondary:   var(--charcoal-500);  /* Supporting text */
  --fg-tertiary:    var(--charcoal-300);  /* Placeholder, disabled */
  --fg-inverse:     var(--ivory-100);     /* Text on dark bg */
  --fg-inverse-sec: var(--ivory-500);

  /* Accent */
  --accent:         var(--gold-500);      /* Primary gold */
  --accent-light:   var(--gold-300);
  --accent-dark:    var(--gold-700);
  --accent-subtle:  var(--gold-100);

  /* Borders */
  --border-subtle:  rgba(37, 33, 25, 0.08);
  --border-default: rgba(37, 33, 25, 0.14);
  --border-strong:  rgba(37, 33, 25, 0.28);
  --border-accent:  var(--gold-400);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.08);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.18), 0 48px 96px rgba(0,0,0,0.10);

  /* Interactive states */
  --state-hover-bg: rgba(37, 33, 25, 0.04);
  --state-press-bg: rgba(37, 33, 25, 0.08);
  --state-focus-ring: 0 0 0 3px rgba(192, 154, 58, 0.30);

  /* ─────────────────────────────────────────
     SPACING & LAYOUT
     ───────────────────────────────────────── */

  --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;

  /* Layout */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  /* ─────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────── */

  --radius-none:  0px;
  --radius-xs:    2px;   /* Tags, pills */
  --radius-sm:    4px;   /* Cards, buttons (luxury: near-flat) */
  --radius-md:    6px;   /* Inputs */
  --radius-lg:    8px;   /* Modals */
  --radius-xl:    12px;  /* Large panels (use sparingly) */
  --radius-full:  9999px; /* True pill — reserved for badges only */

  /* ─────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────── */

  /* Font families */
  --font-display: 'Cormorant', 'Didot LT Pro', 'Bodoni MT', Georgia, serif;
  --font-sans:    'DM Sans', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', 'Courier New', monospace;

  /* Type scale — base 16px */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;
  --text-7xl:  96px;
  --text-8xl:  120px;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.20em;   /* ALL CAPS labels */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ─────────────────────────────────────────
     ANIMATION
     ───────────────────────────────────────── */

  --ease-default:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:       cubic-bezier(0.0,  0.0, 0.2,  1);
  --ease-in:        cubic-bezier(0.4,  0.0, 1.0,  1);
  --ease-in-out:    cubic-bezier(0.4,  0.0, 0.2,  1);
  --ease-editorial: cubic-bezier(0.16, 1,   0.3,  1);  /* Slow-burn luxury reveal */

  --duration-micro:     150ms;
  --duration-fast:      200ms;
  --duration-default:   300ms;
  --duration-slow:      500ms;
  --duration-editorial: 800ms;

  /* ─────────────────────────────────────────
     BLUR / MATERIAL
     ───────────────────────────────────────── */

  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px) saturate(180%);  /* Apple chrome blur */

}

/* ─────────────────────────────────────────
   DARK MODE OVERRIDES
   ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas:       var(--charcoal-900);
    --bg-surface:      var(--charcoal-800);
    --bg-subtle:       rgba(255, 255, 255, 0.04);
    --bg-inset:        rgba(255, 255, 255, 0.06);
    --bg-overlay:      rgba(12, 11, 9, 0.78);

    --fg-primary:      var(--ivory-200);
    --fg-secondary:    var(--ivory-500);
    --fg-tertiary:     var(--charcoal-400);
    --fg-inverse:      var(--charcoal-900);

    --border-subtle:   rgba(250, 250, 248, 0.06);
    --border-default:  rgba(250, 250, 248, 0.12);
    --border-strong:   rgba(250, 250, 248, 0.24);

    --state-hover-bg:  rgba(250, 250, 248, 0.04);
    --state-press-bg:  rgba(250, 250, 248, 0.08);
  }
}

/* ─────────────────────────────────────────
   SEMANTIC TYPE ELEMENTS
   ───────────────────────────────────────── */

.type-display-hero {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-style: italic;
  color: var(--fg-primary);
}

.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.type-display-md {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.type-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.type-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.type-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.type-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.type-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

.type-price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.type-price-lg {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--fg-primary);
}

.type-accent {
  color: var(--accent);
}