/* ==========================================================================
   Regolo design tokens · world: Redline (the checker's drawing set).
   Drafting film, graphite linework, redline for findings, non-photo blue for
   construction lines, highlighter for what is verified. Hue 30 drives the file.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Neutrals: film and sheet, tinted toward the redline hue ---- */
  --bg:            oklch(0.983 0.002 250);  /* drafting film, the page ground */
  --surface:       oklch(1 0 0);            /* the sheet */
  --surface-2:     oklch(0.962 0.004 30);
  --surface-3:     oklch(0.935 0.006 30);
  --ink:           oklch(0.235 0.008 30);   /* graphite */
  --ink-2:         oklch(0.34 0.008 30);
  --muted:         oklch(0.47 0.01 30);
  --muted-2:       oklch(0.62 0.01 30);     /* non-text only */
  --line:          oklch(0.87 0.006 30);    /* row rules */
  --line-strong:   oklch(0.235 0.008 30);   /* sheet frames are drawn in graphite */

  /* ---- Primary action is graphite ink; red is never an action colour ---- */
  --primary:        oklch(0.235 0.008 30);
  --primary-strong: oklch(0.15 0.006 30);
  --primary-soft:   oklch(0.95 0.004 30);
  --primary-soft-2: oklch(0.90 0.006 30);
  --on-primary:     oklch(0.99 0 0);

  /* ---- Redline: findings, the active mark, the brand accent ---- */
  --accent:        oklch(0.565 0.19 32);
  --accent-strong: oklch(0.50 0.18 32);
  --accent-soft:   oklch(0.965 0.025 32);
  --on-accent:     oklch(0.99 0 0);

  /* ---- World colours ---- */
  --npb:       oklch(0.77 0.075 235);   /* non-photo blue: construction lines, guides */
  --npb-ink:   oklch(0.47 0.10 240);    /* the same blue, legible as text */
  --npb-soft:  oklch(0.955 0.022 235);
  --hl:        oklch(0.935 0.15 104);   /* highlighter: verified */
  --hl-edge:   oklch(0.86 0.17 102);

  /* One dark band per page: the graphite drench. */
  --drench:          oklch(0.235 0.008 30);
  --drench-2:        oklch(0.30 0.008 30);
  --on-drench:       oklch(0.97 0.003 30);
  --on-drench-muted: oklch(0.80 0.006 30);
  --drench-line:     oklch(0.40 0.008 30);

  /* ---- Semantic: states only. Pass = highlighter, error = redline ---- */
  --success: oklch(0.50 0.12 148); --success-soft: oklch(0.935 0.15 104); --success-ink: oklch(0.235 0.008 30);
  --warning: oklch(0.70 0.145 68); --warning-soft: oklch(0.965 0.04 75);  --warning-ink: oklch(0.46 0.11 62);
  --danger:  oklch(0.565 0.19 32); --danger-soft:  oklch(0.965 0.025 32); --danger-ink:  oklch(0.48 0.17 32);
  --info:    oklch(0.47 0.10 240); --info-soft:    oklch(0.955 0.022 235); --info-ink:   oklch(0.42 0.10 240);

  /* Charts: graphite to non-photo blue. Red stays reserved for findings. */
  --c-1: oklch(0.90 0.035 235); --c-2: oklch(0.77 0.075 235);
  --c-3: oklch(0.58 0.08 238);  --c-4: oklch(0.42 0.04 240);  --c-5: oklch(0.27 0.01 30);

  /* ---- Typography ---- */
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Marketing scale, fluid */
  --fs-display: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + 0.7vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;

  /* Product scale, fixed */
  --t-40: 2.5rem; --t-32: 2rem; --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem;
  --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem;

  --lh-tight: 1.04; --lh-snug: 1.2; --lh-body: 1.55; --lh-relaxed: 1.7;
  --tracking-display: -0.01em; --tracking-ui: 0; --tracking-label: 0.08em;

  /* ---- Spacing: 4px base ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 5rem;   --s-10: 6rem; --s-12: 8rem;
  --section:       clamp(4.5rem, 3rem + 5vw, 8rem);
  --section-tight: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter:        clamp(1rem, 3vw, 2rem);
  --container: 1240px; --container-wide: 1440px; --container-narrow: 760px; --measure: 68ch;

  /* ==========================================================================
     FORM LAYER · archetype: Ledger (the drawing sheet).
     Square sheets, 2px controls, one graphite hairline, no shadows on the
     page, ruled tables, tight rows. Floating layers are tracing paper.
     ========================================================================== */

  /* 1. Shape */
  --r-ctl: 2px; --r-card: 0px; --r-lg: 0px; --r-full: 999px;

  /* 2. Border weight: one hairline, everywhere */
  --bw: 1px; --bw-strong: 1px;
  --rule: var(--bw) solid var(--line);
  --rule-strong: var(--bw-strong) solid var(--line-strong);

  /* 3. Elevation: hairline. Only floating layers lift, like tracing paper. */
  --elev-card: none;
  --elev-pop:  0 12px 32px -14px oklch(0.235 0.008 30 / 0.28);
  --elev-modal: 0 40px 80px -30px oklch(0.235 0.008 30 / 0.40);

  /* 4. Density */
  --h-ctl: 36px; --h-ctl-sm: 28px; --h-row: 36px;
  --pad-card: 1.25rem; --gap-grid: var(--s-4);

  /* 5. Divider strategy: ruled grid */
  --cell-rule: var(--rule);
  --row-rule: var(--rule);

  /* 6. Heading treatment: semi-condensed, bold, sentence case */
  --wt-head: 700; --wt-body: 400;
  --tracking-heading: 0.004em;
  --case-head: none;

  --e-1: none;
  --e-2: var(--elev-pop);
  --e-3: var(--elev-modal);

  /* ---- Motion: the pen plotter. Lines draw on; nothing bounces. ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-draw: 760ms; --dur-scene: 640ms;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Prototype chrome ---- */
  --pocbar-h: 40px; --topbar-h: 56px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

@media (pointer: coarse) {
  :root { --h-ctl: 44px; --h-ctl-sm: 36px; --h-row: 44px; }
}

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