/* Zelivka design tokens - the canonical home of every colour, type, spacing, shape and motion
   value (DESIGN-PROFILE.md "Vodočet notebook" points here; docs/UI_UX.md states the intent).
   Tier 1 primitives are referenced only inside this file; components use Tier 2 and Tier 3.
   Contrast of every text and status pair is checked by docs/mockups/contrast_check.py. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("./vendor/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Display";
  src: url("./vendor/fonts/fraunces-display.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Tier 1: primitives ---- */
  /* "Mlha nad vodou" (owner, 2026-10-16; UI_UX §2.6.5) */
  --paper-0: #eaf0f4;      /* canvas: misty water paper */
  --paper-1: #ffffff;      /* card: a white sheet */
  --paper-2: #dfe7ed;      /* sunk tint: wells, tracks */
  --grid-mm: #d6e2ec;      /* millimetre grid, blue, behind drawings only */
  --ink-900: #17283a;
  --ink-700: #3b4c5e;
  --ink-500: #5d6976;
  --ink-300: #8b8f92;
  --water-200: #c4ddef;
  --water-400: #6fa4d0;
  --water-600: #2f6fa6;
  --water-800: #1d4f7c;
  --gauge-red: #b8432f;    /* the staff gauge's stripes - decoration, never a status */
  --meadow-400: #9bb36a;
  --meadow-600: #6d8a3e;
  --soil-400: #b59468;
  --cottage-wall: #d8c3a0;
  --cottage-roof: #7a4b3a;

  --amber-400: #f2c230;    /* severity 1 - watch (bdělost) */
  --amber-800: #7d5c00;
  --orange-500: #e8792a;   /* severity 2 - prepare (pohotovost) */
  --orange-800: #8f3f05;
  --red-600: #c42b23;      /* severity 3 - danger (ohrožení) */
  --red-800: #9a1d17;
  --violet-600: #6553b0;   /* heads-up (later phase) */
  --slate-600: #52606f;    /* information, stale, suspect */

  /* ---- Tier 2: semantic ---- */
  --color-canvas: var(--paper-0);
  --color-surface: var(--paper-1);
  --color-sunk: var(--paper-2);
  --color-grid: var(--grid-mm);
  --color-text: var(--ink-900);
  --color-text-2: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-border: rgba(23, 40, 58, 0.14);
  --color-border-strong: var(--ink-300);
  --color-link: var(--water-800);
  --color-ring: var(--water-600);

  --color-water: var(--water-400);
  --color-water-deep: var(--water-600);
  --color-water-text: var(--water-800);
  --color-gauge: var(--gauge-red);
  --color-meadow: var(--meadow-400);
  --color-meadow-deep: var(--meadow-600);
  --color-soil: var(--soil-400);
  --color-cottage-wall: var(--cottage-wall);
  --color-cottage-roof: var(--cottage-roof);

  /* severity: -fill is the chip or band, -on is text on the fill, -text is text on the canvas,
     -edge is the chip's or band's 1.5px outline - yellow and orange fills alone fail 3:1 on paper,
     so every severity shape is drawn with its edge */
  --sev-normal-fill: var(--water-200);
  --sev-normal-on: var(--ink-900);
  --sev-normal-text: var(--water-800);
  --sev-normal-edge: var(--water-600);
  --sev-1-fill: var(--amber-400);
  --sev-1-on: var(--ink-900);
  --sev-1-text: var(--amber-800);
  --sev-1-edge: var(--amber-800);
  --sev-2-fill: var(--orange-500);
  --sev-2-on: var(--ink-900);
  --sev-2-text: var(--orange-800);
  --sev-2-edge: var(--orange-800);
  --sev-3-fill: var(--red-600);
  --sev-3-on: #ffffff;
  --sev-3-text: var(--red-800);
  --sev-3-edge: var(--red-800);
  --sev-headsup-fill: var(--violet-600);
  --sev-headsup-on: #ffffff;
  --sev-info-fill: var(--slate-600);
  --sev-info-on: #ffffff;
  --sev-stale-fill: var(--paper-2);
  --sev-stale-on: var(--ink-700);

  /* ---- Type ---- */
  --font-display: "Fraunces Display", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-display: 700;
  --text-xs: 0.8125rem;   /* 13px - captions, reading times */
  --text-sm: 0.9375rem;   /* 15px - secondary */
  --text-base: 1.0625rem; /* 17px - body */
  --text-lg: 1.3125rem;   /* 21px - panel titles */
  --text-xl: 1.75rem;     /* 28px - verdict line */
  --text-2xl: 2.75rem;    /* 44px - the hero figure */
  --leading-tight: 1.1;
  --leading-body: 1.55;
  --tracking-display: -0.015em;

  /* ---- Spacing (4px base; micro 1-2, sibling 3-4, section 6-10) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --gutter: 1rem;
  /* the header bar's height (UI_UX §2.6 item 1): set here on :root, under a viewport media query
     below, because the root's scroll padding cannot read a value set inside the page's container
     queries; the bar's minimum height, the scroll padding and the side contents read it */
  --header-h: 62px;

  /* ---- Shape ---- */
  --radius-sm: 6px;   /* chips, buttons */
  --radius-md: 12px;  /* cards */
  --radius-lg: 20px;  /* the hero sheet */
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --ease-water: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-fill: 800ms;   /* water rising to the real level on load or change */
  --ripple-cycles: 2;       /* the surface ripple runs this many times, then rests (< 5 s) */
}

/* the bar is 68 px from a 900 px window (on the live page the root and the viewport are equally wide) */
@media (min-width: 900px) {
  :root { --header-h: 68px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* "Night at the dam" */
    --paper-0: #0e1620;
    --paper-1: #152231;
    --paper-2: #0a1119;
    --grid-mm: #1d2c3c;
    --ink-900: #e9eef3;
    --ink-700: #b3bfcb;
    --ink-500: #93a2b1;
    --ink-300: #5f6e7c;
    --water-200: #1d4467;
    --water-400: #3d82bf;
    --water-600: #6fb0e6;
    --water-800: #9fcdf2;
    --gauge-red: #e2715d;
    --meadow-400: #5f7a3c;
    --meadow-600: #8daa5b;
    --soil-400: #7d6544;
    --cottage-wall: #8f7c5e;
    --cottage-roof: #b07560;
    --amber-800: #f2c94c;
    --orange-500: #f08a3c;
    --orange-800: #f6a565;
    --red-600: #e5483f;
    --red-800: #ff8a80;
    --violet-600: #8f7fe0;
    --slate-600: #7d8b99;

    --color-border: rgba(233, 238, 243, 0.14);
    --sev-normal-on: var(--ink-900);
    --sev-1-on: #0e1620;
    --sev-2-on: #0e1620;
    --sev-3-on: #0e1620;
    --sev-headsup-on: #0e1620;
    --sev-info-on: #0e1620;
  }
}