/* ═══════════════════════════════════════════════════════════
   CŒUR ASTRAL - NUIT ÉDITORIALE TOKENS
   ═══════════════════════════════════════════════════════════

   Design tokens of the « Nuit Éditoriale » redesign. Loaded on every page,
   after the legacy stylesheets. Values come from the approved spec A.

   Both this file and design-tokens.css declare on :root, so a v2 token must
   NEVER reuse a name declared there: it would silently restyle every legacy
   rule that reads it.

   Mobile-first breakpoints: 600px, 1024px, 1280px (1440px is reserved for
   the chat side panel). Custom properties cannot be used inside media
   queries, so these values are repeated literally below. */

:root {
  /* ─────────────────────────────────────────────────────────────
     GROUNDS - Night and tonal surfaces
     ───────────────────────────────────────────────────────────── */
  --night-950: #060912;
  --night-900: #0A0E1A;
  --masthead: rgba(25, 14, 46, 0.9);
  --surface-1: #0F1424;
  --surface-2: #151A2E;
  --surface-3: #1D2340;
  --surface-4: #2A2F52;

  /* ─────────────────────────────────────────────────────────────
     TEXT - Ivory scale
     ───────────────────────────────────────────────────────────── */
  --ivory-100: #F4EFE6;
  --ivory-300: #C9C3D6;
  --ivory-500: #9A93AE;
  --ivory-700: #6E6884;

  /* ─────────────────────────────────────────────────────────────
     LINES - Rules and non-text boundaries
     ───────────────────────────────────────────────────────────── */
  --line-strong: #8A84A0;
  --rule-soft: rgba(244, 239, 230, 0.08);
  --rule: rgba(244, 239, 230, 0.14);
  --rule-gold: rgba(230, 188, 83, 0.35);
  --rule-dialog: rgba(244, 239, 230, 0.12);
  /* Chip outline at rest and on hover, gauge track (lot 2) */
  --rule-chip: rgba(244, 239, 230, 0.18);
  --rule-chip-hover: rgba(244, 239, 230, 0.36);
  --gauge-track: rgba(244, 239, 230, 0.16);

  /* ─────────────────────────────────────────────────────────────
     VIOLET - Brand and interaction
     ───────────────────────────────────────────────────────────── */
  --brand-violet: #840DBD;
  --brand-indigo: #101683;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-tint: rgba(139, 92, 246, 0.22);
  --violet-600: #7C3AED;
  --violet-800: #5B21B6;

  /* ─────────────────────────────────────────────────────────────
     ROSE - Romance
     ───────────────────────────────────────────────────────────── */
  --rose-300: #F9A8D4;
  --rose-400: #F472B6;
  --rose-500: #EC4899;
  --rose-600: #DB2777;
  /* Romance button hover (lot 2) */
  --rose-700: #BE185D;

  /* ─────────────────────────────────────────────────────────────
     GOLD - Editorial accent and purchases
     ───────────────────────────────────────────────────────────── */
  --gold-400: #E6BC53;
  --gold-500: #F59E0B;
  /* Premium button hover and pressed (lot 2) */
  --gold-300: #FBBF24;
  --gold-600: #D97706;
  /* Gold washes and lines: ✦ pill fill and ring, text-button underline,
     editorial frame of gold cards (lot 2) */
  --gold-wash: rgba(230, 188, 83, 0.06);
  --ring-gold: rgba(230, 188, 83, 0.5);
  --underline-gold: rgba(230, 188, 83, 0.6);
  --frame-gold: rgba(230, 188, 83, 0.45);

  /* ─────────────────────────────────────────────────────────────
     STATES
     ───────────────────────────────────────────────────────────── */
  --success: #34D399;
  --danger-text: #FCA5A5;
  --danger-fill: #B91C1C;
  --warning: #FBBF24;
  --scrim: rgb(6 9 18 / 0.72);
  --disc-on-photo: rgba(6, 9, 18, 0.8);
  /* Online dot, text on filled accents, error border, opaque scrim,
     hover wash and field focus ring (lot 2) */
  --online: #10B981;
  --on-accent: #FFFFFF;
  --danger-line: #F87171;
  --scrim-strong: rgb(6 9 18 / 0.92);
  --wash-hover: rgba(244, 239, 230, 0.06);
  --field-ring: rgba(167, 139, 250, 0.35);

  /* ─────────────────────────────────────────────────────────────
     GRADIENTS - Brand CTA, halos, scrims, ornaments
     ───────────────────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(120deg, #840DBD 0%, #3B149F 60%, #101683 100%);
  --gradient-brand-edge: inset 0 0 0 1px rgba(244, 239, 230, 0.16);
  --halo-violet:
    radial-gradient(60% 50% at 20% 0%, rgba(132, 13, 189, 0.3) 0%, rgba(132, 13, 189, 0) 70%),
    radial-gradient(50% 45% at 85% 10%, rgba(16, 22, 131, 0.45) 0%, rgba(16, 22, 131, 0) 70%);
  --halo-logo: radial-gradient(closest-side, rgba(132, 13, 189, 0.38) 0%, rgba(16, 22, 131, 0.18) 55%, rgba(10, 14, 26, 0) 100%);
  --scrim-photo: linear-gradient(180deg, rgba(6, 9, 18, 0) 45%, rgba(6, 9, 18, 0.88) 100%);
  --rule-ornament: linear-gradient(90deg, rgba(230, 188, 83, 0) 0%, rgba(230, 188, 83, 0.6) 50%, rgba(230, 188, 83, 0) 100%);
  --skeleton: linear-gradient(90deg, #151A2E 0%, #1D2340 50%, #151A2E 100%);
  --skeleton-size: 200% 100%;

  /* ─────────────────────────────────────────────────────────────
     RADII - Sharp editorial frames, pill controls, arched portraits
     ───────────────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-bubble: 18px;
  --r-bubble-tail: 6px;
  --r-pill: 999px;
  --r-arch: 50% 50% 4px 4px / 37.5% 37.5% 4px 4px;

  /* ─────────────────────────────────────────────────────────────
     SPACING - 4px scale
     ───────────────────────────────────────────────────────────── */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  /* ─────────────────────────────────────────────────────────────
     LAYOUT - Gutters, rhythm, containers, chrome heights
     The v2 shell (shell.css, lot 3) sizes its masthead, body offset and
     toast offset with --ca-header-height. It never reads or redefines the
     legacy --header-height of design-tokens.css and style.css:235.
     ───────────────────────────────────────────────────────────── */
  --gutter: 20px;
  --grid-gap: 16px;
  --section-gap: 64px;
  --block-gap: 32px;
  --card-pad: 20px;
  --page-top: 32px;
  --container-text: 680px;
  --container-notifications: 720px;
  --container-form: 560px;
  --container-content: 1200px;
  --container-wide: 1320px;
  --scroll-offset: 80px;
  --ca-header-height: 56px;
  --tabbar-height: calc(64px + env(safe-area-inset-bottom));
  /* Sparkle rule (ALS-1190, base.css), from 1224px only. The clear column
     is the widest v2 content box (1224px at 1440); the feather is the ramp
     from it to full strength in the margins; the under-content alpha keeps
     the éclats near dust level on text and gauges. */
  --sky-clear: calc(var(--container-wide) - 2 * var(--gutter));
  --sky-feather: 48px;
  --sky-sparkle-under: 0.2;

  /* ─────────────────────────────────────────────────────────────
     ELEVATION - Tonal, no glow
     ───────────────────────────────────────────────────────────── */
  --shadow-menu: 0 12px 32px rgba(3, 5, 12, 0.5);
  --shadow-dialog: 0 24px 64px rgba(3, 5, 12, 0.6), 0 2px 8px rgba(3, 5, 12, 0.4);
  --shadow-swipe: 0 32px 64px -24px rgba(3, 5, 12, 0.8);
  /* Range thumb: dark edge plus a soft drop (lot 2) */
  --shadow-thumb: 0 0 0 1px rgba(10, 14, 26, 0.4), 0 2px 6px rgba(3, 5, 12, 0.5);

  /* ─────────────────────────────────────────────────────────────
     MOTION - Calm, nothing loops
     ───────────────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --dur-photo: 480ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* The only loops the spec allows: skeleton sweep, busy spinner (lot 2) */
  --dur-loop: 1.6s;
  --dur-spin: 800ms;

  /* ─────────────────────────────────────────────────────────────
     FONTS & LETTER SPACING
     ───────────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-nav: 0.02em;

  /* ─────────────────────────────────────────────────────────────
     TYPE SCALE - Mobile defaults (size / line height / weight)
     Desktop values apply from 600px. Card names swap family with size:
     Montserrat in the 2-column mobile grid, Cormorant from 600px.
     ───────────────────────────────────────────────────────────── */
  --fs-display-xl: 46px;
  --lh-display-xl: 48px;
  --fs-h1: 40px;
  --lh-h1: 44px;
  --fw-h1: 500;
  --fs-h2: 32px;
  --lh-h2: 38px;
  --fs-h3: 26px;
  --lh-h3: 32px;
  --fs-name-xl: 40px;
  --lh-name-xl: 44px;
  --fw-name-xl: 500;
  --font-name-card: var(--font-ui);
  --fs-name-card: 16px;
  --lh-name-card: 22px;
  --fs-name-swipe: 32px;
  --lh-name-swipe: 36px;
  --fs-lede: 21px;
  --lh-lede: 30px;
  --fs-quote: 22px;
  --lh-quote: 31px;
  --fs-numeral-xl: 48px;
  --lh-numeral-xl: 1;
  --fs-body: 16px;
  --lh-body: 26px;
  --fs-body-long: 17px;
  --lh-body-long: 28px;
  --fs-body-small: 14px;
  --lh-body-small: 22px;
  --fs-button: 15px;
  --lh-button: 20px;
  --fs-button-lg: 16px;
  --lh-button-lg: 20px;
  --fs-nav: 14px;
  --lh-nav: 20px;
  --fs-label: 13px;
  --lh-label: 18px;
  --fs-eyebrow: 11px;
  --lh-eyebrow: 16px;
  --fs-meta: 13px;
  --lh-meta: 18px;
  --fs-caption: 12px;
  --lh-caption: 16px;
  --fs-tabbar: 11px;
  --lh-tabbar: 14px;
  --fs-badge: 11px;
  --lh-badge: 18px;

  /* ─────────────────────────────────────────────────────────────
     LAYERS - Stacking of v2 overlays, aligned on the legacy scale
     (modal 1002/1003, menu 1004/1005, toast 1100)
     ───────────────────────────────────────────────────────────── */
  --layer-menu: 1005;

  /* ─────────────────────────────────────────────────────────────
     SHELL (lot 3, ALS-1055) - Masthead, tab bar, colophon, guest band
     The masthead goes solid under reduced transparency; the tab bar is
     never blurred. Chrome sits at 1000 like the legacy fixed nav, under
     modals (1002) and menus (1005). The guest band grows to 72px from
     1024px.
     ───────────────────────────────────────────────────────────── */
  --masthead-solid: #190E2E;
  --masthead-strong: rgba(25, 14, 46, 0.92);
  --tabbar-bg: rgba(25, 14, 46, 0.94);
  --rule-masthead: rgba(230, 188, 83, 0.18);
  --rule-tabbar: rgba(244, 239, 230, 0.1);
  --rule-colophon: rgba(230, 188, 83, 0.22);
  --blur-chrome: 16px;
  --layer-chrome: 1000;
  --ca-guest-header-height: 56px;
}

