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

:root {
  /* ── Typography ── */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Brand: the three source colours ── */
  --color-dark:   #0A0D1D;
  --color-light:  #F1E8E6;
  --color-accent: #DF1919;

  /* ── Background scale
       All derived from --color-dark, nudged very slightly
       toward the warm undertone of --color-light.
       #0A0D1D → tiny warmth increase per step.
  ── */
  --bg:        #0A0D1D;   /* pure dark — page base                */
  --surface:   #0F1220;   /* +5 lightness — topbar, action bars   */
  --surface-2: #141828;   /* +10 lightness — cards, panels        */
  --surface-transparent: #141828ae;

  /* ── Text scale
       --color-light at decreasing opacity.
       Same warm pinkish hue throughout, just quieter.
  ── */
  --text:        #F1E8E6;                   /* 100% — primary text     */
  --text-muted:  rgba(241, 232, 230, 0.75); /*  75% — labels, secondary */
  --text-subtle: rgba(241, 232, 230, 0.50); /*  50% — hints, footer     */

  /* ── Borders
       Same light hue, very low opacity — feel like whispers of the text colour.
  ── */
  --border:       rgba(241, 232, 230, 0.10); /* default dividers        */
  --border-hover: rgba(241, 232, 230, 0.22); /* hover / focus state     */

  /* ── Accent scale
       All derived from --color-accent (#DF1919).
  ── */
  --accent:       #DF1919;
  --accent-hover: #C01414;                  /* -10% lightness for hover */
  --accent-soft:  rgba(223, 25, 25, 0.12);  /* subtle red bg tint       */

  /* Paris brand aliases — same as accent */
  --paris:       #DF1919;
  --guessr:      #DF1919;
  --paris-hover: #C01414;
  --paris-soft:  rgba(223, 25, 25, 0.12);

  /* ── State (intentionally neutral — not brand-derived) ── */
  --success: #22c55e;
  --danger:  #ef4444;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-pad: 1.5rem;
}