/* Окно встречи v2 — design tokens, look "Тихая таблица" (calm ledger; source: ../ui-concept/).
   Base reference: the user's Marketing CRM (white cards on a light-grey canvas, near-black ink,
   hairline rules, pill controls, soft green status pills). Reasoning and contrast table: UI-PROPOSAL.md.

   Same token names and the same theme structure as v2:
     light on bare :root;
     dark under @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) and :root[data-theme="dark"].

   What changes vs v2:
     - colour carries meaning only: the accent becomes ink (black button / handle in light, white in dark),
       orange is gone; time of day = mint / sand / slate; status = green / amber / grey; "now" = red line.
     - neutral graphite dark theme instead of blue-navy.
     - time font: Onest with tabular figures instead of JetBrains Mono (one family on the page).
     - radii 8 / 10 / 14, softer two-layer shadows.

   New tokens (not in v2; used by overrides.css only, safe to ignore):
     --st-ok-bg, --st-mid-bg, --st-bad-bg   soft status pills (CRM "Работает")
     --chip-on-bg, --chip-on-line           quick-pick chip of a city that is already in the grid
     --head-bg                              grid column heads (CRM table header row)
     --cell-gap                             separators between hour cells (replaces --grid-line inside the grid)
     --cell-dusk-ink                        digits on early/late cells (palette 2 "Цвета событий")
     --sel-line                             outline of the selected hour (Google Calendar blue)
     --line-soft                            hairline for cards and the pick strip
     --shadow-card, --shadow-pop            card and popover shadows */

:root {
  /* surfaces and text */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F1F3F5;
  --ink: #0F1216;
  --ink-2: #596070;
  --line: #D3D8DF;
  --line-soft: #E7EAEE;
  --grid-line: #E7EAEE;
  --head-bg: #F7F8FA;
  --cell-gap: #DADCE0;

  /* accent = ink: primary button, meeting handle, jump pill (colour is reserved for meaning) */
  --accent: #0F1216;
  --on-accent: #FFFFFF;
  --sel-bg: rgb(26 115 232 / .10);
  --sel-line: #1A73E8;
  --focus: #2563EB;
  --danger: #C42B2B;
  --warn: #9A5600;
  --warn-bg: #FFF3D6;
  --now: #EA4335;

  /* hour cells: a lightness ladder (L* 97 / 90 / 84) plus hue: mint = work, sand = early/late, slate = night */
  --cell-work: #E8F0FE;
  --cell-dusk: #FEF7E0;
  --cell-night: #F1F3F4;
  --cell-ink: #174EA6;
  --cell-ink-2: #5F6368;
  --cell-night-ink: #5F6368;
  --cell-dusk-ink: #7A4F00;
  --cell-off-hatch: rgb(15 18 22 / .10);

  /* "fits everyone" strip and verdict icons */
  --fit-ok: #15803D;
  --fit-mid: #F59E0B;
  --fit-bad: #D9DDE4;
  --fit-mid-stripe: rgb(255 255 255 / .55);
  --on-fit-ok: #FFFFFF;
  --on-fit-mid: #0F1216;
  --on-fit-bad: #0F1216;

  /* status words (icon + word, never colour alone) and their soft pills */
  --st-ok: #13733A;
  --st-mid: #9A4C00;
  --st-bad: #596070;
  --st-ok-bg: #E5F3E9;
  --st-mid-bg: #FCEFD9;
  --st-bad-bg: #EEF0F3;

  /* quick-pick chip of an added city */
  --chip-on-bg: #E9F4ED;
  --chip-on-line: #B5D8C1;

  --scrim: rgb(15 18 22 / .40);
  --toast-bg: #0F1216;
  --toast-ink: #FFFFFF;
  --toast-link: #8CC4FF;

  --shadow-card: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-pop: 0 12px 32px -8px rgb(16 24 40 / .18), 0 2px 6px rgb(16 24 40 / .06);
  --shadow-sheet: 0 -12px 40px rgb(16 24 40 / .14);
  --shadow-handle: 0 2px 8px rgb(16 24 40 / .22);
  --shadow-handle-drag: 0 8px 20px rgb(16 24 40 / .26);
  --shadow-edge: 8px 0 8px -6px rgb(16 24 40 / .12);

  /* patterns built from the colours above (re-resolve per theme on :root) */
  --fit-mid-fill: repeating-linear-gradient(45deg, var(--fit-mid) 0 3px, var(--fit-mid-stripe) 3px 6px) var(--fit-mid);
  --cell-off-fill: repeating-linear-gradient(135deg, var(--cell-off-hatch) 0 1px, transparent 1px 6px);

  /* type: one family. Onest (Google Fonts) covers Cyrillic incl. Ukrainian і ї є ґ and Latin Extended (Polish ą ę ł ń ó ś ź ż)
     and has tabular figures, so times stay aligned without a monospace font */
  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-time: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-readout: 1.125rem;  /* 18 / 700 tnum */
  --fs-cell: 1rem;         /* 16 / 500 tnum */
  --fs-cell-min: 0.8125rem;/* 13 / 500 */
  --fs-title: 1.25rem;     /* 20 / 600 */
  --fs-body: 0.9375rem;    /* 15 / 400 */
  --fs-city: 0.9375rem;    /* 15 / 600 */
  --fs-meta: 0.8125rem;    /* 13 / 400 */
  --fs-caption: 0.75rem;   /* 12 / 600 */
  --fs-input: 1rem;        /* 16: no iOS zoom on focus */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-body: 1.45;

  /* spacing (4-px rhythm), radii, targets */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --r-cell: 8px;
  --r-ctl: 10px;
  --r-sheet: 14px;
  --r-pill: 999px;
  --tap: 44px;

  /* grid geometry: unchanged from v2 (the coordinator owns row height) */
  --g-row-h: max(48px, 3rem);
  --g-rail-w: 4rem;
  --g-fit-w: 8px;
  --g-col-min: clamp(72px, 4.4rem, 88px);
  --g-head-h: max(64px, 4rem);
  --g-readout-h: max(64px, 4rem);
  --a-bar-h: max(64px, 4rem);

  /* motion (zeroed under prefers-reduced-motion in base.css) */
  --t-fast: 120ms;
  --t-sheet: 180ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* stacking order shared by grid, shell and sheets */
  --z-sticky: 2;
  --z-handle: 4;
  --z-bar: 10;
  --z-menu: 30;
  --z-scrim: 40;
  --z-sheet: 41;
  --z-toast: 50;

  color-scheme: light;
}

