/* Values from docs/plans/2026-10-31-w1-frontend.md, "Design direction", palette and type tables.
   apps/miniapp/src/styles/tokens.css did not exist on main when this file was written.
   Light palette on :root, dark palette under [data-theme="dark"] and under the media query,
   so the auto mode is right before any script runs. */

:root {
  --color-bg: #F4F5F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #EDEFF2;
  --color-text: #14171C;
  --color-text-muted: #5B6370;
  --color-border: #D9DDE3;
  --color-border-strong: #8A929E;
  --color-accent: #1F6FD1;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #E3EEFB;
  --color-link: #1A64BF;
  --color-catch: #9A5B00;
  --color-catch-fill: #F5A524;
  --color-on-catch: #14171C;
  --color-success: #1E7F45;
  --color-danger: #C8322F;
  --color-warning: #8F5A00;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #0F1115;
  --color-surface: #181B21;
  --color-surface-2: #22262E;
  --color-text: #E9ECF1;
  --color-text-muted: #A1A9B5;
  --color-border: #2E333C;
  --color-border-strong: #6B7380;
  --color-accent: #3D8BF2;
  --color-on-accent: #0B1220;
  --color-accent-soft: #1C2B42;
  --color-link: #7DB4FF;
  --color-catch: #F5B547;
  --color-catch-fill: #F5A524;
  --color-on-catch: #14171C;
  --color-success: #4CC38A;
  --color-danger: #FF7A72;
  --color-warning: #F0B44C;
  --shadow-card: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0F1115;
    --color-surface: #181B21;
    --color-surface-2: #22262E;
    --color-text: #E9ECF1;
    --color-text-muted: #A1A9B5;
    --color-border: #2E333C;
    --color-border-strong: #6B7380;
    --color-accent: #3D8BF2;
    --color-on-accent: #0B1220;
    --color-accent-soft: #1C2B42;
    --color-link: #7DB4FF;
    --color-catch: #F5B547;
    --color-catch-fill: #F5A524;
    --color-on-catch: #14171C;
    --color-success: #4CC38A;
    --color-danger: #FF7A72;
    --color-warning: #F0B44C;
    --shadow-card: none;
    color-scheme: dark;
  }
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* W1 type scale; the landing body is 16 px (reading-heavy), the cabinet uses 15 px */
  --text-caption: 500 12px/16px var(--font-sans);
  --text-small: 400 13px/18px var(--font-sans);
  --text-body: 400 16px/1.55 var(--font-sans);
  --text-strong: 600 16px/1.55 var(--font-sans);
  --text-section: 600 17px/24px var(--font-sans);
  --text-title: 700 22px/28px var(--font-sans);
  --text-title-wide: 700 28px/34px var(--font-sans);
  /* landing only */
  --text-hero: 700 clamp(30px, 4.2vw + 12px, 52px)/1.12 var(--font-sans);

  --content-max: 1120px;
  --header-h: 56px;
}