/* Inter (self-hosted, subset Latin + Cyrillic incl. і ї є ґ ’; OFL 1.1, see /assets/fonts/Inter-LICENSE.txt).
   Variable font 100–900; the design uses only 400 / 600 / 700. File name carries the version (never reused). */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-4.1-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Perevizka – design tokens (binding design system, see CLAUDE.md → "Designsystem").
   Shared by all new pages (login, account, /@username). Use tokens, not ad-hoc values. */
:root {
  /* Colors – palette "Navy monochrom" (2026-09-29). No yellow surfaces or buttons, no bright blue; yellow only in the
     logo and the border-crossing point on a route. */
  --c-navy: #0F2438;        /* primary: buttons on light ground, headings, links, dark sections */
  --c-navy-surface: #1A3552; /* large dark areas: hero, "Для перевізників", dark sections (footer stays --c-navy) */
  --c-navy-2: #1C3349;      /* surfaces on navy */
  --c-slate: #3A4D63;       /* hover, secondary */
  --c-mist: #C9D4DF;        /* accent text on navy (eyebrows, secondary text) */
  --c-bg: #F5F6F7;          --c-surface: #FFFFFF;
  --c-border: #E1E4E8;      --c-border-strong: #CDD3DA;
  --c-input-border: #868F99; /* form fields: >= 3:1 on white and --c-bg (WCAG 1.4.11) */
  --c-text: #172B3D;        --c-muted: #5E6873;
  /* Ukraine symbolism only (flag line, Ukraine in the dot map, logo): official flag colours; blue lightened on navy */
  --c-flag-blue: #0057B7;   --c-flag-yellow: #FFD500; --c-flag-blue-on-navy: #3B8BEB; /* 3.6:1 on --c-navy-surface */
  --c-crossing-bg: #FFF3CC; --c-crossing-border: #E6B400;  /* only the border-crossing point on a route */
  --c-success: #117A52;     --c-danger: #B42318;
  --c-success-soft: #ECFDF3; --c-danger-soft: #FEF3F2;  /* backgrounds for status messages */
  --c-info-soft: #ECEFF3;   /* neutral notes (text in --c-navy) */
  /* white inner ring + navy outer ring: visible on light and on navy ground */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--c-navy);

  /* Typography: Inter, self-hosted (see @font-face below), fallback system-ui */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --fs-xs: .75rem;  --fs-sm: .875rem; --fs-base: 1rem;  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem;
  --fs-4xl: clamp(2rem, 4vw, 2.75rem);
  --fs-display: clamp(2.5rem, 5.5vw, 4rem);
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6;
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.08em;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --section-y: clamp(56px, 8vw, 96px);
  --gutter: clamp(16px, 4vw, 32px);

  /* Radii & shadows */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 36, 56, .06);
  --shadow-md: 0 8px 24px rgba(15, 36, 56, .08);

  /* Controls */
  --control-h: 48px;
  --btn-px: 20px; --btn-radius: var(--r-md); --btn-fw: var(--fw-semibold);
  --input-radius: var(--r-md); --input-border: 1px solid var(--c-input-border);
  --input-fs: 16px;
}