/* Verejka design tokens, v1 (2026-10-17).
   One source of truth for the marketing site and the app. Plain CSS custom properties, no build step.
   Fonts are self-hosted woff2 subsets (Latin + Latin Extended-A, so every Slovak letter is in). */

@font-face { font-family: "Inter"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* ---------- colour: neutrals (a cool grey with a trace of green, so the brand green sits naturally) ---------- */
  --bg:            #f6f7f5;   /* app canvas */
  --surface:       #ffffff;   /* cards, tables, panels */
  --surface-2:     #f0f2ef;   /* table header, hover, inset areas */
  --surface-3:     #e7eae6;   /* pressed, selected-neutral */
  --line:          #e2e6e2;   /* hairlines */
  --line-strong:   #cbd2cc;   /* input borders, dividers that must be seen */
  --ink:           #0e1a15;   /* primary text, 17.8:1 on white */
  --ink-2:         #38443e;   /* secondary text, 10:1 */
  --muted:         #5c6863;   /* captions, meta, 5.8:1 on white, 5.4:1 on --bg, 5.2:1 on --surface-2 */
  --faint:         #8b9590;   /* placeholders, disabled, icons only (3.1:1, never body text) */
  --sidebar:       #f1f3f0;   /* app sidebar */
  --row-hover:     #fafbf9;   /* table row hover */
  --row-group:     #fbfaf6;   /* folded group row in tables */
  --invert:        #0e1a15;   /* dark-on-light emphasis: 'Nová otázka', dark buttons, toasts */
  --on-invert:     #ffffff;
  --invert-accent: #7fe0bf;

  /* ---------- colour: brand ---------- */
  --brand:         #0b6e57;   /* "verejka green": links, primary buttons, focus. 6.2:1 on white */
  --brand-hover:   #08594a;
  --brand-press:   #064a3d;
  --brand-ink:     #053d31;   /* text on --brand-soft */
  --brand-soft:    #e2f1eb;   /* selected rows, active nav, chips */
  --brand-soft-2:  #cbe6db;
  --on-brand:      #ffffff;

  /* the "deal window" signal: contracts ending in 2-9 months, new tenders. Amber, never red. */
  --signal:        #9a4f05;   /* text, 6.1:1 on white */
  --signal-bg:     #fdf1de;
  --signal-line:   #f3d3a1;

  /* status (reserved: never used as a chart series) */
  --ok:            #157a3c;  --ok-bg: #e5f4ea;
  --warn:          #9a4f05;  --warn-bg: #fdf1de;
  --danger:        #b42318;  --danger-bg: #fdecea;
  --info:          #2456c2;  --info-bg: #e8effc;

  /* marketing dark band (hero product shot, footer) */
  --night:         #0b1512;
  --night-2:       #13201b;
  --night-line:    #23332c;
  --night-ink:     #e8efeb;
  --night-muted:   #9fb0a8;

  /* ---------- data visualisation (validated: dataviz validate_palette.js, light on #fff and dark on #14181a, all checks pass) ---------- */
  --viz-1: #008266; /* green (brand series) */
  --viz-2: #d97a0f; /* amber */
  --viz-3: #3a6ad1; /* blue */
  --viz-4: #cf4f78; /* rose */
  --viz-5: #5f9a2a; /* leaf */
  --viz-6: #7657cc; /* violet */
  --viz-7: #1b93b5; /* cyan */
  --viz-8: #b4462c; /* brick */
  --viz-other: #a9b2ad; /* "ostatní", never a hue */
  --viz-grid:  #eceeeb;
  --viz-axis:  #5c6863;
  /* sequential (choropleth map, treemap depth): one hue, light -> dark */
  --seq-1: #e2f1eb; --seq-2: #b6dccd; --seq-3: #7fc1a9; --seq-4: #45a083; --seq-5: #0b7d62; --seq-6: #05573f;

  /* ---------- type ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* size / line-height pairs. App UI lives at 13-15; reading text 15-17; display only on marketing + entity names. */
  --t-11: 11px;  --lh-11: 14px;  /* overline labels, uppercase, tracking .06em */
  --t-12: 12px;  --lh-12: 16px;  /* captions, table meta */
  --t-13: 13px;  --lh-13: 18px;  /* dense tables, chips, sidebar */
  --t-14: 14px;  --lh-14: 20px;  /* default UI text */
  --t-15: 15px;  --lh-15: 24px;  /* chat answers, reading */
  --t-17: 17px;  --lh-17: 26px;  /* lead paragraph */
  --t-20: 20px;  --lh-20: 28px;  /* h3, KPI value small */
  --t-24: 24px;  --lh-24: 30px;  /* h2, KPI value */
  --t-32: 32px;  --lh-32: 38px;  /* h1 in app (Newsreader) */
  --t-44: 44px;  --lh-44: 48px;  /* marketing h2 */
  --t-64: 64px;  --lh-64: 66px;  /* marketing hero (38/42 on phones) */

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 680;

  /* ---------- space (4 px grid) ---------- */
  --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-24: 96px;

  /* ---------- shape ---------- */
  --r-xs: 4px;   /* chips inside tables, kbd */
  --r-sm: 6px;   /* buttons, inputs */
  --r-md: 10px;  /* cards, menus */
  --r-lg: 14px;  /* panels, pricing cards, chat composer */
  --r-xl: 20px;  /* marketing product frame */
  --r-pill: 999px;

  /* ---------- elevation (borders do most of the work; shadows only for things that float) ---------- */
  --sh-1: 0 1px 2px rgba(14, 26, 21, .05);
  --sh-2: 0 1px 2px rgba(14, 26, 21, .04), 0 4px 12px -2px rgba(14, 26, 21, .07);
  --sh-3: 0 0 0 1px rgba(14, 26, 21, .06), 0 12px 32px -8px rgba(14, 26, 21, .20), 0 4px 8px -4px rgba(14, 26, 21, .08);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--brand) 70%, transparent);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --d-fast: 120ms;   /* hover, press */
  --d-base: 180ms;   /* menus, popovers, toasts in */
  --d-slow: 260ms;   /* drawers, side panel */

  /* ---------- layout ---------- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --content-max: 1200px;
  --reading-max: 760px;
  --tap: 44px;   /* minimum touch target */
}