@media (min-width: 600px) {
  :root { --g-col-min: 96px; }
}

/* dark: neutral graphite (no navy cast); work cells are the lightest, night the darkest */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0C0E;
    --surface: #141518;
    --surface-2: #1C1E22;
    --ink: #EDEEF0;
    --ink-2: #A3A8B2;
    --line: #363A42;
    --line-soft: #25272C;
    --grid-line: #25272C;
    --head-bg: #18191D;
    --cell-gap: #3C4043;
    --accent: #EDEEF0;
    --on-accent: #0F1216;
    --sel-bg: rgb(138 180 248 / .16);
    --sel-line: #8AB4F8;
    --focus: #8AB4FF;
    --danger: #FF7A7A;
    --warn: #F2B544;
    --warn-bg: #2E2414;
    --now: #F28B82;
    --cell-work: #1E2A3D;
    --cell-dusk: #332B16;
    --cell-night: #1B1C1E;
    --cell-ink: #AECBFA;
    --cell-ink-2: #9AA0A6;
    --cell-night-ink: #9AA0A6;
    --cell-dusk-ink: #FDD663;
    --cell-off-hatch: rgb(237 238 240 / .09);
    --fit-ok: #3FB96B;
    --fit-mid: #F5A524;
    --fit-bad: #30343C;
    --fit-mid-stripe: rgb(0 0 0 / .35);
    --on-fit-ok: #0B0C0E;
    --on-fit-mid: #0B0C0E;
    --on-fit-bad: #EDEEF0;
    --st-ok: #5ED18C;
    --st-mid: #F2B544;
    --st-bad: #A3A8B2;
    --st-ok-bg: #16301F;
    --st-mid-bg: #2E2414;
    --st-bad-bg: #22252A;
    --chip-on-bg: #17291E;
    --chip-on-line: #2D5A3E;
    --scrim: rgb(0 0 0 / .6);
    --toast-bg: #EDEEF0;
    --toast-ink: #0F1216;
    --toast-link: #1D4ED8;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .30);
    --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .30);
    --shadow-sheet: 0 -12px 40px rgb(0 0 0 / .45);
    --shadow-handle: 0 2px 8px rgb(0 0 0 / .45);
    --shadow-handle-drag: 0 8px 20px rgb(0 0 0 / .55);
    --shadow-edge: 8px 0 8px -6px rgb(0 0 0 / .40);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0B0C0E;
  --surface: #141518;
  --surface-2: #1C1E22;
  --ink: #EDEEF0;
  --ink-2: #A3A8B2;
  --line: #363A42;
  --line-soft: #25272C;
  --grid-line: #25272C;
  --head-bg: #18191D;
  --cell-gap: #3C4043;
  --accent: #EDEEF0;
  --on-accent: #0F1216;
  --sel-bg: rgb(138 180 248 / .16);
  --sel-line: #8AB4F8;
  --focus: #8AB4FF;
  --danger: #FF7A7A;
  --warn: #F2B544;
  --warn-bg: #2E2414;
  --now: #F28B82;
  --cell-work: #1E2A3D;
  --cell-dusk: #332B16;
  --cell-night: #1B1C1E;
  --cell-ink: #AECBFA;
  --cell-ink-2: #9AA0A6;
  --cell-night-ink: #9AA0A6;
  --cell-dusk-ink: #FDD663;
  --cell-off-hatch: rgb(237 238 240 / .09);
  --fit-ok: #3FB96B;
  --fit-mid: #F5A524;
  --fit-bad: #30343C;
  --fit-mid-stripe: rgb(0 0 0 / .35);
  --on-fit-ok: #0B0C0E;
  --on-fit-mid: #0B0C0E;
  --on-fit-bad: #EDEEF0;
  --st-ok: #5ED18C;
  --st-mid: #F2B544;
  --st-bad: #A3A8B2;
  --st-ok-bg: #16301F;
  --st-mid-bg: #2E2414;
  --st-bad-bg: #22252A;
  --chip-on-bg: #17291E;
  --chip-on-line: #2D5A3E;
  --scrim: rgb(0 0 0 / .6);
  --toast-bg: #EDEEF0;
  --toast-ink: #0F1216;
  --toast-link: #1D4ED8;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .30);
  --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .30);
  --shadow-sheet: 0 -12px 40px rgb(0 0 0 / .45);
  --shadow-handle: 0 2px 8px rgb(0 0 0 / .45);
  --shadow-handle-drag: 0 8px 20px rgb(0 0 0 / .55);
  --shadow-edge: 8px 0 8px -6px rgb(0 0 0 / .40);
  color-scheme: dark;
}