/* Generated from replica/design/tokens.json. Components use these roles, never raw hex. */
:root {
  --bg: #f1efea;
  --surface: #fbfaf7;
  --surface-2: #f6f4ef;
  --border: #e2ded5;
  --border-input: #8a8478;
  --text: #1c1b19;
  --text-muted: #5f5a51;
  --accent: #8a5a00;
  --accent-fill: #f5b301;
  --accent-soft: #fdf0c8;
  --on-accent: #1c1b19;
  --danger: #b42318;
  --danger-soft: #fde7e4;
  --success: #1d7044;
  --success-soft: #dff3e7;
  --warning: #8a5a00;
  --warning-soft: #fdf0c8;
  --info: #1f5fb8;
  --info-soft: #e1ecfb;
  --paper: #f7f6f2;
  --paper-line: rgba(28, 27, 25, 0.10);
  --scrim: rgba(20, 19, 17, 0.36);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 12px; --lh-xs: 16px;
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-base: 16px; --lh-base: 24px;
  --fs-lg: 20px; --lh-lg: 28px;
  --fs-xl: 28px; --lh-xl: 34px;
  --fs-display: 40px; --lh-display: 44px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(28, 27, 25, .06), 0 2px 6px rgba(28, 27, 25, .06);
  --shadow-float: 0 6px 24px rgba(28, 27, 25, .14), 0 1px 3px rgba(28, 27, 25, .10);
  --shadow-pop: 0 16px 40px rgba(28, 27, 25, .20);

  --t-fast: 120ms; --t-base: 220ms; --ease: cubic-bezier(.2, .8, .2, 1);

  --rail: 72px; --header: 56px; --content-max: 1280px; --wheel: 168px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16171a; --surface: #202226; --surface-2: #1b1d20; --border: #33363c; --border-input: #7d828c;
    --text: #ecebe7; --text-muted: #a6a39b; --accent: #ffc53d; --accent-fill: #f5b301; --accent-soft: #3a3016;
    --on-accent: #1c1b19; --danger: #ff7a6b; --danger-soft: #3d1f1c; --success: #5fd394; --success-soft: #16301f;
    --warning: #ffc53d; --warning-soft: #3a3016; --info: #7fb2ff; --info-soft: #1a2940;
    --paper: #1d1f22; --paper-line: rgba(236, 235, 231, 0.09); --scrim: rgba(0, 0, 0, .55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-float: 0 8px 28px rgba(0, 0, 0, .5); --shadow-pop: 0 16px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16171a; --surface: #202226; --surface-2: #1b1d20; --border: #33363c; --border-input: #7d828c;
  --text: #ecebe7; --text-muted: #a6a39b; --accent: #ffc53d; --accent-fill: #f5b301; --accent-soft: #3a3016;
  --on-accent: #1c1b19; --danger: #ff7a6b; --danger-soft: #3d1f1c; --success: #5fd394; --success-soft: #16301f;
  --warning: #ffc53d; --warning-soft: #3a3016; --info: #7fb2ff; --info-soft: #1a2940;
  --paper: #1d1f22; --paper-line: rgba(236, 235, 231, 0.09); --scrim: rgba(0, 0, 0, .55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-float: 0 8px 28px rgba(0, 0, 0, .5); --shadow-pop: 0 16px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}