/* Perceptlayer design tokens, light and dark. Loaded by every page: the site and /admin. */

:root {
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eceef2;
  --surface-raised: #ffffff;
  --console: #0e1116;
  --console-raised: #161b23;
  --line: #e3e6ea;
  --line-strong: #aab2bd;
  --line-console: #273040;
  --ink: #0e1116;
  --ink-2: #3a4250;
  --ink-muted: #5b6472;
  --ink-console: #e6ebf2;
  --ink-console-muted: #8b96a8;
  --signal: #ff6b2c;
  --signal-hover: #f25a17;
  --signal-text: #c2410c;
  --signal-soft: #fff1ea;
  --on-signal: #0e1116;
  --glow: #ffd3bd;
  --focus: #e04e0e;
  --success: #0f766e;
  --success-soft: #e6f5f3;
  --warning: #a16207;
  --warning-soft: #fdf5dc;
  --danger: #b91c1c;
  --danger-soft: #fdecec;
  --info: #1d4ed8;
  --info-soft: #e8efff;
  --code-key: #ff9a66;
  --code-string: #9fe3c0;
  --code-number: #f5c451;
  --code-punct: #8b96a8;
  --code-comment: #7d8797;
  --console-ok: #2dd4bf;
  --console-bad: #f87171;
  /* Charts: validated for colour-vision deficiency on both surfaces (dataviz validator). Failed is a status, always labelled. */
  --chart-billed: #2a78d6;
  --chart-failed: #d03b3b;
  --shadow-sm: 0 1px 2px #0e111614;
  --shadow-md: 0 4px 12px -2px #0e11161f, 0 12px 32px -8px #0e111626;
  --shadow-console: 0 24px 64px -24px #0e111666;
  --ground: #0e111624;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #e04e0e;

  --font-display: "Doto", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, 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;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --container: 1200px;
  --container-narrow: 720px;
  --gutter: 24px;
  --nav-height: 64px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0b0d11;
    --surface-2: #12151b;
    --surface-3: #1a1e26;
    --surface-raised: #151920;
    --console: #07090c;
    --console-raised: #0f1318;
    --line: #262b35;
    --line-strong: #4a5262;
    --ink: #e9ecf1;
    --ink-2: #b8c0cc;
    --ink-muted: #8f98a6;
    --signal: #ff7a3d;
    --signal-hover: #ff8a55;
    --signal-text: #ff9a66;
    --signal-soft: #2a160c;
    --glow: #4a2412;
    --focus: #ff7a3d;
    --success: #2dd4bf;
    --success-soft: #0b2b28;
    --warning: #fbbf24;
    --warning-soft: #2d2206;
    --danger: #f87171;
    --danger-soft: #2f1212;
    --info: #60a5fa;
    --info-soft: #0f1d3a;
    --shadow-sm: 0 1px 2px #00000080;
    --shadow-md: 0 12px 32px -8px #000000cc;
    --shadow-console: 0 24px 64px -24px #000000e6;
    --ground: #00000080;
    --focus-ring: 0 0 0 2px #0b0d11, 0 0 0 4px #ff7a3d;
    --chart-billed: #3987e5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0b0d11;
  --surface-2: #12151b;
  --surface-3: #1a1e26;
  --surface-raised: #151920;
  --console: #07090c;
  --console-raised: #0f1318;
  --line: #262b35;
  --line-strong: #4a5262;
  --ink: #e9ecf1;
  --ink-2: #b8c0cc;
  --ink-muted: #8f98a6;
  --signal: #ff7a3d;
  --signal-hover: #ff8a55;
  --signal-text: #ff9a66;
  --signal-soft: #2a160c;
  --glow: #4a2412;
  --focus: #ff7a3d;
  --success: #2dd4bf;
  --success-soft: #0b2b28;
  --warning: #fbbf24;
  --warning-soft: #2d2206;
  --danger: #f87171;
  --danger-soft: #2f1212;
  --info: #60a5fa;
  --info-soft: #0f1d3a;
  --shadow-sm: 0 1px 2px #00000080;
  --shadow-md: 0 12px 32px -8px #000000cc;
  --shadow-console: 0 24px 64px -24px #000000e6;
  --ground: #00000080;
  --focus-ring: 0 0 0 2px #0b0d11, 0 0 0 4px #ff7a3d;
  --chart-billed: #3987e5;
  color-scheme: dark;
}