/* Kanapp design tokens — direction A «Нить» (the thread).
   Every colour, size and duration the components use lives here.
   Contrast ratios are measured against --paper unless noted; text colours all pass WCAG AA. */

:root {
  /* ── Colour: paper and ink ───────────────────────────── */
  --paper:        #FBF6F1;  /* page background */
  --paper-2:      #F4ECE4;  /* sunken areas, tracks, hover */
  --paper-3:      #EFE6DD;  /* outer frame, dividers on paper-2 */
  --surface:      #FFFFFF;  /* cards, inputs */
  --ink:          #2A1D1B;  /* body text, focus ring — 15.6:1 */
  --ink-2:        #6B5A55;  /* secondary text — 6.1:1 */
  --line:         #E6D9CE;  /* hairlines (decorative) */
  --line-strong:  #948079;  /* input and control borders — 3.7:1 on white (WCAG 1.4.11) */

  /* ── Colour: the thread and its accents ─────────────── */
  --blood:        #B3122E;  /* the thread, primary actions, urgency — 6.4:1; white on it 6.9:1 */
  --blood-deep:   #8E0E24;  /* pressed state, text on --blush — 7.0:1 */
  --blush:        #F4D9D5;  /* urgent tags, selected tiles */
  --blush-2:      #FBEDEA;  /* soft urgent background */
  --sage:         #5F7F66;  /* decorative "done" (not for text) */
  --sage-ink:     #4A6A52;  /* success text — 5.6:1 */
  --sage-soft:    #E3ECE3;  /* success background */
  --gold:         #B98232;  /* ranks and ornament (decorative, not for text) */
  --gold-ink:     #8A5A17;  /* rank text — 5.5:1 */
  --gold-soft:    #F5E9D6;  /* rank background */
  --scrim:        rgba(42, 29, 27, .38);

  /* ── Type ────────────────────────────────────────────── */
  --font-display: "Lora", Georgia, "Times New Roman", serif;          /* headings, numbers, blood groups */
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-md:   16px;   /* body text never goes below this */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --fs-hero: clamp(34px, 4.4vw, 58px);
  --fs-group: 64px;  /* the blood-group glyph on a request card */
  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* ── Space: a 4-point scale ──────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ── Shape ───────────────────────────────────────────── */
  --r-sm:   10px;
  --r-md:   14px;   /* buttons, inputs */
  --r-lg:   20px;   /* cards */
  --r-xl:   28px;   /* sheets */
  --r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────── */
  --shadow-1:   0 1px 2px rgba(42, 29, 27, .06), 0 2px 10px rgba(42, 29, 27, .05);
  --shadow-2:   0 12px 32px rgba(60, 20, 20, .12);
  --shadow-cta: 0 10px 22px rgba(179, 18, 46, .26);

  /* ── Motion: one meaningful move per moment ─────────── */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-thread: cubic-bezier(.45, .05, .2, 1);
  --t-fast:   160ms;
  --t-med:    320ms;
  --t-slow:   900ms;
  --t-thread: 1800ms;

  /* ── Layout ──────────────────────────────────────────── */
  --tap:      48px;   /* default control height */
  --tap-min:  44px;   /* nothing clickable is smaller */
  --gutter:   16px;   /* side padding on phones */
  --content:  1180px; /* widest content */
  --column:   640px;  /* forms and flows */
  --topbar-h: 60px;
  --tabbar-h: 64px;
  --topbar-offset: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --topbar-h: 68px; --fs-group: 72px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #1e2836;
  --paper-2:      #283444;
  --paper-3:      #324050;
  --surface:      #243040;
  --ink:          #f6f1ea;
  --ink-2:        #c9beb4;
  --line:         #313b48;
  --line-strong:  #9a8b82;
  --blush:        #3d242a;
  --blush-2:      #2c1c20;
  --sage-soft:    #1c2a22;
  --gold-soft:    #2e2618;
  --scrim:        rgba(0, 0, 0, .58);
  --shadow-1:     0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .28);
  --shadow-2:     0 12px 32px rgba(0, 0, 0, .48);
}