/* ── Design Tokens ──
   Structure follows the Airbnb system (modest display weights, single accent
   voltage, 4px base spacing, soft radii, one shadow tier). Palette is navy,
   warm beige and soft gold: navy carries the surfaces, beige the ink, and
   gold is the one accent, used scarcely. */
:root {
  /* Page ground is Warm Beige; surfaces on top are Navy #1F2A44 */
  --canvas:         #E8DCC8;
  --surface-soft:   #1B2540;
  --surface-card:   #1F2A44;
  --surface-strong: #283452;

  /* Text — Warm Beige #E8DCC8 and its tints */
  --ink:        #E8DCC8;
  --body:       #D3C8B4;
  --muted:      #A39A89;
  --muted-soft: #7C766C;

  /* Hairlines — beige at low alpha, so dividers stay warm */
  --hairline:      rgba(232, 220, 200, 0.12);
  --hairline-soft: rgba(232, 220, 200, 0.07);
  --border-strong: rgba(232, 220, 200, 0.26);

  /* The single accent — Soft Gold #C6A75E. Used scarcely. */
  --primary:        #C6A75E;
  --primary-active: #B3934A;
  --primary-soft:   rgba(198, 167, 94, 0.10);
  --primary-line:   rgba(198, 167, 94, 0.30);
  --on-primary:     #1F2A44;

  /* Semantic — desaturated so they sit inside the palette, not on top of it */
  --positive:      #9DB89A;
  --positive-soft: rgba(157, 184, 154, 0.08);
  --positive-line: rgba(157, 184, 154, 0.22);
  --negative:      #D4907A;
  --negative-soft: rgba(212, 144, 122, 0.08);
  --negative-line: rgba(212, 144, 122, 0.22);

  /* World */
  --window:     #E8DCC8;

  /* Typography — Inter is the documented Cereal substitute */
  --font: 'Inter', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (size / weight / line-height / tracking) */
  --display-xl: 700 28px/1.43 var(--font);
  --display-lg: 500 22px/1.18 var(--font);
  --display-md: 700 21px/1.43 var(--font);
  --display-sm: 600 20px/1.20 var(--font);
  --title-md:   600 16px/1.25 var(--font);
  --title-sm:   500 16px/1.25 var(--font);
  --body-md:    400 16px/1.5  var(--font);
  --body-sm:    400 14px/1.43 var(--font);
  --caption:    500 14px/1.29 var(--font);
  --caption-sm: 400 13px/1.23 var(--font);
  --badge:      600 11px/1.18 var(--font);
  --micro:      700 12px/1.33 var(--font);
  --button-md:  500 16px/1.25 var(--font);
  --button-sm:  500 14px/1.29 var(--font);

  /* Spacing — 4px base with a 2px micro-step */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-base:16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section: 64px;

  /* Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Elevation — one tier, as in the source system */
  --shadow: rgba(23, 32, 51, 0.10) 0 0 0 1px,
            rgba(23, 32, 51, 0.18) 0 4px 12px 0,
            rgba(23, 32, 51, 0.22) 0 14px 32px -6px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.2s;
  --t-med:   0.4s;
  --t-slow:  0.8s;
  --t-crawl: 1.4s;
}

body {
  font: var(--body-md);
  background: var(--canvas);
  color: var(--body);
  overflow: hidden;
}