/* WhipScribe design tokens — the one place a colour, size, radius, shadow or
   breakpoint is decided. Every value is namespaced --ws-* so linking this file
   changes nothing on a page that has not opted in; pages adopt by renaming
   their own :root variables to these (see design/README.md).

   Source of the values (2026-09-29):
   - graph decision:the-brand-cta-is-the-lime-pill-and-deep-green-is-a-text-accent
   - the rendered product: the most-used colours, sizes and radii across
     index/view/pricing/library/credits/app (see README for the counts)
   - the operator's two reference designs in design/references/

   Rules (enforced by scripts/design-lint.mjs):
   - customer-facing CSS uses these tokens; a raw hex colour or px radius that
     is not defined here is a lint failure
   - exactly three breakpoints exist; they are constants below because CSS
     cannot read custom properties inside @media — JS may read them via
     getComputedStyle(document.documentElement).getPropertyValue('--ws-bp-phone') */

:root {
  /* ---------- colour: ink (slate) ---------- */
  --ws-ink-900: #0f172a;   /* headings, CTA text on lime */
  --ws-ink-800: #1e293b;
  --ws-ink-700: #334155;   /* body prose */
  --ws-ink-500: #64748b;   /* secondary text, captions */
  --ws-ink-400: #94a3b8;   /* placeholders, faint labels */
  --ws-ink-300: #cbd5e1;   /* strong rules, disabled fills */
  --ws-ink-200: #e2e8f0;   /* default rule / border */
  --ws-ink-100: #f1f5f9;   /* subtle fill */
  --ws-ink-50:  #f8fafc;   /* page wash */
  --ws-white:   #ffffff;

  /* ---------- colour: brand ---------- */
  --ws-brand:        #c5f44f;   /* THE CTA fill. Always with --ws-ink-900 text. Never a text colour. */
  --ws-brand-2:      #a3dc2d;   /* logo mark, gradient mid stop */
  --ws-green-700:    #6da00f;   /* icon / accent stroke, focus ring */
  --ws-green-800:    #4d7508;   /* hover on green strokes */
  --ws-green-text:   #14532d;   /* deep green: headline accent + small emphasis. Never a button. */
  --ws-lime-100:     #ecfccb;   /* hover / selected wash */
  --ws-lime-50:      #f7fee7;   /* subtle brand wash */
  --ws-panel:        #f4f9ef;   /* brand-tinted panel */
  --ws-ground:       #f6f8f4;   /* brand-tinted page ground (marketing) */

  /* ---------- colour: semantic (separate from brand) ---------- */
  --ws-ok:        #15803d;
  --ws-ok-bg:     #dcfce7;
  --ws-warn:      #b45309;
  --ws-warn-bg:   #fef3c7;
  --ws-danger:    #b91c1c;
  --ws-danger-bg: #fef2f2;

  /* ---------- roles (use these in components, not the raw ramps) ---------- */
  --ws-bg:        var(--ws-white);
  --ws-surface:   var(--ws-white);
  --ws-surface-2: var(--ws-ink-50);
  --ws-text:      var(--ws-ink-900);
  --ws-text-2:    var(--ws-ink-700);
  --ws-muted:     var(--ws-ink-500);
  --ws-line:      var(--ws-ink-200);
  --ws-line-soft: rgba(15, 23, 42, 0.06);
  --ws-focus:     var(--ws-green-700);
  --ws-selection: var(--ws-lime-100);

  /* ---------- type ---------- */
  --ws-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  --ws-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ws-hand: "Caveat", "Kalam", cursive;   /* marketing annotations only; never in the app */

  --ws-fs-11: 11px;   /* eyebrows, keyboard hints */
  --ws-fs-12: 12px;   /* captions, meta */
  --ws-fs-13: 13px;   /* dense UI: rails, tables, chips */
  --ws-fs-14: 14px;   /* default control + body in the app */
  --ws-fs-15: 15px;   /* transcript reading text */
  --ws-fs-16: 16px;   /* body prose on marketing; every input on a phone (stops iOS zoom) */
  --ws-fs-18: 18px;   /* h4 / card titles */
  --ws-fs-20: 20px;   /* h3 */
  --ws-fs-24: 24px;   /* h2 in app */
  --ws-fs-30: 30px;   /* h2 marketing */
  --ws-fs-38: 38px;   /* h1 in app */
  --ws-fs-display: clamp(2.5rem, 5.4vw, 4rem);   /* marketing hero only */

  --ws-lh-tight:   1.15;  /* headings */
  --ws-lh-ui:      1.4;   /* controls, rails */
  --ws-lh-body:    1.55;  /* prose */
  --ws-lh-reading: 1.7;   /* transcript lines */

  --ws-fw-regular: 400;
  --ws-fw-medium:  500;
  --ws-fw-semibold:600;
  --ws-fw-bold:    700;

  --ws-tracking-heading: -0.014em;
  --ws-tracking-eyebrow:  0.08em;

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

  /* ---------- radius: exactly four ---------- */
  --ws-r-sm:   6px;    /* inputs, chips, small buttons, code */
  --ws-r-md:   10px;   /* cards in the app, menus, toasts */
  --ws-r-lg:   16px;   /* marketing cards, sheets, dialogs */
  --ws-r-pill: 999px;  /* the CTA and every pill */

  /* ---------- elevation ---------- */
  --ws-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ws-shadow-2: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 20px -10px rgba(30, 41, 59, 0.25);
  --ws-shadow-3: 0 24px 80px rgba(15, 23, 42, 0.18);   /* sheets and dialogs only */

  /* ---------- motion ---------- */
  --ws-dur: 180ms;
  --ws-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---------- layout ---------- */
  --ws-content: 960px;   /* marketing measure */
  --ws-reading: 68ch;    /* transcript / prose measure */
  --ws-rail: 230px;      /* recent-transcripts rail (09-11 redesign) */
  --ws-topbar: 56px;     /* app top bar (09-22 focus shell) */
  --ws-tap: 44px;        /* minimum tap target on a coarse pointer */
  --ws-control: 36px;    /* default control height on a fine pointer */

  /* ---------- breakpoints (constants; see header) ----------
     phone   : (max-width: 600px), (pointer: coarse) and (max-height: 520px)
     tablet  : (min-width: 601px) and (max-width: 1023px)
     desktop : (min-width: 1024px)
     Why these three: 600 is the phone type baseline shipped 2026-09-24 and the
     compact-mode edge on /view; 1024 is where the rail and the focus shell
     appear; the coarse-pointer clause is the sideways phone that got the
     tablet layout on 2026-09-26. There is no fourth breakpoint. */
  --ws-bp-phone: 600px;
  --ws-bp-desktop: 1024px;
}

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