/* Wardn design tokens: the one source for colours, type, spacing, radii, elevation and motion.
   Used by the website (site/assets/ui/), the dashboard (dashboard/v2/app/ui/) and the status page.
   Edit this file, then run `node tools/build-site.js` to copy it out. Dark only for now; a light theme
   would redefine the colour tokens under [data-theme="light"]. */
:root {
  color-scheme: dark;

  /* Surfaces: deep ink with a hint of violet, lifted in steps */
  --bg: #08080c;
  --bg-raised: #0e0e14;
  --surface: #13131a;
  --surface-2: #1a1a23;
  --surface-3: #23232e;
  --overlay: rgba(8, 8, 12, 0.72);

  /* Lines */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-accent: rgba(160, 139, 255, 0.4);

  /* Text */
  --text: #f4f4f8;
  --text-2: #c9c9d6;
  --muted: #9a9aab;
  --faint: #6e6e80;

  /* Brand */
  --accent: #7c5cff;
  --accent-hi: #a08bff;
  --accent-lo: #5b3fe0;
  --accent-soft: rgba(124, 92, 255, 0.14);
  --accent-softer: rgba(124, 92, 255, 0.08);
  --on-accent: #fff;

  /* Status */
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.13);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.13);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.13);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, 0.13);

  /* Type */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: clamp(36px, 5vw, 52px);
  --text-hero: clamp(42px, 7vw, 76px);
  --tracking-tight: -0.03em;
  --tracking-display: -0.045em;

  /* Spacing (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.75);
  --glow: 0 10px 30px -10px rgba(124, 92, 255, 0.7);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.35s;

  /* Layout */
  --content: 1120px;
  --sidebar: 264px;
}