/* ============================================================
   PYROLIS — Design tokens
   Two design languages, one token set:
   - Back-office: dense, fast, keyboard-friendly  (.lang-back)
   - Soft: portal, marketing, emails              (.lang-soft)
   - Tech: touch-first treatment                  (.lang-tech)

   Fonts (IBM Plex Sans/Mono) are SELF-HOSTED — no Google Fonts CDN in prod.
   The @font-face blocks live in ../css/fonts.css (served at /fonts/*), which
   is @import-ed by ../css/pyrolis.css. --font-sans / --font-mono below point
   at those families. See apps/pyrolis_web/priv/static/fonts/FONTS.md.
   ============================================================ */

:root {
  /* ---- Color: warm neutral ramp ---- */
  --paper:      oklch(0.975 0.004 75);   /* app background */
  --surface:    oklch(0.992 0.002 80);   /* cards, panels */
  --surface-2:  oklch(0.958 0.005 75);   /* inset wells, table header */
  --surface-3:  oklch(0.935 0.006 70);   /* hover wells */
  --line:       oklch(0.89 0.008 70);    /* hairline borders */
  --line-strong:oklch(0.80 0.010 65);
  --ink:        oklch(0.235 0.012 55);   /* primary text */
  --ink-2:      oklch(0.42 0.012 55);    /* secondary text */
  --ink-3:      oklch(0.58 0.010 55);    /* tertiary / hints */
  --ink-inv:    oklch(0.97 0.004 75);

  /* ---- Brand: fire, disciplined ---- */
  --fire:       oklch(0.55 0.155 41);    /* primary accent ~#c2410c */
  --fire-deep:  oklch(0.46 0.14 38);
  --fire-soft:  oklch(0.94 0.030 45);    /* tinted wells */
  --fire-line:  oklch(0.84 0.060 45);
  --coal:       oklch(0.245 0.012 45);   /* near-black brand counterpart */

  /* ---- Status hues (same chroma/lightness family) ---- */
  --st-blue:    oklch(0.52 0.11 250);  --st-blue-bg:  oklch(0.945 0.022 250);
  --st-green:   oklch(0.52 0.11 150);  --st-green-bg: oklch(0.945 0.030 150);
  --st-amber:   oklch(0.55 0.11 75);   --st-amber-bg: oklch(0.945 0.035 85);
  --st-red:     oklch(0.52 0.13 25);   --st-red-bg:   oklch(0.945 0.025 25);
  --st-violet:  oklch(0.52 0.11 300);  --st-violet-bg:oklch(0.945 0.025 300);
  --st-teal:    oklch(0.52 0.09 195);  --st-teal-bg:  oklch(0.945 0.025 195);
  --st-gray:    oklch(0.50 0.01 60);   --st-gray-bg:  oklch(0.945 0.005 60);

  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-21: 21px; --fs-26: 26px; --fs-34: 34px;

  /* ---- Spacing / radius / elevation ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-full: 999px;
  --row-h: 40px;            /* back-office table row */
  --touch: 48px;            /* tech minimum hit target */
  --sh-1: 0 1px 2px oklch(0.2 0.01 60 / 0.06);
  --sh-2: 0 2px 8px oklch(0.2 0.01 60 / 0.10);
  --sh-3: 0 8px 28px oklch(0.2 0.01 60 / 0.16);
  --sh-pop: 0 12px 40px oklch(0.2 0.01 60 / 0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.3,.7,.3,1);
  --t-fast: 120ms; --t-med: 200ms; --t-slow: 320ms;
}

/* Soft language overrides: rounder, airier, reassuring */
.lang-soft {
  --r-1: 8px; --r-2: 10px; --r-3: 16px; --r-4: 22px;
  --row-h: 52px;
  --paper: oklch(0.982 0.005 78);
}
/* Tech language: high contrast, big targets, sunlight-readable */
.lang-tech {
  --r-2: 10px; --r-3: 14px;
  --row-h: 56px;
  --ink-2: oklch(0.38 0.012 55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink);
  background: oklch(0.93 0.006 70);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.93em; }
a { color: var(--fire); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--fire-soft); }

/* Scrollbars (subtle) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

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