/* Spark design tokens — one shared system for sparkaudithq.com, agenticaination.com, granitcorp.com.
   Every colour is a token here, never a literal value anywhere else in the CSS. */

:root {
  /* Colour — light (default) */
  --ink: #0F1B2D;
  --paper: #F7F8FA;
  --panel: #FFFFFF;
  --line: #D5DBE5;
  --muted: #566277;
  --spark: #E8A100;
  --spark-ink: #1A1200;
  --ok: #1F7A4D;
  --bad: #B3261E;

  /* Type */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 40px;
  --text-3xl: 56px;

  /* Layout */
  --content-max: 1120px;
  --gutter: max(16px, env(safe-area-inset-left));
  --gutter-end: max(16px, env(safe-area-inset-right));
  --radius: 10px;

  /* Motion */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--spark) 55%, transparent);
}

:root[data-theme="dark"] {
  --ink: #E8EDF5;
  --paper: #0B1320;
  --panel: #121E30;
  --line: #243247;
  --muted: #9DABC0;
  --spark: #FFB81F;
  --spark-ink: #1A1200;
  --ok: #4CC38A;
  --bad: #FF7B72;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EDF5;
    --paper: #0B1320;
    --panel: #121E30;
    --line: #243247;
    --muted: #9DABC0;
    --spark: #FFB81F;
    --spark-ink: #1A1200;
    --ok: #4CC38A;
    --bad: #FF7B72;
  }
}