/* ==========================================================================
   Design tokens — Hromada Poruch
   Single source of colour, type and spacing. Nothing else defines a colour.
   ========================================================================== */

:root {
  /* --- Surfaces: warm, never clinical white --------------------------- */
  --bg:              #FBFAF8;
  --surface:         #FFFFFF;
  --surface-sunken:  #F4F2EE;
  --border:          #E3E0DA;
  --border-strong:   #CFCBC2;

  /* --- Text: softened black, easier on tired eyes --------------------- */
  --text:            #1F2421;
  --text-muted:      #5C635E;
  --text-inverse:    #FFFFFF;

  /* --- Primary: muted teal. Trust without institutional coldness ------ */
  --primary:         #2E6B5E;
  --primary-dark:    #1F4A41;
  --primary-light:   #E6F0ED;
  /* Text painted ON a primary surface. Must flip with the theme: in dark
     mode --primary becomes a light teal, and white text on it measured
     2.43:1 in testing. */
  --on-primary:      #FFFFFF;

  /* --- Status. Red is avoided; terracotta carries urgency -------------
     Briefly moved to wine when Drohobych's colour was thought to be
     brick — four degrees of hue apart, so a warning would have read as
     the town's own decoration. The hromada's colour is purple, the
     collision does not exist, and the change was reverted: a status
     palette should move for a real conflict, not for a guess. */
  --blocker:         #A6472E;
  --blocker-bg:      #FBEDE9;
  --waiting:         #7A6018;
  --waiting-bg:      #FAF3E0;
  --done:            #2F6B3E;
  --done-bg:         #EAF3EC;
  --locked:          #6E736F;
  --locked-bg:       #F1F0ED;

  --focus:           #1B5FA8;

  /* --- Type ----------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --size-xs:   0.82rem;
  --size-sm:   0.92rem;
  --size-base: 1rem;
  --size-lg:   1.15rem;
  --size-xl:   1.4rem;
  --size-2xl:  1.75rem;
  --size-3xl:  2.1rem;

  --lh-tight: 1.28;
  --lh-base:  1.6;

  /* --- Spacing scale --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --radius:    12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(31, 36, 33, 0.06);
  --shadow-md: 0 2px 8px rgba(31, 36, 33, 0.08);

  /* Minimum touch target — shaky hands, cold, stress */
  --tap: 48px;

  --wrap: 68rem;
  --measure: 38rem;
}

/* Dark theme: people read this at 2am. Applied by preference or by toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #14181A;
    --surface:        #1D2225;
    --surface-sunken: #171C1E;
    --border:         #333A3D;
    --border-strong:  #444C50;

    --text:           #E8EAE9;
    --text-muted:     #A2ABA7;

    --primary:        #6FB3A1;
    --primary-dark:   #8AC7B7;
    --primary-light:  #1E322D;
    --on-primary:     #0E1614;

    --blocker:        #E0906F;
    --blocker-bg:     #33211B;
    --waiting:        #D9BC6B;
    --waiting-bg:     #2E2716;
    --done:           #7FBF8E;
    --done-bg:        #1B2E20;
    --locked:         #8B918D;
    --locked-bg:      #22282A;

    --focus:          #7FB2E8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg:             #14181A;
  --surface:        #1D2225;
  --surface-sunken: #171C1E;
  --border:         #333A3D;
  --border-strong:  #444C50;
  --text:           #E8EAE9;
  --text-muted:     #A2ABA7;
  --primary:        #6FB3A1;
  --primary-dark:   #8AC7B7;
  --primary-light:  #1E322D;
  --on-primary:     #0E1614;
  --blocker:        #E0906F;
  --blocker-bg:     #33211B;
  --waiting:        #D9BC6B;
  --waiting-bg:     #2E2716;
  --done:           #7FBF8E;
  --done-bg:        #1B2E20;
  --locked:         #8B918D;
  --locked-bg:      #22282A;
  --focus:          #7FB2E8;
}

/* Reader-controlled text size. Base is already 18px — large by default,
   not hidden behind a "vision impaired mode" that people find demeaning. */
html                      { font-size: 18px; }
html[data-size="large"]   { font-size: 21px; }
html[data-size="xlarge"]  { font-size: 25px; }

@media (max-width: 22.5rem) {
  html { font-size: 17px; }
}