/* Dark theme: recommended for the app only (phase 2), selected per user in Profil, default = system.
   Same roles, re-stepped values; chart slots re-stepped and validated against --surface #14181a. */
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1211; --surface: #14181a; --surface-2: #1b2022; --surface-3: #232a2c;
  --line: #262d2f; --line-strong: #364042;
  --sidebar: #111517; --row-hover: #181d1f; --row-group: #191e20; --invert: #e9eeeb; --on-invert: #0e1211; --invert-accent: #0b6e57;
  --ink: #e9eeeb; --ink-2: #c1cbc6; --muted: #93a09a; --faint: #66726d;
  --brand: #3cc29e; --brand-hover: #5fd2b2; --brand-press: #2aa384; --brand-ink: #b7ecdc; --brand-soft: #12312a; --brand-soft-2: #18443a; --on-brand: #04241c;
  --signal: #f0b35a; --signal-bg: #2e2312; --signal-line: #4a3819;
  --ok: #4cc27a; --ok-bg: #12291b; --warn: #f0b35a; --warn-bg: #2e2312; --danger: #f2766b; --danger-bg: #331614; --info: #7fa6f5; --info-bg: #15213a;
  --viz-1: #1a9e80; --viz-2: #cc7a18; --viz-3: #5b8bf0; --viz-4: #d65d86; --viz-5: #69a332; --viz-6: #9b7af0; --viz-7: #1f8fb3; --viz-8: #d4613f;
  --viz-other: #56605b; --viz-grid: #232a2c; --viz-axis: #93a09a;
  --sh-1: none; --sh-2: 0 0 0 1px var(--line); --sh-3: 0 0 0 1px var(--line-strong), 0 16px 40px -8px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; }
}