/* ==========================================================================
   Rootwork design tokens. Brand hue H = 355 (beetroot). Signal hue A = 125
   (chlorophyll). Change those two numbers and the product re-skins.
   Form archetype: "Organic Instrument" — see docs/DESIGN.md.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Neutrals, tinted toward beetroot ---- */
  --bg:            oklch(0.982 0.007 355);   /* the toned ground */
  --surface:       oklch(1 0 0);              /* faces sit white on the ground */
  --surface-2:     oklch(0.958 0.013 355);
  --surface-3:     oklch(0.93 0.02 355);
  --ink:           oklch(0.24 0.045 355);
  --ink-2:         oklch(0.34 0.045 355);
  --muted:         oklch(0.47 0.04 355);
  --muted-2:       oklch(0.6 0.03 355);      /* decorative only, never text */
  --line:          oklch(0.9 0.018 355);
  --line-strong:   oklch(0.82 0.03 355);

  /* ---- Brand ---- */
  --primary:       oklch(0.42 0.15 355);
  --primary-strong:oklch(0.34 0.13 355);
  --primary-soft:  oklch(0.95 0.028 355);
  --primary-soft-2:oklch(0.9 0.055 355);
  --on-primary:    oklch(0.99 0.004 355);

  --accent:        oklch(0.89 0.19 125);     /* chlorophyll: live matches only */
  --accent-strong: oklch(0.8 0.2 128);
  --accent-soft:   oklch(0.96 0.07 125);
  --on-accent:     oklch(0.26 0.09 355);

  /* The root: the connective line of the whole identity. */
  --root:          oklch(0.62 0.09 355);
  --root-soft:     oklch(0.8 0.05 355);

  /* One dark band per page, maximum. */
  --drench:        oklch(0.26 0.09 355);
  --drench-2:      oklch(0.32 0.1 355);
  --on-drench:     oklch(0.97 0.01 355);
  --on-drench-muted: oklch(0.82 0.04 355);
  --drench-line:   oklch(0.4 0.09 355);

  /* ---- Semantic: STATES ONLY ---- */
  --success: oklch(0.55 0.11 170); --success-soft: oklch(0.95 0.035 170); --success-ink: oklch(0.38 0.08 170);
  --warning: oklch(0.76 0.15 70);  --warning-soft: oklch(0.96 0.05 75);  --warning-ink: oklch(0.44 0.1 60);
  --danger:  oklch(0.55 0.19 28);  --danger-soft:  oklch(0.955 0.03 28); --danger-ink:  oklch(0.44 0.16 28);
  --info:    oklch(0.54 0.12 245); --info-soft:    oklch(0.955 0.025 245); --info-ink:  oklch(0.4 0.11 245);

  /* Charts: a beetroot ramp; lime marks the one series that matters. */
  --c-1: oklch(0.9 0.05 355); --c-2: oklch(0.76 0.1 355);
  --c-3: oklch(0.58 0.14 355); --c-4: oklch(0.42 0.15 355); --c-5: oklch(0.28 0.1 355);
  --c-hi: oklch(0.8 0.2 128);

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
  --fs-h2:      clamp(1.875rem, 1.3rem + 1.8vw, 3rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --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.2; --lh-body: 1.55; --lh-relaxed: 1.7;
  --tracking-display: -0.035em; --tracking-ui: 0;

  /* ---- Space: 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, 4vw, 2.5rem);
  --container: 1200px; --container-wide: 1400px; --container-narrow: 760px; --measure: 65ch;

  /* ==========================================================================
     FORM LAYER — Organic Instrument
     ========================================================================== */
  /* 1. Shape: soft-cornered faces, pill actions. */
  --r-ctl: 8px; --r-card: 12px; --r-lg: 20px; --r-full: 999px;

  /* 2. Border: one hairline tinted to beet; controls 1.5px. */
  --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.26 0.09 355 / 0.28);
  --elev-modal: 0 32px 64px -20px oklch(0.26 0.09 355 / 0.38);

  /* 4. Density: one-handed, in the garden. Admin overrides below. */
  --h-ctl: 48px; --h-ctl-sm: 36px; --h-row: 56px;
  --pad-card: var(--s-4); --gap-grid: var(--s-4);

  /* 5. Dividers: hairline between rows; roots connect related things. */
  --cell-rule: none;
  --row-rule: var(--rule);

  /* 6. Headings: display face, bold, tight, sentence case. */
  --wt-head: 700; --wt-body: 400;
  --tracking-heading: -0.025em;
  --case-head: none;

  --e-1: 0 1px 2px oklch(0.26 0.09 355 / 0.06);
  --e-2: 0 4px 12px -4px oklch(0.26 0.09 355 / 0.14);
  --e-3: 0 14px 36px -12px oklch(0.26 0.09 355 / 0.3);

  /* ---- Motion: roots grow, nothing bounces ---- */
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms; --dur-grow: 1400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --pocbar-h: 44px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

/* Admin is a desk, not a garden bed: denser, same system. */
[data-role="admin"] {
  --h-ctl: 38px; --h-ctl-sm: 30px; --h-row: 44px; --pad-card: var(--s-5);
}

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