/* KURAL · tokens (Lane L0). From Claude Design's handoff (design_handoff_kural/tokens, 16 Sep 2026), which answers the
 * brief (design/claude-design-pack/CLAUDE_DESIGN_PROMPT.md §4). Invent none. test/design-laws.test.mjs holds the values
 * that carry meaning: the teal, the paper, the only red, the type floor, the press. */

/* ── colour ── one hue, teal. Ratios measured on #07090b. */
:root{
  --p-teal-900:#04201b; --p-teal-700:#2f6f66; --p-teal-600:#3f8a7e; --p-teal-500:#4f9e92; --p-teal-400:#52a99b; --p-teal-300:#7fb6ab;
  --p-amber-800:#7d5c17; --p-amber-500:#bf9858; --p-amber-300:#cbb489;   /* amber = worth knowing. NEVER wrong */
  --p-red-800:#b0282e;   --p-red-500:#e05a5e;   --p-red-300:#d99396;     /* red = CONFLICT only (+ the live meter's low stop) */
  --p-carbon-950:#07090b; --p-carbon-900:#0d1114; --p-carbon-800:#141a1e; --p-carbon-700:#1c2429;
  --p-slate-500:#6b727c; --p-slate-400:#929ba2; --p-slate-300:#9aa3ad; --p-mist-100:#eef1f4;

  --ground:#07090b; --surface-1:#0d1114; --surface-2:#141a1e;
  --edge:rgba(255,255,255,.07); --edge-strong:rgba(255,255,255,.16);
  --ink:#eef1f4;   /* 17.0:1 clinical values, names */
  --ink-2:#9aa3ad; /*  7.7:1 labels, secondary prose */
  --ink-3:#929ba2; /*  6.0:1 reason lines. THE AA FLOOR FOR TEXT */
  --ink-4:#6b727c; /*  4.0:1 DECORATIVE ONLY. NEVER TEXT */
  --act:#7fb6ab; --act-2:#4f9e92; --act-deep:#04201b; --act-ink:#06110f;
  --act-wash:rgba(79,158,146,.16); --act-edge:rgba(79,158,146,.42);

  /* the paper: theme-invariant, the summary area and only it */
  --paper:#e8e6e1; --paper-ink:#16181a; --paper-rule:#16181a; --paper-edge:rgba(0,0,0,.35); --paper-shadow:0 18px 40px rgba(0,0,0,.45);

  /* the safety inks: not themeable by anybody, ever */
  --sfx-infer-ink:#cbb489;    --sfx-infer-ink-paper:#7d5c17;
  --sfx-missing-ink:#cbb489;  --sfx-missing-ink-paper:#7d5c17;
  --sfx-std-ink:#9aa3ad;      --sfx-std-ink-paper:#47535a;
  --sfx-conflict-ink:#e05a5e; --sfx-conflict-ink-paper:#b0282e;
  --sfx-thick:1.5px; --sfx-offset:.2rem; --sfx-bar:3px;

  /* texture: the backdrop layer only, never a wrapper that holds a pinned control (Law 10) */
  --texture:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.03),transparent 55%),repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 26px);
  --cast:.82;

  /* press ledges: hard, never blurred */
  --press-rest:0 .375rem 0 rgba(0,0,0,.45); --press-active:0 .125rem 0 rgba(0,0,0,.45); --press-rest-disabled:0 .375rem 0 rgba(0,0,0,.25);
  --press-rest-paper:0 .375rem 0 rgba(18,62,56,.38); --press-active-paper:0 .125rem 0 rgba(18,62,56,.38);
}

/* ── type ── Sora (display, 600/700), Hanken Grotesk (language), IBM Plex Mono (data, labels, counts, every number). */
:root{
  --font-display:'Sora',system-ui,sans-serif;
  --font-ui:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --font-page:'Source Serif 4','Noto Serif Tamil',Georgia,serif;   /* the page: Source Serif 4, Tamil from Noto Serif Tamil */

  /* ramp at 100% / at 130% (root 20.8px, the design target) */
  --t-1:.6875rem;  /* 11 / 14.3  FLOOR. provenance, licence strip, column heads. mono only */
  --t-2:.75rem;    /* 12 / 15.6  reason lines (web), state words, counts */
  --t-3:.8125rem;  /* 13 / 16.9  band headings, reason lines (phone) */
  --t-4:.875rem;   /* 14 / 18.2  dense data, stack rows */
  --t-5:1rem;      /* 16 / 20.8  DEFAULT. body prose, worked-out values, every input */
  --t-6:1.125rem;  /* 18 / 23.4  row labels, heard values, sheet title */
  --t-7:1.3125rem; /* 21 / 27.3  sign bar, primary action */
  --t-8:1.5rem;    /* 24 / 31.2  refusal heading */
  --t-9:1.875rem;  /* 30 / 39    screen title, the cockpit's one number */
  --t-10:clamp(1.875rem,8vw,2.5rem); /* the patient's name, and nothing else */

  --lh-prose:1.5; --lh-row:1.35; --lh-caps:1.2; --lh-mono:1.3; --lh-display:1.2;
  --track-caps:.09em; --track-band:.04em; --track-mono:.02em; --track-display:-.01em;
  --input-size:max(1rem,16px); /* below 16px physical, iOS Safari zooms on focus */
}

/* ── space, radius, targets ── */
:root{
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --gutter:clamp(.875rem,4vw,1.5rem);
  --r-1:.25rem; --r-2:.5rem; --r-3:.875rem; --r-round:50%;
  --tap:max(2.75rem,44px);       /* 57.2px at 130%. the max() is load-bearing */
  --tap-prime:max(3.5rem,56px);
  --tap-gap:.5rem;
  --mic:min(30dvh,60vw);
  --ring:2.25rem;
}

/* ── motion ── one animation (the document arriving), one physical response (the press), two ambient loops (the ring). */
:root{
  --m-instant:60ms; --m-fast:140ms; --m-base:220ms;
  --m-breath:2400ms; --m-arc:1400ms; --m-hold:1200ms; --m-decay:900ms; --m-grace:400ms;
  --m-floor:450ms; --m-rise:260ms; --m-rise-distance:.5rem;
  --e-out:cubic-bezier(.2,.7,.3,1);
  --e-down:cubic-bezier(.2,0,.38,1);     /* press down, 60ms */
  --e-up:cubic-bezier(.22,1.2,.36,1);    /* press up, 110ms: overshoots, a real spring */
  --press-down:60ms; --press-up:110ms;
}
@keyframes k-breath{0%,100%{opacity:.45}50%{opacity:1}}   /* the ring listening: opacity only, never scale */
@keyframes k-arc{to{transform:rotate(360deg)}}            /* the ring working: 90° arc, 360° in 1400ms, linear */

/* ── base ── the ground is dark; the paper inside it is off-white. There is no light theme. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-ui);font-size:var(--t-5);line-height:var(--lh-prose);text-wrap:pretty}
a{color:var(--act);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--p-teal-300);text-decoration-thickness:2px}
button,input,textarea{font:inherit;color:inherit}
input,textarea{font-size:var(--input-size)}
.k-num,[data-num]{font-variant-numeric:tabular-nums}
.k-mono{font-family:var(--font-mono);font-weight:500;letter-spacing:var(--track-mono);font-variant-numeric:tabular-nums;font-variant-ligatures:none}
.k-caps{font-family:var(--font-mono);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;line-height:var(--lh-caps);font-variant-numeric:tabular-nums}
.k-display{font-family:var(--font-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--track-display)}