/* Purelex design tokens, round-trips into apps/www.
   Light is canonical. Dark follows prefers-color-scheme, overridable via [data-theme].
   Every value here is referenced by name in the comps; nothing is hard-coded downstream. */

:root {
  /* ---- surface + text ---- */
  --paper: #f7f8fa;
  --panel: #ffffff;
  --ink: #16181d;
  --muted: #5e6572;
  --line: #e2e5ea;

  /* ---- brand: actions only, never quality ---- */
  --accent: #2f4bb0;
  --accent-ink: #ffffff;
  --accent-bg: #e7eaf8;

  /* ---- quality state: the only semantic color ---- */
  --pass: #1c6b45;   /* qa >= 0.90 */
  --warn: #84610f;   /* qa 0.75 - 0.89 */
  --flag: #a52c22;   /* qa <  0.75 */
  --pass-bg: #e6f0ea;
  --warn-bg: #f6efdc;
  --flag-bg: #f9e9e6;

  /* ---- terminal surface: dark in both themes, CLI is CLI ---- */
  --term-bg: #0d0f13;
  --term-ink: #dee2ea;
  --term-muted: #79808f;
  --term-accent: #8aa4f2;
  --term-pass: #6ecb92;
  --term-warn: #dcae55;
  --term-flag: #f08b81;

  /* ---- type: system stacks only, zero font bytes shipped ----
     serif  = human language: headlines, prose, the words a person wrote
     sans   = interface furniture: buttons, nav, labels on controls
     mono   = everything the machine said: scores, tiers, keys, paths, costs */
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;    /* eyebrow labels, mono only */
  --text-sm: 13px;    /* secondary prose */
  --text-data: 12.5px;/* machine facts, chips, tables */
  --text-base: 15px;  /* data views */
  --text-body: 16.5px;/* marketing + review prose */
  --text-lg: 20px;
  --text-xl: 30px;
  --leading-tight: 1.25;
  --leading-body: 1.55;
  --tracking-tight: -0.025em;

  /* ---- 8px spacing grid ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  /* ---- radii ---- */
  --radius-chip: 4px;
  --radius-field: 6px;
  --radius-button: 7px;
  --radius-card: 10px;
  --radius-phone: 14px;

  /* ---- elevation: borders do the work; shadow only for overlays ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  --elev-2: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);

  /* ---- focus + motion ---- */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
  --motion-state: 180ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.3, 1);

  /* ---- hit targets: review pages are used on phones ---- */
  --tap-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1116;
    --panel: #171a21;
    --ink: #e6e8ee;
    --muted: #8d95a3;
    --line: #262b34;
    --accent: #8aa4f2;
    --accent-ink: #0c1120;
    --accent-bg: #1a2140;
    --pass: #5cbe84;
    --warn: #d9ae57;
    --flag: #ef8b84;
    --pass-bg: #12251b;
    --warn-bg: #282213;
    --flag-bg: #2b1917;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --elev-2: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

[data-theme="light"] {
  --paper: #f7f8fa; --panel: #ffffff; --ink: #16181d; --muted: #5e6572; --line: #e2e5ea;
  --accent: #2f4bb0; --accent-ink: #ffffff; --accent-bg: #e7eaf8;
  --pass: #1c6b45; --warn: #84610f; --flag: #a52c22;
  --pass-bg: #e6f0ea; --warn-bg: #f6efdc; --flag-bg: #f9e9e6;
}

[data-theme="dark"] {
  --paper: #0f1116; --panel: #171a21; --ink: #e6e8ee; --muted: #8d95a3; --line: #262b34;
  --accent: #8aa4f2; --accent-ink: #0c1120; --accent-bg: #1a2140;
  --pass: #5cbe84; --warn: #d9ae57; --flag: #ef8b84;
  --pass-bg: #12251b; --warn-bg: #282213; --flag-bg: #2b1917;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }
button, textarea, input, select { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@keyframes rowleave {
  to { opacity: 0; transform: translateX(24px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@keyframes caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}