/* ============================================================
   Saigon Rouge — design tokens (single source of truth)
   Bold & Playful · ink #18181b · rouge #dc2626 · lilac #faf5ff
   ============================================================ */

:root {
  /* Brand palette */
  --color-primary: #18181b;        /* ink */
  --color-accent: #dc2626;         /* rouge */
  --color-bg: #faf5ff;             /* page background */

  /* Tinted neutrals (never pure black/gray) */
  --color-surface: #ffffff;
  --color-surface-2: #f4ecf9;      /* lavender wash */
  --color-text: #211d26;           /* warm ink */
  --color-text-muted: #635a6e;     /* plum-gray */
  --color-line: #e8dcf1;           /* lilac hairline */
  --color-scrollbar: #e8dcf1;
  --color-scrollbar-thumb: #b9a6c8;

  /* Accent tints */
  --color-accent-deep: #b91c1c;
  --color-accent-hover: #b91c1c;
  --color-accent-soft: #fdecec;
  --color-accent-fade: #f7c8c8;

  /* Inverted band (ink section) */
  --color-band-bg: #18181b;
  --color-band-text: #f8f2fc;
  --color-band-muted: #b6a9c2;
  --color-band-line: #322d38;

  /* Text on accent */
  --color-on-accent: #fff6f5;

  /* Typography */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
  --text-hero: clamp(2.6rem, 1.6rem + 5vw, 4.6rem);
  --text-page: clamp(2.2rem, 1.5rem + 3.4vw, 3.4rem);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation — hard offset shadow for the playful look */
  --shadow-pop: 6px 6px 0 0 var(--color-accent);
  --shadow-pop-ink: 6px 6px 0 0 var(--color-primary);
  --shadow-soft: 0 10px 30px rgba(24, 24, 27, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 220ms;

  /* Layout */
  --max-width: 1080px;
  --max-width-wide: 1180px;
  --header-height: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171219;
    --color-surface: #211a26;
    --color-surface-2: #2b2231;
    --color-text: #f4edf9;
    --color-text-muted: #b7a9c4;
    --color-line: #3a3043;
    --color-scrollbar: #3a3043;
    --color-scrollbar-thumb: #806b8e;

    --color-accent-deep: #ef4444;
    --color-accent-hover: #dc2626;
    --color-accent-soft: #2b0d10;
    --color-accent-fade: #55201f;

    --color-band-bg: #100c13;
    --color-band-line: #2c2434;

    --shadow-pop: 6px 6px 0 0 var(--color-accent);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}