/* Skate design tokens. Option 1 on every board (2026-10-01).
   Source of truth: ~/Projects/skate-site/assets/site.css :root (master 0d990ae).
   Live names are kept as-is. Everything else is measured from the option-1 variants:
   04 platform v01 "Paper sidebar", 05 widget v1 "Corner card", 05b driving v1 "Soft glow outline",
   06 popup v1 "Paint header", 07 email v1 "Paint header".
   Font files: assets/fonts/ (same files as the live site). Paths below are relative to spec/. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/InterVariable-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/IBMPlexMono-normal-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/IBMPlexMono-normal-500.woff2") format("woff2"); }

:root {
  /* ---------- fonts (live) ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* all UI text; wordmark */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;              /* ONLY small uppercase labels, numbers, timestamps, code */
  --font-features: "cv11", "ss01";                                                       /* live body font-feature-settings */

  /* ---------- paper + ink (live) ---------- */
  --bg: #f7f5f1;        /* page: site, app main area, popup body, email body, login page. Never pure white as a page */
  --panel: #f3eee6;     /* darker paper: app sidebar (04), widget user bubble (05), site panels */
  --card: #fffefb;      /* raised surface on paper: app cards, KPI strip, site switcher, active nav item, outline buttons (04) */
  --white: #fff;        /* widget panel only: it sits on the customer's app, not on our paper (05) */
  --ink: #0f0f0f;       /* text, secondary (black) buttons, wordmark, counters, launcher */
  --ink-hover: #2b2824; /* hover on black buttons (live .btn-dark:hover) */
  --ink-2: #3b3833;     /* nav item text, widget step text, list text in email */
  --muted: #6c665d;     /* secondary text: KPI labels, notes, footers */
  --faint: #9c958a;     /* timestamps, placeholders, close ×, "Refused" dot, mono labels in email */
  --line: #ebe4d9;      /* hairlines: card borders, row dividers, meter track */
  --line-2: #ddd4c6;    /* stronger lines: input + outline-button borders, active nav ring, approval card border */

  /* ---------- the one accent (live) ----------
     Water-lily blue. A FILL with --ink text on top. Never text or icons on paper (1.5:1 contrast). */
  --accent: #a9d3e6;        /* primary button fill, credits meter fill, launcher underline, driving glow, ::selection */
  --accent-hover: #a1c8da;  /* primary hover = live filter: brightness(.95) applied to --accent */
  --accent-edge: #93c3d8;   /* 1px border on the accent button inside the widget (05 v1 .y) */
  --accent-soft: #e4f1f7;   /* "Answered" chip background (04) */
  --accent-ink: #2f5f75;    /* the readable blue: "Answered" chip text, "False claims caught" dot (04) */
  --accent-deep: #4f7186;   /* pond blue: driving ring stroke, paint-lilies fallback color (05b) */
  --accent-deeper: #1f3a48; /* driving ring stroke while clicking; "done" hint text (05b) */

  /* ---------- status ---------- */
  --ok: #1d7a4f;        /* live. Done chip text, check icons, Done numbers, live dot */
  --ok-soft: #e5f1e4;   /* live. Done chip bg, "Checked on the page" note bg */
  --ok-ink: #16402e;    /* text inside the ok-soft note (05 v1 .ok) */
  --danger: #a33a22;    /* Failed chip text + dot, failed bar segment, login error text + field border (04 --bad) */
  --danger-soft: #f7e6df; /* Failed chip bg (04 --bad-soft) */
  --warn: #8a5a12;      /* "Handed off" chip, "flagged wrong" dot (04 --wait) */
  --warn-soft: #f5ead6; /* "Handed off" chip bg (04 --wait-soft) */

  /* ---------- paint (Monet) ---------- */
  --paint-lilies: url("assets/paint/paint-lilies.webp"); /* the only paint in app, widget, popup, email, login */
  --paint-lilies-base: #4f7186;                           /* solid color while the paint loads / Outlook fallback */
  --paint-dawn: url("assets/paint/paint-dawn.webp");      /* marketing site CTA only (live). Not in the product */
  --paint-dawn-base: #a98cb4;
  --scrim: linear-gradient(180deg, rgba(16, 24, 44, .08) 20%, rgba(16, 24, 44, .6)); /* under white type on paint (06, 07) */

  /* ---------- radii (measured) ---------- */
  --r-xs: 4px;     /* kbd keys, inline code */
  --r-sm: 6px;     /* small buttons (24px), email button, avatar squares */
  --r-md: 8px;     /* buttons, nav items, inputs in app, site switcher, popup button, widget buttons (04 used 7, normalized) */
  --r-lg: 10px;    /* app cards, KPI strip, widget input, checked note, driving ring */
  --r-xl: 12px;    /* widget approval card, chat bubbles (12 12 4 12) */
  --r-2xl: 16px;   /* widget panel */
  --r-3xl: 24px;   /* painted panels on the site, login paint panel */
  --r-pill: 999px; /* chips, counters, launcher, pills */

  /* ---------- spacing: 4px grid (live comment: 4 8 12 16 24 32 48 64 96 128; 04 adds 20) ---------- */
  --s-1: 4px;
  --s-2: 8px;    /* gap between buttons */
  --s-3: 12px;   /* sidebar padding x, widget step gap */
  --s-4: 16px;   /* card padding x, widget padding x */
  --s-5: 20px;   /* sidebar padding y, gap between app cards, page header margin */
  --s-6: 24px;   /* app main padding y */
  --s-8: 32px;   /* app main padding x */
  --s-10: 40px;  /* email side padding */
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- shadows (measured) ---------- */
  --shadow-card: none;  /* app cards are flat: 1px --line border, no shadow (04 v01) */
  --shadow-ring: 0 0 0 1px var(--line-2); /* active nav item (04), open-state launcher (05) */
  --shadow-popover: 0 0 0 1px rgba(20, 20, 20, .09), 0 2px 4px rgba(20, 20, 20, .05), 0 18px 44px rgba(20, 20, 20, .16); /* menus, extension popup frame, toast (06) */
  --shadow-widget: 0 18px 50px -12px rgba(20, 20, 20, .28), 0 0 0 1px rgba(20, 20, 20, .07); /* widget panel (05 v1) */
  --shadow-launcher: 0 8px 22px -6px rgba(0, 0, 0, .45);    /* closed round launcher (05 v1) */
  --shadow-on-paint: 0 24px 60px -28px rgba(28, 26, 58, .4); /* paper card sitting on paint (live .cta card, login) */
  --shadow-hint: 0 2px 10px rgba(0, 0, 0, .14);              /* driving hint tag (05b) */

  /* ---------- driving glow (05b v1 "Soft glow outline") ---------- */
  --glow-rest: 0 0 0 5px rgba(169, 211, 230, .55), 0 0 22px 6px rgba(169, 211, 230, .75); /* ring at rest, 2px --accent-deep border, 4px outside the target */
  --glow-peak: 0 0 0 9px rgba(169, 211, 230, .3), 0 0 30px 8px rgba(169, 211, 230, .55);  /* ring at mid-breath (50% keyframe) */
  --glow-press: 0 0 0 3px rgba(169, 211, 230, .9);                                         /* while Skate clicks; border --accent-deeper */
  --glow-done: 0 0 0 4px rgba(169, 211, 230, .5);                                          /* changed element after the check; fill rgba(169,211,230,.12) */

  /* ---------- type scale: font shorthand + tracking ---------- */
  --t-display: 500 92px/.98 var(--font-sans);  --t-display-track: -.045em; /* site hero only (live .h1) */
  --t-h1: 600 22px/1.1 var(--font-sans);       --t-h1-track: -.025em;      /* app page title "Overview" (04) */
  --t-h2: 600 15px/1.25 var(--font-sans);      --t-h2-track: -.01em;       /* popup site name, email section title (06, 07) */
  --t-h3: 600 14px/1.2 var(--font-sans);       --t-h3-track: 0;            /* app card title "Recent conversations" (04) */
  --t-num: 600 30px/1 var(--font-sans);        --t-num-track: -.04em;      /* KPI and email big numbers, tabular-nums (04, 07) */
  --t-body: 400 13px/1.45 var(--font-sans);    --t-body-track: -.003em;    /* app, widget, popup body (04, 05, 06) */
  --t-small: 400 12px/1.4 var(--font-sans);    --t-small-track: 0;         /* KPI labels, notes, footers (04, 06) */
  --t-mono-label: 500 11px/1.2 var(--font-mono); --t-mono-label-track: .08em; /* UPPERCASE labels: "WEEKLY REPORT", table heads, "TRIAL" */
  --t-mono: 400 11px/1.2 var(--font-mono);     --t-mono-track: 0;          /* numbers, timestamps, hosts, chips (04) */
  --t-wordmark: 600 20px/1 var(--font-sans);   --t-wordmark-track: -.055em; /* "skate", always lowercase. 24px site nav, 20 app, 16 widget */

  /* ---------- focus (live) ---------- */
  --focus-ring: 2px solid var(--ink);
  --focus-offset: 2px;  /* 3px on the marketing site, 2px in product UI (04) */

  /* ---------- motion ---------- */
  --dur-fast: 150ms;     /* button hover (live .btn transition) */
  --dur-base: 200ms;     /* borders, nav, panel open (live .nav, .mobile-menu .18s) */
  --dur-breath: 2400ms;  /* driving glow ring, one full breath (05b v1) */
  --ease: ease;          /* default for transitions (live) */
  --ease-breath: ease-in-out; /* driving glow ring (05b v1) */

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}