/* Bowin design tokens: the only place colours, type, space, radius, elevation and
   motion are defined. App and marketing pages both load this file first.
   Spec: docs/superpowers/specs/2026-10-05-design-system-design.md */
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* Colour (Brand Kit, AA-checked by test/tokens.test.mjs) */
  --ink: #0B1220;
  --ink-2: #334155;
  --muted: #556070;
  --ivory: #F8F5EC;
  --paper: #FFFFFF;
  --tint: #F1EDE3;
  --line: #D9D5C9;
  --line-strong: #7C8595;
  --red: #E11D48;
  --action: #C8202C;
  --action-hover: #A51A24;
  --gold: #F6B93B;
  --gold-text: #8A5A00;
  --blue: #52B6EC;
  --blue-text: #1D6FA0;
  --green: #21845C;
  --green-text: #1A6B4A;
  --warn: #B45309;
  --danger: #B42318;
  --on-ink-muted: #A3ADC2;
  --success-bg: #E7F4EC;
  --error-bg: #FBEAE8;
  --info-bg: #E8F3FA;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --display-sm: 28px;
  --display-md: clamp(30px, 4vw, 40px);
  --display-lg: clamp(36px, 6vw, 64px);
  --leading-body: 1.5;
  --leading-display: 1.15;

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(11 18 32 / 6%), 0 2px 8px rgb(11 18 32 / 5%);
  --shadow-2: 0 4px 16px rgb(11 18 32 / 10%), 0 1px 3px rgb(11 18 32 / 8%);

  /* Motion */
  --fast: 150ms;
  --base: 220ms;
  --ease-out: cubic-bezier(.25, 1, .5, 1);

  /* Layout */
  --content-max: 1200px;
  --content-max-wide: 1600px;
  --measure: 72ch;
  --gutter: 16px;
  --target: 44px;
  --icon-sm: 14px;
  --logo-height: 40px;

  /* Belt chart swatches (#394): decoration beside a text label, never the only cue */
  --belt-white: #FFFFFF;
  --belt-yellow: #F2C230;
  --belt-green: #21845C;
  --belt-blue: #1D6FA0;
  --belt-red: #C8202C;
  --belt-black: #0B1220;

  /* App shell (#388) */
  --assistant-width: 360px;
  --sidebar: 264px;
  --rail: 72px;
  --quickbar: 64px;
  --ink-hover: #1C2638;
  --scrim: rgb(11 18 32 / 55%);
}
@media (min-width: 760px){ :root{ --gutter: 24px; } }
@media (min-width: 1100px){ :root{ --gutter: 32px; } }
@media (prefers-reduced-motion: reduce){ :root{ --fast: 0ms; --base: 0ms; } }