/* ============================================================
   Design Tokens — Le Palais royal & Académie du Palais royal
   Dark editorial system with brand-colored accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand accent colors (used as small touches) ────────── */
  --brand-magenta: #c40074;
  --brand-red:     #d3063b;
  --brand-orange:  #e2511d;
  --brand-gold:    #f9b50c;

  /* ── Surfaces (dark editorial base) ─────────────────────── */
  --surface-base:     #0a0a0a;  /* deepest, page background */
  --surface-raised:   #141414;  /* cards, panels */
  --surface-elevated: #1c1c1c;  /* hovered cards, popovers */
  --surface-overlay:  #242424;  /* modals, deep emphasis */

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle:   #262626;
  --border-default:  #333333;
  --border-strong:   #4a4a4a;

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary:    #f5f5f4;   /* warm white, headlines & body */
  --text-secondary:  #a8a29e;   /* muted body, captions */
  --text-tertiary:   #78716c;   /* metadata, fine print */
  --text-inverse:    #0a0a0a;   /* text on light surfaces (rare) */

  /* ── Variant tokens (Académie default) ──────────────────── */
  --accent-primary:   var(--brand-magenta);
  --accent-secondary: var(--brand-gold);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale, generated for 320px → 1600px viewports */
  --fs-display:  clamp(3rem,    1.6rem + 6vw,    6.5rem);   /* hero headlines */
  --fs-h1:       clamp(2.25rem, 1.4rem + 3.6vw,  4rem);
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.4vw,  2.75rem);
  --fs-h3:       clamp(1.375rem, 1rem + 1.6vw,   2rem);
  --fs-h4:       clamp(1.125rem, 1rem + 0.6vw,   1.375rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9375rem;
  --fs-caption:  0.8125rem;
  --fs-micro:    0.6875rem;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Spacing (8px base) ─────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 12rem;     /* 192px */

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-narrow: 64ch;
  --container-text:   72ch;
  --container-wide:   1280px;
  --container-full:   1440px;
  --gutter:           clamp(1rem, 3vw, 2.5rem);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out-quad:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  280ms;
  --duration-slow:  500ms;

  /* ── Shadows (subtle on dark) ───────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-modal:    2000;
}

/* ── Variant: Palais royal (rouge dominant) ──────────────── */
[data-variant="palaisroyal"] {
  --accent-primary:   var(--brand-red);
  --accent-secondary: var(--brand-orange);
}

/* ── Variant: Académie (default, magenta) ────────────────── */
[data-variant="academie"] {
  --accent-primary:   var(--brand-magenta);
  --accent-secondary: var(--brand-gold);
}