/* Vokt design tokens for the marketing site — GENERATED.
 * Source: packages/brand/tokens.css in vokt-mind, transformed by
 * documentation/ui-change/research/landing-tokens.mjs in the workspace.
 * Do not hand-edit: regenerate so the site and the app stay in step.
 */

:root {
  /* ─ brand primitives — measured from the guidelines, never re-picked ─ */
  --vokt-ink: #0f1215;
  --vokt-black: #000000;
  --vokt-blue: #2249b7;
  --vokt-grey-0: #080a0d;
  --vokt-grey-1: #14181b;
  --vokt-grey-2: #202327;
  --vokt-grey-3: #313538;
  --vokt-grey-4: #4e5255;
  --vokt-grey-5: #6e7378;
  --vokt-grey-6: #909498;
  --vokt-grey-7: #aaafb2;
  --vokt-grey-8: #d8dce0;
  --vokt-grey-9: #e9edf2;
  --vokt-grey-10: #f2f6f8;

  /* ─ semantic, light ─ */
  --background: #f2f6f8;
  --foreground: #0f1215;
  --card: #ffffff;
  --card-foreground: #0f1215;
  --popover: #ffffff;
  --popover-foreground: #0f1215;
  --primary: #2249b7;
  --primary-foreground: #f2f6f8;
  --primary-accent: #2249b7;
  --secondary: #d8dce0;
  --secondary-foreground: #0f1215;
  --muted: #e9edf2;
  --muted-foreground: #6e7378;
  --accent: #d8dce0;
  --accent-foreground: #0f1215;
  --destructive: #93000c;
  --destructive-foreground: #f2f6f8;
  --border: #aaafb2;
  --input: #aaafb2;
  --ring: #2249b7;
  --sidebar: #f2f6f8;
  --sidebar-foreground: #0f1215;
  --sidebar-primary: #2249b7;
  --sidebar-primary-foreground: #f2f6f8;
  --sidebar-accent: #d8dce0;
  --sidebar-accent-foreground: #0f1215;
  --sidebar-border: #aaafb2;
  --sidebar-ring: #2249b7;
  --success: #4da665;
  --success-subtle: #eaf4ed;
  --success-foreground: #1f7e3f;
  --warning: #c8880d;
  --warning-subtle: #f8f1e2;
  --warning-foreground: #976400;
  --danger: #f2695f;
  --danger-subtle: #fdedec;
  --danger-foreground: #c33f38;
  --info: #6591f8;
  --info-subtle: #edf2fe;
  --info-foreground: #4169cd;
  --cat-1: #6591f8;
  --cat-1-subtle: #edf2fe;
  --cat-1-foreground: #4169cd;
  --cat-2: #ea7245;
  --cat-2-subtle: #fceee9;
  --cat-2-foreground: #bc4917;
  --cat-3: #10a975;
  --cat-3-subtle: #e2f5ee;
  --cat-3-foreground: #007e55;
  --cat-4: #a881e8;
  --cat-4-subtle: #f5f0fc;
  --cat-4-foreground: #825abd;
  --cat-5: #00a4b7;
  --cat-5-subtle: #e0f4f6;
  --cat-5-foreground: #007989;
  --chart-1: #4872d8;
  --chart-2: #eb6834;
  --chart-3: #04a873;
  --chart-4: #c78600;
  --chart-5: #dc7099;

  /* ─ typography ─ */
  --vokt-font-display: "Anybody", "Arial Black", Arial, sans-serif;
  --vokt-font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --vokt-font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --vokt-font-prose: "Literata", Georgia, "Times New Roman", serif;
  --vokt-font-mono: "Berkeley Mono", "SF Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vokt-text-caps: 0.875rem;
  --vokt-text-2xs: 0.6875rem;
  --vokt-text-xs: 0.75rem;
  --vokt-text-sm: 0.8125rem;
  --vokt-text-base: 1rem;
  --vokt-text-lg: 1.125rem;
  --vokt-text-xl: 1.3125rem;
  --vokt-text-2xl: 1.5625rem;
  --vokt-text-3xl: 1.9375rem;
  --vokt-text-4xl: 2.75rem;
  --vokt-text-5xl: 3.5rem;
  --vokt-leading-heading: 1.2;
  --vokt-leading-body: 1.5;
  --vokt-leading-tight: 1.1;
  --vokt-tracking-wordmark: 0.116em;
  --vokt-tracking-caps: 0.04em;

  /* ─ geometry: the brand is square. only the logo mark is round ─ */
  --vokt-radius: 0rem;
  --vokt-radius-sm: 0rem;
  --vokt-radius-md: 0rem;
  --vokt-radius-lg: 0rem;
  --vokt-radius-xl: 0rem;
  --vokt-radius-2xl: 0rem;
  --vokt-radius-3xl: 0rem;
  --vokt-radius-4xl: 0rem;
  /* the one exception: pills that must stay pills (avatars, status dots) */
  --vokt-radius-full: 9999px;
  /* the mark's corner radius is a RATIO of its width, not a length (measured 78/464) */
  --vokt-mark-radius: 0.1681;

  color-scheme: light;
}

