/* Skopely design tokens — keep in sync with worker/report_render.py brand block */
:root {
  /* Surfaces (60/30) — warm paper family, hex fallback then OKLCH */
  --paper: #fbfaf6;          --paper: oklch(98.3% 0.004 95);
  --paper-deep: #f3f1e9;     --paper-deep: oklch(95.5% 0.008 95);
  --card: #ffffff;           --card: oklch(99.5% 0.002 95);
  --line: #e8e6df;           --line: oklch(91.5% 0.006 95);
  --line-strong: #d6d3c8;    --line-strong: oklch(85.5% 0.01 95);

  /* Ink family */
  --ink: #10222e;            --ink: oklch(22.5% 0.03 240);
  --ink-soft: #3c4c58;       --ink-soft: oklch(38% 0.025 240);
  --muted: #5d6b76;          --muted: oklch(50% 0.02 240);
  --faint: #6b7480;          --faint: oklch(53.5% 0.015 245);
  --line-ui: #828c9c;        --line-ui: oklch(63.5% 0.018 245);  /* form/UI borders — ≥3:1 */

  /* Accent (10%) — bright is decorative/large-surface only; deep passes AA as text on paper */
  --accent: #12b886;         --accent: oklch(69% 0.145 168);
  --accent-deep: #0e7a5f;    --accent-deep: oklch(50% 0.105 168);
  --accent-wash: #e3f4ec;    --accent-wash: oklch(94.5% 0.03 168);

  /* Signal colors (report grades) */
  --good: #1d9a6c; --warn: #d99a2b; --bad: #c43d3d;

  /* Type — Georgia display (zero payload, document authority) + system sans */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Fluid scale, ratio 1.25 @1240px */
  --text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.33vw, 1.3125rem);
  --text-xl: clamp(1.3125rem, 1.2rem + 0.55vw, 1.71rem);
  --text-2xl: clamp(1.625rem, 1.44rem + 0.9vw, 2.3rem);
  --text-3xl: clamp(2.1rem, 1.78rem + 1.6vw, 3.3rem);

  /* Spacing — 8pt scale */
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --s-32: 8rem;

  /* Radii encode hierarchy */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Layered, ink-tinted shadows (one light source, top) */
  --shadow-card:
    0 1px 1px rgba(16, 34, 46, 0.04),
    0 2px 4px rgba(16, 34, 46, 0.04),
    0 6px 12px rgba(16, 34, 46, 0.05);
  --shadow-float:
    0 1px 2px rgba(16, 34, 46, 0.06),
    0 4px 8px rgba(16, 34, 46, 0.06),
    0 12px 24px rgba(16, 34, 46, 0.07),
    0 24px 48px rgba(16, 34, 46, 0.06);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --container: 1200px;
}