/* Tablet and desktop: wider gutters and the larger display scale. */
@media (min-width: 600px) {
  :root {
    --gutter: 32px;
    --grid-gap: 24px;
    --fs-display-xl: 76px;
    --lh-display-xl: 80px;
    --fs-h1: 60px;
    --lh-h1: 64px;
    --fw-h1: 400;
    --fs-h2: 40px;
    --lh-h2: 46px;
    --fs-h3: 30px;
    --lh-h3: 36px;
    --fs-name-xl: 64px;
    --lh-name-xl: 68px;
    --fw-name-xl: 400;
    --font-name-card: var(--font-display);
    --fs-name-card: 24px;
    --lh-name-card: 28px;
    --fs-name-swipe: 40px;
    --lh-name-swipe: 44px;
    --fs-lede: 24px;
    --lh-lede: 34px;
    --fs-quote: 26px;
    --lh-quote: 36px;
    --fs-numeral-xl: 64px;
    --lh-body-long: 30px;
  }
}

/* Desktop: wide rhythm and the taller header and guest band. */
@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-gap: 96px;
    --block-gap: 48px;
    --card-pad: 24px;
    --page-top: 64px;
    --ca-header-height: 64px;
    --ca-guest-header-height: 72px;
  }
}

/* Wide desktop: the full-length nav labels. */
@media (min-width: 1280px) {
  :root {
    --fs-nav: 15px;
  }
}

/* Reduced motion: transitions collapse to 1ms; --dur-1 keeps its 120ms
   fades, which the spec allows. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-photo: 1ms;
  }
}