.dark {
  --background: #080a0d;
  --foreground: #f2f6f8;
  --card: #14181b;
  --card-foreground: #f2f6f8;
  --popover: #14181b;
  --popover-foreground: #f2f6f8;
  --primary: #3d6ada;
  --primary-foreground: #f2f6f8;
  --primary-accent: #4d7cee;
  --secondary: #202327;
  --secondary-foreground: #f2f6f8;
  --muted: #202327;
  --muted-foreground: #909498;
  --accent: #313538;
  --accent-foreground: #f2f6f8;
  --destructive: #d04b43;
  --destructive-foreground: #080a0d;
  --border: #313538;
  --input: #313538;
  --ring: #3d6ada;
  --sidebar: #14181b;
  --sidebar-foreground: #f2f6f8;
  --sidebar-primary: #3d6ada;
  --sidebar-primary-foreground: #f2f6f8;
  --sidebar-accent: #202327;
  --sidebar-accent-foreground: #f2f6f8;
  --sidebar-border: #313538;
  --sidebar-ring: #4d7cee;
  --success: #0c7435;
  --success-subtle: #122a20;
  --success-foreground: #439d5b;
  --warning: #885b00;
  --warning-subtle: #2b2516;
  --warning-foreground: #bd8000;
  --danger: #b8332e;
  --danger-subtle: #351d1f;
  --danger-foreground: #e55e55;
  --info: #375fc0;
  --info-subtle: #1b263c;
  --info-foreground: #5d89ee;
  --cat-1: #375fc0;
  --cat-1-subtle: #1b263c;
  --cat-1-foreground: #5d89ee;
  --cat-2: #b03e02;
  --cat-2-subtle: #332016;
  --cat-2-foreground: #de683a;
  --cat-3: #00734d;
  --cat-3-subtle: #102a25;
  --cat-3-foreground: #00a06d;
  --cat-4: #774fb0;
  --cat-4-subtle: #282339;
  --cat-4-foreground: #9f79de;
  --cat-5: #006f7d;
  --cat-5-subtle: #10292f;
  --cat-5-foreground: #009aac;
  --chart-1: #4872d8;
  --chart-2: #e5632e;
  --chart-3: #0fab76;
  --chart-4: #c18200;
  --chart-5: #d36891;

  color-scheme: dark;
}

/* Dark mode follows the OS once this block is uncommented. Left off deliberately:
   the marketing site has never shipped a dark theme and nobody has approved one.
   NOT a one-line switch, despite how it reads. The token PAIRS are audited,
   but this site puts brand blue on --card in nine places, which is 3.63:1 in
   dark. Thirteen elements fall below AA with this on. Measured 2026-08-24.
@media (prefers-color-scheme: dark) {
  :root {
    --background: #080a0d;
    --foreground: #f2f6f8;
    --card: #14181b;
    --card-foreground: #f2f6f8;
    --popover: #14181b;
    --popover-foreground: #f2f6f8;
    --primary: #3d6ada;
    --primary-foreground: #f2f6f8;
    --primary-accent: #4d7cee;
    --secondary: #202327;
    --secondary-foreground: #f2f6f8;
    --muted: #202327;
    --muted-foreground: #909498;
    --accent: #313538;
    --accent-foreground: #f2f6f8;
    --destructive: #d04b43;
    --destructive-foreground: #080a0d;
    --border: #313538;
    --input: #313538;
    --ring: #3d6ada;
    --sidebar: #14181b;
    --sidebar-foreground: #f2f6f8;
    --sidebar-primary: #3d6ada;
    --sidebar-primary-foreground: #f2f6f8;
    --sidebar-accent: #202327;
    --sidebar-accent-foreground: #f2f6f8;
    --sidebar-border: #313538;
    --sidebar-ring: #4d7cee;
    --success: #0c7435;
    --success-subtle: #122a20;
    --success-foreground: #439d5b;
    --warning: #885b00;
    --warning-subtle: #2b2516;
    --warning-foreground: #bd8000;
    --danger: #b8332e;
    --danger-subtle: #351d1f;
    --danger-foreground: #e55e55;
    --info: #375fc0;
    --info-subtle: #1b263c;
    --info-foreground: #5d89ee;
    --cat-1: #375fc0;
    --cat-1-subtle: #1b263c;
    --cat-1-foreground: #5d89ee;
    --cat-2: #b03e02;
    --cat-2-subtle: #332016;
    --cat-2-foreground: #de683a;
    --cat-3: #00734d;
    --cat-3-subtle: #102a25;
    --cat-3-foreground: #00a06d;
    --cat-4: #774fb0;
    --cat-4-subtle: #282339;
    --cat-4-foreground: #9f79de;
    --cat-5: #006f7d;
    --cat-5-subtle: #10292f;
    --cat-5-foreground: #009aac;
    --chart-1: #4872d8;
    --chart-2: #e5632e;
    --chart-3: #0fab76;
    --chart-4: #c18200;
    --chart-5: #d36891;

    color-scheme: dark;
  }
}
*/