/*
 * paze design tokens
 * ==================
 * Brand values crawled from the live marketing site (pazepack.com, Webflow,
 * 2026-08-20) mapped onto the TOKEN CONTRACT of lowbrain's "Aether 2" kit, so
 * that kit's components (Card, Row, Chip, Eyebrow, Scorecard, ViewScaffold,
 * Sheet, Segmented, Dock, States) work here unchanged — only the values differ.
 *
 * WHAT CAME FROM WHERE
 *   pazepack.com : typeface, type scale, #111/#fff/#f8f7f6, blue #04aaf1,
 *                  sage #526751, neutral ramp, pill CTAs, sentence case
 *   lowbrain     : the token NAMES, the 4px grid, density, motion contract
 *   invented here: the functional palette (danger/warning/ok). The paze brand
 *                  has none — flagged so nobody mistakes them for brand colour.
 *
 * LIGHT IS DEFAULT. paze is a light brand; the marketing site is white with two
 * full-bleed #111 sections. Dark is supported via [data-theme="dark"] for the
 * internal dashboard, where people sit for hours.
 */

:root {
  /* ── type ───────────────────────────────────────────────────────────────
     One family, as on the marketing site. Mono is an ADDITION for dashboard
     data (times, counts, IDs, money) — marketing has no tabular data. */
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* app scale — compact, from lowbrain's power-user density */
  --text-2xs: 10px;   /* micro labels / eyebrows */
  --text-xs:  11px;   /* meta, chips */
  --text-sm:  13px;   /* data rows */
  --text-md:  14px;   /* body copy in app */
  --text-lg:  18px;   /* card titles */
  --text-xl:  22px;   /* view titles */
  --text-num: 28px;   /* scorecard numerals — always tabular-nums */

  /* marketing scale — from the live site, ratio ~1.2 line-height on headings.
     Fluid so the 94px hero doesn't wreck a phone. */
  --text-hero:    clamp(2.75rem, 1.6rem + 5.6vw, 5.875rem);  /* 44 → 94px */
  --text-display: clamp(2rem,    1.4rem + 3.0vw, 3.281rem);  /* 32 → 52.5px */
  --text-heading: clamp(1.5rem,  1.2rem + 1.5vw, 2.461rem);  /* 24 → 39.4px */
  --text-body-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.289rem); /* 17 → 20.6px */
  --leading-tight: 1.2;   /* headings, measured on the live site */
  --leading-body:  1.4;   /* body, measured on the live site */
  --weight-heading: 600;  /* every h1–h4 on the live site */
  --weight-body:    500;  /* body is 500, not 400 — part of the brand's feel */

  /* ── spacing (4px grid) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --row-h: 36px; --row-h-dense: 32px; --hit-target-min: 44px;

  /* ── shape — from the site's --radius--* tokens ── */
  --radius:      16px;   /* cards/panels  (site: 1rem) */
  --radius-row:  8px;    /* rows, inputs  (site: .5rem) */
  --radius-pill: 999px;  /* CTAs          (site: 360rem) */

  /* ── motion — lowbrain's contract. The MARKETING site additionally uses
     GSAP + Lenis scroll motion; the app deliberately does not. ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 120ms; --dur-med: 200ms; --dur-pop: 220ms;

  /* ── brand core (verbatim from the site) ── */
  --paze-black: #111111;
  --paze-white: #ffffff;
  --paze-grey:  #f8f7f6;   /* warm off-white, the site's soft panel */
  --paze-blue:  #04aaf1;   /* --primary--blue */
  --paze-sage:  #526751;   /* secondary buttons + .is-secondary-green */
  --paze-sage-deep: #3d4d3c;

  /* neutral ramp, verbatim */
  --neutral-100:#e7e7e7; --neutral-200:#cfcfcf; --neutral-300:#b8b8b8;
  --neutral-400:#888888; --neutral-500:#585858; --neutral-600:#373737;
  --neutral-700:#292929; --neutral-800:#202020; --neutral-900:#181818;

  /* ── semantic surface (LIGHT = default) ── */
  --background:      var(--paze-white);
  --surface:         var(--paze-grey);
  --surface-raised:  #ffffff;
  --surface-solid:   #ffffff;
  --foreground:        var(--paze-black);
  --muted-foreground:  var(--neutral-500);
  --faint-foreground:  var(--neutral-400);
  --border:            var(--neutral-100);
  --border-strong:     var(--neutral-200);

  /* ── accent ──
     NOTE ON CONTRAST: white on #04aaf1 is ~2.5:1 and FAILS WCAG AA. Text on the
     blue must be near-black. The site only ever uses the blue as a small accent,
     never as a large text-bearing fill — keep it that way. */
  --accent:            var(--paze-blue);
  --accent-foreground: #04222e;
  --accent-soft:       #e6f6fe;
  /* the brand blue FAILS AA as text on light (2.62:1). This darkened variant is
     the only blue allowed for links/text on --background or --surface.
     5.64:1 on #fff, 5.27:1 on #f8f7f6 — measured. */
  --accent-text:       #036e9d;
  --secondary:            var(--paze-sage);
  --secondary-foreground: #ffffff;      /* 6.14:1 — passes AA (measured) */
  --secondary-soft:       rgba(82, 103, 81, 0.10);  /* the site's .is-secondary-green */

  /* ── functional — NOT brand colours, invented for the dashboard ── */
  --danger:  #c0392b; --danger-foreground:#ffffff; --danger-soft:#fdeceb;
  --warning: #8f5e17; --warning-foreground:#ffffff; --warning-soft:#fdf5e6;
  --ok:      #2f7d4f; --ok-foreground:#ffffff;     --ok-soft:#eaf5ee;

  --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* ── dark — for the internal dashboard. Built from the marketing site's own
   full-bleed #111 sections, so it is still paze, not a generic dark theme. ── */
:root[data-theme="dark"] {
  --background:     var(--paze-black);
  --surface:        var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --surface-solid:  var(--neutral-800);
  --foreground:       var(--paze-grey);
  --muted-foreground: var(--neutral-300);
  --faint-foreground: var(--neutral-400);
  --border:           var(--neutral-700);
  --border-strong:    var(--neutral-600);
  --accent-soft:      rgba(4,170,241,.16);
  --accent-text:      var(--paze-blue);   /* on #111 the brand blue is 7.22:1 — fine as-is */
  --secondary-soft:   rgba(82,103,81,.22);
  --danger:#e57368; --danger-soft:rgba(229,115,104,.16);
  --warning:#e0a33e; --warning-soft:rgba(224,163,62,.16);
  --ok:#5fb37f;     --ok-soft:rgba(95,179,127,.16);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:var(--paze-black); --surface:var(--neutral-900);
    --surface-raised:var(--neutral-800); --surface-solid:var(--neutral-800);
    --foreground:var(--paze-grey); --muted-foreground:var(--neutral-300);
    --faint-foreground:var(--neutral-400);
    --border:var(--neutral-700); --border-strong:var(--neutral-600);
    --accent-soft:rgba(4,170,241,.16); --secondary-soft:rgba(82,103,81,.22);
    --danger:#e57368; --danger-soft:rgba(229,115,104,.16);
    --warning:#e0a33e; --warning-soft:rgba(224,163,62,.16);
    --ok:#5fb37f; --ok-soft:rgba(95,179,127,.16);
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}