/* Klauvy shared tokens: the app (body.dark for dark mode) and the marketing pages.
   Source of truth: design-system/klauvy-app-revamp-plan.md section 2 and
   design-system/klauvy-brand-system.html. Load this file before any other stylesheet.
   The "legacy names" blocks keep older variable names working until each component
   moves to the new names (sessions 2 to 6). Do not add new uses of legacy names. */

:root{
  /* Surfaces */
  --bg:#f7f6f3;--surface:#fff;--sunken:#efede8;--raised:#fff;--overlay:rgba(14,15,17,.42);
  /* Lines */
  --line:#e3e1dc;--line-strong:#cfccc5;--line-input:#8f8c85;
  /* Text */
  --ink:#0e0f11;--ink-2:#3a3c42;--muted:#65676e;--faint:#8e9097;--on-ink:#fff;
  /* Actions: the primary button is ink. Orange never fills a button. */
  --primary:#0e0f11;--primary-hover:#2a2c31;--primary-ink:#fff;
  /* Signal orange: marks only (fold, progress, focus, active nav icon).
     Orange text uses --signal-ink. */
  --signal:#ff4f00;--signal-ink:#c43e00;--signal-soft:#fff0e8;--signal-line:#ffc6a8;
  /* Meaning */
  --success:#0b7a4b;--success-soft:#e6f4ec;--warning:#8a5a00;--warning-soft:#fbf1dc;
  --danger:#c42b2b;--danger-soft:#fcebea;--info:#2b5a9e;--info-soft:#e9f0fa;
  /* Interaction overlays */
  --hover:rgba(14,15,17,.045);--press:rgba(14,15,17,.08);
  /* Elevation: a shadow plus a hairline, so it still reads in dark mode */
  --e1:0 1px 2px rgba(14,15,17,.06),0 0 0 1px var(--line);
  --e2:0 10px 30px -10px rgba(14,15,17,.22),0 0 0 1px rgba(14,15,17,.07);
  --e3:0 30px 70px -24px rgba(14,15,17,.38),0 0 0 1px rgba(14,15,17,.07);
  /* Controls: card hover, field focus ring, select chevron and checkbox tick (session 2) */
  --e1-hover:0 1px 2px rgba(14,15,17,.06),0 0 0 1px var(--line-strong);
  --ring:0 0 0 3px color-mix(in srgb,var(--signal) 22%,transparent);--ring-danger:0 0 0 3px var(--danger-soft);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365676e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* Data visualisation */
  --viz-1:#3a3c42;--viz-2:#ff4f00;--viz-3:#2f7f7a;--viz-4:#4f6aa3;--viz-5:#b58a2a;
  /* Type */
  --display:Sora,system-ui,sans-serif;--sans:Figtree,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --fs-overline:.6875rem;--fs-caption:.8125rem;--fs-ui:.875rem;--fs-body:1rem;--fs-lead:1.125rem;
  --fs-h3:1.375rem;--fs-h2:1.75rem;--fs-h1:2.25rem;--fs-display:3rem;
  /* Space (4 px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-12:48px;
  /* Radius */
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;
  /* Focus */
  --focus:2px solid var(--signal);--focus-offset:2px;
  /* Motion: quieter than the landing */
  --t-fast:120ms;--t-base:180ms;--t-panel:240ms;
  --ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);

  /* Legacy names */
  --paper:var(--surface);--soft:var(--sunken);--green:var(--ink);--accent:var(--signal);
  --action:var(--primary);--action-hover:var(--primary-hover);--action-ink:var(--primary-ink);--action-soft:var(--sunken);
  --hl:var(--signal-soft);--hl-ink:var(--signal-ink);--tip:var(--sunken);--tip-b:var(--line);
  --ok:var(--success);--ok-d:var(--success);--ok-t:var(--success-soft);--bad:var(--danger);--bad-t:var(--danger-soft);
  --panel-motion:var(--t-panel) var(--ease);
  color-scheme:light}

body.dark{
  --bg:#0b0c0e;--surface:#141518;--sunken:#1b1c20;--raised:#1b1c20;--overlay:rgba(0,0,0,.6);
  --line:#26282d;--line-strong:#393b41;--line-input:#6b6e76;
  --ink:#f1f0ed;--ink-2:#c9c9cc;--muted:#a3a5ab;--faint:#75777e;--on-ink:#0e0f11;
  --primary:#f1f0ed;--primary-hover:#fff;--primary-ink:#0e0f11;
  --signal:#ff6a26;--signal-ink:#ff8a50;--signal-soft:#2a160c;--signal-line:#5a2a12;
  --success:#3fbf82;--success-soft:#10291d;--warning:#e3b04b;--warning-soft:#2b2110;
  --danger:#ff6b63;--danger-soft:#2e1414;--info:#7fa8e8;--info-soft:#121d2e;
  --hover:rgba(255,255,255,.05);--press:rgba(255,255,255,.09);
  --e1:0 0 0 1px var(--line);
  --e2:0 12px 32px -8px rgba(0,0,0,.6),0 0 0 1px var(--line-strong);
  --e3:0 30px 80px -20px rgba(0,0,0,.75),0 0 0 1px var(--line-strong);
  --e1-hover:0 0 0 1px var(--line-strong);
  --ring:0 0 0 3px color-mix(in srgb,var(--signal) 30%,transparent);--ring-danger:0 0 0 3px var(--danger-soft);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a5ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f11' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --viz-1:#c9c9cc;--viz-2:#ff6a26;--viz-3:#4fb3ac;--viz-4:#7fa8e8;--viz-5:#e3b04b;
  /* Legacy names re-resolve against the dark values above */
  --paper:var(--surface);--soft:var(--sunken);--green:var(--ink);--accent:var(--signal);
  --action:var(--primary);--action-hover:var(--primary-hover);--action-ink:var(--primary-ink);--action-soft:var(--sunken);
  --hl:var(--signal-soft);--hl-ink:var(--signal-ink);--tip:var(--sunken);--tip-b:var(--line);
  --ok:var(--success);--ok-d:var(--success);--ok-t:var(--success-soft);--bad:var(--danger);--bad-t:var(--danger-soft);
  --focus:2px solid var(--signal);
  color-scheme:dark}