/* ==========================================================================
   Provato — Design System tokens (canonical source)
   --------------------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, shadow, motion.

   Kanonický CSS-vars reference design-systemu provato. Sdílené pro
   `apps/web` (SvelteKit), `apps/desktop` (Electron) + `apps/backoffice-web`.
   Když se hodnota mění, mění se tady první; konzumenti (Tailwind @theme / Svelte)
   z toho zrcadlí.

   Active palette: Navy Studio.

   Font paths use `fonts/` — relativně k tomuto souboru (woff2 + woff/ttf
   fallback, viz @font-face níže).
   ========================================================================== */

/* ---------- Webfonts — self-hosted Libre Caslon Text + DM Sans ----------
   Fonty: woff2 (web-optimalizované) ve `fonts/`, s fallbackem woff + ttf.
   Poskytnuté řezy: DM Sans 400 + 700 (UI text), Libre Caslon Text italic 400 (wordmark/display).
   Ostatní řezy (Caslon regular/bold, DM Sans italic) nejsou dodány — fallback. */
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/libre-caslon-text-italic.woff2") format("woff2"),
       url("fonts/libre-caslon-text-italic.woff") format("woff"),
       url("fonts/libre-caslon-text-italic.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-regular.woff2") format("woff2"),
       url("fonts/dm-sans-regular.woff") format("woff"),
       url("fonts/dm-sans-regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dm-sans-bold.woff2") format("woff2"),
       url("fonts/dm-sans-bold.woff") format("woff"),
       url("fonts/dm-sans-bold.ttf") format("truetype");
}

:root {
  /* ==========================================================================
     COLOR — Navy Studio
     ========================================================================== */

  /* Semantic surface tokens — primary canvas, used everywhere */
  --bg: #F7F9FC;             /* cool paper, page background */
  --surface: #FFFFFF;        /* cards, popovers, modals */
  --surface-2: #EEF2F8;      /* hover state, sectioning */

  --ink: #0A1A33;            /* deep navy ink — primary text + brand wordmark */
  --ink-2: #1F2A44;          /* body secondary, dim ink */
  --muted: #5C6B82;          /* meta, captions, eyebrows (cool slate) */

  --line: rgba(31, 68, 128, 0.10);         /* hairline borders — default separator */
  --line-strong: rgba(31, 68, 128, 0.20);  /* inputs, table headers */

  --accent: #1F4480;         /* studio navy — links, focus rings, accents */
  --accent-soft: #E2E8F0;    /* accent pill background */
  --accent-ink: #FFFFFF;     /* text on accent fill */

  /* Navy color scale 50–900 — for Tailwind `bg-navy-*`, `text-navy-*` utilities.
     Anchors map to semantic tokens above; 300–600 are HSL-interpolated. */
  --navy-50:  #F7F9FC;       /* = --bg */
  --navy-100: #EEF2F8;       /* = --surface-2 */
  --navy-200: #E2E8F0;       /* = --accent-soft */
  --navy-300: #C7D2E2;
  --navy-400: #9FB1CB;
  --navy-500: #6B82A8;
  --navy-600: #3F5F94;
  --navy-700: #1F4480;       /* = --accent */
  --navy-800: #1F2A44;       /* = --ink-2 */
  --navy-900: #0A1A33;       /* = --ink */

  /* Semantic — main + soft pair (no 50–900 scale; 1 main + 1 background per state) */
  --success: #246B57;
  --success-soft: #DDEAE3;
  --warning: #9A6B1E;
  --warning-soft: #EFE6D2;
  --danger: #94372C;
  --danger-soft: #EEDAD6;
  --info: #1F4480;
  --info-soft: #E2E8F0;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  --font-display: "Libre Caslon Text", "Libre Caslon Display", Georgia, serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — semantic shorthand vars. Use `font: var(--type-h1);` directly. */
  --type-display:      italic 400 64px/1.05 var(--font-display);
  --type-h1:           italic 400 44px/1.10 var(--font-display);
  --type-h2:           500 28px/1.25 var(--font-sans);
  --type-h3:           500 20px/1.30 var(--font-sans);
  --type-body:         400 16px/1.55 var(--font-sans);
  --type-body-strong:  500 16px/1.55 var(--font-sans);
  --type-small:        400 14px/1.5 var(--font-sans);
  --type-eyebrow:      500 12px/1.2 var(--font-sans);  /* uppercase + letter-spacing */
  --type-mono:         400 14px/1.5 var(--font-mono);

  --tracking-tight: -0.01em;
  --tracking-tightish: -0.005em;
  --tracking-eyebrow: 0.16em;

  /* ==========================================================================
     SPACING — 4 px grid
     ========================================================================== */

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ==========================================================================
     RADIUS
     --------------------------------------------------------------------------
     Standard scale: 4 / 6 / 8 / 12 / full. Capped at 12 px for non-pill
     surfaces. Plus three explicit named tokens for components that don't
     fit the scale (DS preview = zdroj pravdy):
       --radius-button: 6 px  (= --radius-md, but named for clarity)
       --radius-input:  5 px  (between sm=4 and md=6)
       --radius-card:  10 px  (between lg=8 and xl=12)
     ========================================================================== */

  --radius-none: 0;
  --radius-sm: 4px;        /* small surfaces, dense UI */
  --radius-md: 6px;        /* buttons (default), most chrome */
  --radius-lg: 8px;        /* primary surfaces, modals */
  --radius-xl: 12px;       /* hero containers — maximum */
  --radius-full: 9999px;   /* pills, avatars */

  --radius-button: 6px;    /* explicit named for buttons (= md) */
  --radius-input:  5px;    /* explicit named for inputs (between sm and md) */
  --radius-card:  10px;    /* explicit named for cards (between lg and xl) */

  /* ==========================================================================
     SHADOWS — minimal; hairline borders preferred
     ========================================================================== */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* CTA premium glow — landing only, ink variant */
  --shadow-cta: 0 4px 14px rgba(17, 17, 17, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ==========================================================================
     BORDERS
     ========================================================================== */

  --border-hairline: 0.5px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ==========================================================================
     MOTION
     ========================================================================== */

  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-deep: 1000ms;

  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-depth:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     LAYOUT
     ========================================================================== */

  --container-max: 1280px;
  --container-pad: 24px;

  /* ==========================================================================
     SIGNATURE BLUEPRINT BACKGROUND
     ========================================================================== */

  --bg-blueprint:
    linear-gradient(to right, rgba(17, 17, 17, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.025) 1px, transparent 1px);
  --bg-blueprint-size: 32px 32px;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tightish); margin: 0; }
h3 { font: var(--type-h3); margin: 0; }
p  { font: var(--type-body); margin: 0; }
small { font: var(--type-small); color: var(--muted); }
code, pre { font: var(--type-mono); }

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.wordmark {
  font: var(--type-display);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tabular numerics for any data column */
.num, td.num, .stat { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}