/* ==========================================================================
   Plumb design tokens. Form archetype: Instrument. Brand hue 358 (marking pink).
   Re-skin by changing the hue in --primary* and the neutral tint.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Neutrals: near-chroma-0, tinted a hair toward hue 358 ---- */
  --bg:            oklch(1 0 0);                 /* instrument face */
  --ground:        oklch(0.962 0.004 358);       /* the toned page the faces sit on */
  --surface:       oklch(0.978 0.003 358);
  --surface-2:     oklch(0.948 0.005 358);
  --surface-3:     oklch(0.915 0.007 358);
  --ink:           oklch(0.215 0.008 358);       /* graphite */
  --ink-2:         oklch(0.34 0.008 358);
  --muted:         oklch(0.47 0.008 358);
  --muted-2:       oklch(0.56 0.008 358);
  --line:          oklch(0.905 0.006 358);
  --line-strong:   oklch(0.80 0.008 358);

  /* ---- Brand: fluoro marking pink ---- */
  --primary:        oklch(0.585 0.225 358);
  --primary-strong: oklch(0.50 0.20 358);
  --primary-soft:   oklch(0.960 0.025 358);
  --primary-soft-2: oklch(0.905 0.06 358);
  --on-primary:     oklch(1 0 0);
  --laser:          oklch(0.66 0.26 358);        /* motion only: sweep line, reticle */

  /* Accent is graphite: the second voice is ink, not another hue. */
  --accent:        oklch(0.26 0.008 358);
  --accent-strong: oklch(0.18 0.008 358);
  --accent-soft:   oklch(0.94 0.004 358);
  --on-accent:     oklch(0.99 0 0);

  --drench:          oklch(0.19 0.01 358);
  --drench-2:        oklch(0.25 0.012 358);
  --on-drench:       oklch(0.97 0.004 358);
  --on-drench-muted: oklch(0.78 0.008 358);
  --drench-line:     oklch(0.34 0.012 358);

  /* ---- Semantic: states only. Danger pulled to vermilion (35) away from brand 358 ---- */
  --success: oklch(0.58 0.13 155); --success-soft: oklch(0.955 0.035 155); --success-ink: oklch(0.38 0.10 155);
  --warning: oklch(0.76 0.15 78);  --warning-soft: oklch(0.965 0.05 85);   --warning-ink: oklch(0.44 0.10 70);
  --danger:  oklch(0.56 0.19 35);  --danger-soft:  oklch(0.955 0.035 35);  --danger-ink:  oklch(0.44 0.16 35);
  --info:    oklch(0.55 0.11 245); --info-soft:    oklch(0.955 0.025 245); --info-ink:    oklch(0.40 0.10 245);

  /* Charts: graphite-to-pink ramp, not semantic colours. */
  --c-1: oklch(0.88 0.05 358); --c-2: oklch(0.74 0.14 358);
  --c-3: oklch(0.585 0.225 358); --c-4: oklch(0.40 0.06 358); --c-5: oklch(0.24 0.01 358);

  /* ---- Type ---- */
  --font-display: "Anybody", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Anybody", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-arabic:  "Noto Kufi Arabic", "Geeza Pro", Tahoma, sans-serif;
  --wdth-display: 125; --wdth-body: 100; --wdth-label: 112;

  --fs-display: clamp(2.5rem, 1.4rem + 4vw, 5.5rem);
  --fs-h1:      clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.6vw, 2.625rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;

  --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.02; --lh-snug: 1.18; --lh-body: 1.55; --lh-relaxed: 1.7;
  --tracking-display: -0.02em; --tracking-ui: 0; --tracking-mono: 0.02em;

  /* ---- Space ---- */
  --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(4rem, 2.8rem + 5vw, 7.5rem);
  --section-tight: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --container: 1200px; --container-wide: 1400px; --container-narrow: 760px; --measure: 68ch;

  /* ==== FORM: Instrument ==== */
  /* 1. Shape */
  --r-ctl: 4px; --r-card: 6px; --r-lg: 10px; --r-full: 999px;
  /* 2. Border weight */
  --bw: 1px; --bw-strong: 1.5px;
  --rule: var(--bw) solid var(--line);
  --rule-strong: var(--bw-strong) solid var(--line-strong);
  /* 3. Elevation: tone. White faces on a toned ground; shadow only when floating. */
  --elev-card: none;
  --elev-pop:  0 10px 28px -10px oklch(0.2 0.01 358 / 0.22), 0 0 0 1px oklch(0.2 0.01 358 / 0.06);
  --elev-modal: 0 30px 70px -24px oklch(0.2 0.01 358 / 0.35);
  /* 4. Density: tight desk, glove-sized phone */
  --h-ctl: 36px; --h-ctl-sm: 30px; --h-row: 36px; --h-touch: 52px;
  --pad-card: var(--s-4); --gap-grid: var(--s-4);
  /* 5. Divider: hairline rows, no cell rules */
  --cell-rule: none;
  --row-rule: var(--rule);
  /* 6. Headings */
  --wt-head: 600; --wt-body: 400;
  --tracking-heading: -0.01em;
  --case-head: none;

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

  /* ---- Motion ---- */
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 380ms; --dur-4: 900ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out: the house curve */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* ---- Chrome ---- */
  --pocbar-h: 44px; --rail-w: 64px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

@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;
  }
}