/* ============================================================================
   tokens.css — THE SINGLE SOURCE OF TRUTH for the Varing design system.
   ----------------------------------------------------------------------------
   This file is the SEAM. Every colour, font, space, radius, shadow and motion
   value the UI uses is declared here as a CSS custom property. Components and
   screens consume ONLY `var(--token)` — never a hardcoded colour/size/font.

   The builder OWNS the visual identity. To re-skin the entire product, edit the
   values here (or generate this file from `design.md` via
   `scripts/build_tokens.py`). Nothing else needs to change: drop new tokens in
   and the console, customer dashboard and public site all transform at once.

   These defaults are a tasteful, non-generic placeholder (a calm tinted-slate
   dark theme with one disciplined accent) — they are meant to be REPLACED.

   Sovereignty: fonts are self-hosted below (no Google Fonts, no external CDN,
   no trackers). The .woff2 files live in /console/static/fonts/.
   ============================================================================ */

/* ---- Self-hosted fonts (variable, one file = all weights) ----------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/console/static/fonts/SchibstedGrotesk-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/console/static/fonts/JetBrainsMono-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* Fraunces — an open-source (OFL) high-contrast display serif with real
   personality (optical sizing, soft terminals). Used ONLY for display/headings
   to give the identity an editorial, human voice. Self-hosted; no CDN. */
@font-face {
  font-family: "Fraunces";
  src: url("/console/static/fonts/Fraunces-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/console/static/fonts/Fraunces-italic-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* @tokens:start — the block below can be regenerated from design.md via
   `python scripts/build_tokens.py`. You may also edit it here directly; just
   keep design.md in sync if you use the generator. */
:root {
  /* Colour */
  --color-bg: #ece6da;
  --color-surface: #fcfaf5d9;
  --color-surface-solid: #fcfaf5;
  --color-surface-raised: #fefdfb;
  --color-surface-sunken: #e4ddcd;
  --color-border: #ddd5c4;
  --color-border-strong: #c4b9a2;
  --color-text: #211d18;
  --color-text-muted: #5b5349;
  --color-text-subtle: #8a8073;
  --color-accent: #1f4d3d;
  --color-accent-hover: #2a6450;
  --color-accent-active: #163b2e;
  --color-accent-contrast: #f6f3ea;
  --color-accent-subtle: #e1eae3;
  --color-accent-2: #9a6a2a;
  --color-accent-2-subtle: #f0e6d2;
  --color-focus-ring: #2a6450;
  --color-success: #1f6b4d;
  --color-success-bg: #e3f0e7;
  --color-success-border: #bcd9c5;
  --color-warning: #8a5a12;
  --color-warning-bg: #f6ebd2;
  --color-warning-border: #e0c68c;
  --color-danger: #a32a28;
  --color-danger-bg: #f7e1df;
  --color-danger-border: #e3b0ac;
  --color-info: #1f5170;
  --color-info-bg: #e0ebf2;
  --color-info-border: #b3cedd;
  --color-overlay: rgba(33, 29, 24, 0.42);
  --color-gradient-brand: linear-gradient(140deg, #1f4d3d 0%, #2a6450 100%);
  --color-gradient-brand-soft: linear-gradient(140deg, color-mix(in srgb, #1f4d3d 14%, transparent), color-mix(in srgb, #9a6a2a 12%, transparent));

  /* Typography */
  --font-sans: "Schibsted Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --font-size-display: clamp(2.4rem, 1.1rem + 4.8vw, 4.5rem);
  --font-size-h1: clamp(1.9rem, 1.4rem + 1.9vw, 2.6rem);
  --font-size-h2: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  --font-size-h3: 1.2rem;
  --font-size-lg: 1.0625rem;
  --font-size-body: 0.95rem;
  --font-size-sm: 0.85rem;
  --font-size-caption: 0.78rem;
  --font-size-overline: 0.72rem;
  --line-height-tight: 1.06;
  --line-height-snug: 1.28;
  --line-height-normal: 1.6;
  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.1em;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 620;
  --weight-bold: 720;
  --weight-black: 800;

  /* Spacing (4px rhythm) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 11px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(33, 29, 24, 0.06);
  --shadow-md: 0 10px 30px -14px rgba(33, 29, 24, 0.16), 0 2px 6px rgba(33, 29, 24, 0.05);
  --shadow-lg: 0 32px 64px -28px rgba(33, 29, 24, 0.24), 0 8px 20px rgba(33, 29, 24, 0.08);
  --shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --shadow-glow: 0 16px 40px -14px rgba(31, 77, 61, 0.28);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 640ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --sidebar-width: 250px;
  --topbar-height: 64px;
  --content-max: 1200px;
}
/* @tokens:end */

/* ============================================================================
   Dark theme — the same warm, editorial identity rendered on ink instead of
   paper. Light is the DEFAULT; dark is opt-in via the header toggle, which sets
   `data-theme="dark"` on <html> and persists the choice in localStorage. Only
   the SEMANTIC colour + elevation tokens flip here — the component CSS consumes
   them by name and re-skins automatically (no per-component dark rules).

   Neutrals stay warm-tinted (never pure #000), the green accent brightens so it
   stays legible on dark, and the brass second accent warms a touch. These are
   hand-maintained (the design.md generator emits only the light :root block).
   ============================================================================ */
[data-theme="dark"] {
  /* Colour */
  --color-bg: #14120d;
  --color-surface: #221e16d9;
  --color-surface-solid: #1d1a13;
  --color-surface-raised: #272219;
  --color-surface-sunken: #100e09;
  --color-border: #3a3426;
  --color-border-strong: #564e3b;
  --color-text: #f1ebdf;
  --color-text-muted: #c0b6a3;
  --color-text-subtle: #948a78;
  --color-accent: #4ca88b;
  --color-accent-hover: #6fc1a6;
  --color-accent-active: #3c8f74;
  --color-accent-contrast: #11140f;
  --color-accent-subtle: #1b2a23;
  --color-accent-2: #cf9a52;
  --color-accent-2-subtle: #2a2114;
  --color-focus-ring: #6fc1a6;
  --color-success: #5fb98e;
  --color-success-bg: #15241c;
  --color-success-border: #2e4a39;
  --color-warning: #d9a85a;
  --color-warning-bg: #2a2113;
  --color-warning-border: #4d3f22;
  --color-danger: #df8576;
  --color-danger-bg: #2c1714;
  --color-danger-border: #5a302a;
  --color-info: #79b3d4;
  --color-info-bg: #13212b;
  --color-info-border: #2c4655;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-gradient-brand: linear-gradient(140deg, #2c8a73 0%, #4ca88b 100%);
  --color-gradient-brand-soft: linear-gradient(140deg, color-mix(in srgb, #4ca88b 16%, transparent), color-mix(in srgb, #cf9a52 12%, transparent));

  /* Elevation — paper shadows vanish on ink, so depth comes from darker casts
     and a barely-there top highlight instead of the bright paper one. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px -14px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.72), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 16px 40px -14px rgba(76, 168, 139, 0.32);
}