/* Design tokens for the buyer-facing key status page: light palette, dark
   palette, and the radius / spacing / type / control scales. Loaded first
   because every other public-*.css file resolves these variables. */

/* Kiro-Go buyer-facing key status page.
   Tokens are copied verbatim from web/styles.css so this page and the admin
   panel read as one product. The admin panel switches themes with a `.dark`
   class driven by JS; this page is unauthenticated and stores nothing, so it
   follows the operating system through prefers-color-scheme instead. */

/* ---------- Design tokens: light (mirrors styles.css :root) ---------- */
:root {
  --background: #fcfcfc;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #ebebeb;
  --secondary-foreground: #000000;
  --muted: #f5f5f5;
  --muted-foreground: #525252;
  --accent: #ebebeb;
  --accent-foreground: #000000;
  --destructive: #e54b4f;
  --destructive-foreground: #ffffff;
  --border: #e4e4e4;
  --border-focus: #a3a3a3;
  --input: #ebebeb;
  --ring: #a3a3a3;
  --success: #0f766e;
  --success-foreground: #ffffff;
  --warning: #ffae04;
  --warning-foreground: #000000;
  --info: #2d62ef;
  --info-foreground: #ffffff;

  /* Radius scale */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-pill: 9999px;

  /* Spacing scale (0.25rem base, same increments the admin panel uses) */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --space-9: 2.75rem;

  /* Type scale */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.5rem;

  /* Control metrics */
  --control-h: 2.25rem;
  --control-h-lg: 2.75rem;

  /* Geist is named so a viewer who has it installed gets it, but this page
     deliberately ships no webfont: the admin panel loads Geist from a Google
     Fonts CDN, and an unauthenticated page that advertises storing nothing must
     not leak a buyer's IP to a third party. Do NOT add that @import here -
     self-host under vendor/ if the typefaces must match. */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --kiro-icon-filter: none;

  --chart-bar: var(--foreground);
  /* Not the --border hairline: at 1.27:1 the axis was invisible, so a zero-usage
     day read as missing data. ~2.9:1 against --card in each scheme. */
  --chart-track: #989898;
  --transition-fast: 0.15s ease;
  color-scheme: light;
}

/* ---------- Design tokens: dark (mirrors styles.css .dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --foreground: #ffffff;
    --card: #090909;
    --card-foreground: #ffffff;
    --primary: #ffffff;
    --primary-foreground: #000000;
    --secondary: #222222;
    --secondary-foreground: #ffffff;
    --muted: #1d1d1d;
    --muted-foreground: #a4a4a4;
    --accent: #333333;
    --accent-foreground: #ffffff;
    --destructive: #ff5b5b;
    --destructive-foreground: #ffffff;
    --border: #242424;
    --border-focus: #525252;
    --input: #333333;
    --ring: #525252;
    --success: #2dd4bf;
    --success-foreground: #001f1d;
    --warning: #ffae04;
    --warning-foreground: #000000;
    --info: #2671f4;
    --info-foreground: #ffffff;
    --kiro-icon-filter: invert(1);
    --chart-track: #5c5c5c;
    color-scheme: dark;
  }
}