/* Визиторкрут Design System — bundled tokens (fonts+colors+type+spacing+elevation+motion+base) */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Визиторкрут — Fonts
   Webfonts loaded from Google Fonts CDN (see readme "Caveats").
   - Unbounded  : display / big verdict moments (full Cyrillic)
   - Golos Text : UI + body workhorse (Paratype, Cyrillic-first)
   - JetBrains Mono : data / numbers (tabular, Cyrillic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Unbounded:wght@400;500;600;700;800&display=swap');

:root {
  --font-display: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
}

/* ===== tokens/colors.css ===== */
/* ============================================================
   Визиторкрут — Color tokens
   Warm, high-contrast "wayfinding" palette built for glanceable,
   in-sunlight reading. Green is the brand because the whole
   product exists to find the trips worth taking (стоит ехать).
   The verdict scale (go / edge / skip) is the semantic spine.
   ============================================================ */

:root {
  /* ---------- Base ramps ---------- */

  /* Green — brand + "стоит ехать" (worth it / go) */
  --green-50:  #E9F8EF;
  --green-100: #C8EDD5;
  --green-200: #97DEB2;
  --green-300: #5FCB8C;
  --green-400: #26B268;
  --green-500: #12A150;   /* brand primary */
  --green-600: #0C8442;
  --green-700: #0B6A37;
  --green-800: #0C532D;
  --green-900: #0B3E23;

  /* Red — danger + "не стоит" (skip) */
  --red-50:  #FDECEC;
  --red-100: #FAD3D3;
  --red-200: #F3AEAE;
  --red-300: #EC8585;
  --red-400: #E35B5B;
  --red-500: #D93B3B;
  --red-600: #BE2A2A;
  --red-700: #9C2020;
  --red-800: #7C1B1B;
  --red-900: #5E1717;

  /* Amber — warning + "на грани" (borderline) */
  --amber-50:  #FEF5E4;
  --amber-100: #FBE7BC;
  --amber-200: #F7D485;
  --amber-300: #F2BE4B;
  --amber-400: #F2A81E;   /* borderline fill */
  --amber-500: #E8930C;
  --amber-600: #B5760B;
  --amber-700: #8E5B0A;
  --amber-800: #6E470B;
  --amber-900: #52360A;

  /* Blue — info + route line + links (the "navigator" nod) */
  --blue-50:  #EAF1FD;
  --blue-100: #CDDDFA;
  --blue-200: #A6C2F4;
  --blue-300: #75A0EC;
  --blue-400: #4A80E4;
  --blue-500: #2F6FE0;
  --blue-600: #1E57C4;
  --blue-700: #18449B;
  --blue-800: #163878;
  --blue-900: #142E5C;

  /* Warm neutrals — paper & ink */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F6F1;
  --neutral-100: #EEEBE3;
  --neutral-200: #DEDACE;
  --neutral-300: #C6C1B2;
  --neutral-400: #A39D8C;
  --neutral-500: #7E786C;
  --neutral-600: #5E594F;
  --neutral-700: #46423A;
  --neutral-800: #2E2B25;
  --neutral-900: #1B1914;
  --neutral-950: #100F0B;

  --paper: #F4F2EB;   /* app / page background */
  --ink:   #17160F;   /* warm near-black — brand foundation */

  /* ---------- Semantic aliases ---------- */

  /* Surfaces */
  --color-bg: var(--paper);
  --color-bg-sunken: var(--neutral-100);
  --color-surface: var(--neutral-0);
  --color-surface-sunken: var(--neutral-50);
  --color-surface-inverse: var(--ink);
  --color-scrim: rgba(23, 22, 15, 0.55);

  /* Text */
  --text-primary: var(--ink);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: #FFFFFF;
  --text-on-brand: #FFFFFF;
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Borders */
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-inverse: rgba(255, 255, 255, 0.16);

  /* Brand */
  --brand: var(--green-500);
  --brand-hover: var(--green-600);
  --brand-active: var(--green-700);
  --brand-subtle: var(--green-50);
  --brand-subtle-border: var(--green-100);
  --on-brand: #FFFFFF;
  --focus-ring: rgba(18, 161, 80, 0.40);

  /* Status */
  --success: var(--green-500);
  --success-bg: var(--green-50);
  --success-border: var(--green-200);
  --success-text: var(--green-700);

  --danger: var(--red-500);
  --danger-bg: var(--red-50);
  --danger-border: var(--red-200);
  --danger-text: var(--red-700);
  --danger-hover: var(--red-600);

  --warning: var(--amber-400);
  --warning-bg: var(--amber-50);
  --warning-border: var(--amber-200);
  --warning-text: var(--amber-700);

  --info: var(--blue-500);
  --info-bg: var(--blue-50);
  --info-border: var(--blue-200);
  --info-text: var(--blue-700);

  /* ---------- Verdict scale (product core) ---------- */
  --verdict-go: var(--green-500);
  --verdict-go-bg: var(--green-50);
  --verdict-go-border: var(--green-200);
  --verdict-go-text: var(--green-700);

  --verdict-edge: var(--amber-400);
  --verdict-edge-bg: var(--amber-50);
  --verdict-edge-border: var(--amber-200);
  --verdict-edge-text: var(--amber-700);

  --verdict-skip: var(--red-500);
  --verdict-skip-bg: var(--red-50);
  --verdict-skip-border: var(--red-200);
  --verdict-skip-text: var(--red-700);

  /* Route / navigation accent */
  --route: var(--blue-500);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Визиторкрут — Typography
   Display : Unbounded   (big verdicts, hero, brand voice)
   Text/UI : Golos Text  (everything readable)
   Data    : JetBrains Mono (₽ / км / мин / ₽·ч, tabular)
   Type is glanceable-first: generous sizes, tight display
   tracking, tabular numerals for anything money- or metric-like.
   ============================================================ */

:root {
  /* Font sizes */
  --text-display-2xl: 56px;
  --text-display-xl:  44px;
  --text-display-lg:  34px;
  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-title: 16px;
  --text-body-lg: 17px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-overline: 11px;

  /* Line heights */
  --leading-display: 1.04;
  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-snug: 1.4;
  --leading-body: 1.5;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;
  --tracking-overline: 0.09em;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Numeric feature set — tabular figures for aligned metrics */
  --numeric-tabular: "tnum" 1, "lnum" 1;   /* @kind other */
}

/* ---------- Family helpers ---------- */
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); font-feature-settings: var(--numeric-tabular); }

/* ---------- Type specimens (utility classes) ---------- */
.t-display-2xl {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-extrabold);
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-extrabold);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
}
.t-title {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  line-height: 1.2;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
}

/* ---------- Data / numeric specimens ---------- */
.t-data-xl {
  font-family: var(--font-mono);
  font-size: var(--text-display-lg);
  line-height: 1.05;
  font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-tabular);
  letter-spacing: -0.01em;
}
.t-data-lg {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  line-height: 1.15;
  font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-tabular);
}
.t-data {
  font-family: var(--font-mono);
  font-size: var(--text-title);
  line-height: 1.3;
  font-weight: var(--weight-medium);
  font-feature-settings: var(--numeric-tabular);
}
.t-data-sm {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  line-height: 1.3;
  font-weight: var(--weight-medium);
  font-feature-settings: var(--numeric-tabular);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Визиторкрут — Spacing, radii & sizing
   4px base grid. Chunky-but-not-bubbly radii: confident field
   tool, large touch targets (min 44px), never fully-rounded
   unless it's a pill.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --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;
  --space-32: 128px;

  /* Corner radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* inputs, small controls */
  --radius-lg: 12px;   /* buttons */
  --radius-xl: 16px;   /* cards */
  --radius-2xl: 20px;  /* large surfaces / sheets */
  --radius-3xl: 28px;  /* hero panels */
  --radius-pill: 999px;

  /* Control heights — thumb-friendly */
  --control-sm: 36px;
  --control-md: 44px;   /* default tap target */
  --control-lg: 52px;
  --control-xl: 60px;   /* primary "взять заказ" */

  /* Border widths */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-width-focus: 2px;

  /* Layout */
  --container-max: 1200px;
  --app-width: 390px;      /* reference phone width */
  --page-gutter: var(--space-6);
}

/* ===== tokens/elevation.css ===== */
/* ============================================================
   Визиторкрут — Elevation & borders
   Warm-tinted shadows (never pure black) over a paper surface.
   The system leans on crisp 1px borders first, soft shadow
   second — a practical, high-legibility look, not floaty cards.
   ============================================================ */

:root {
  /* Shadows — tinted with ink, soft and low */
  --shadow-xs: 0 1px 2px rgba(23, 22, 15, 0.06);
  --shadow-sm: 0 1px 2px rgba(23, 22, 15, 0.06), 0 1px 3px rgba(23, 22, 15, 0.05);
  --shadow-md: 0 2px 4px rgba(23, 22, 15, 0.05), 0 6px 16px rgba(23, 22, 15, 0.08);
  --shadow-lg: 0 4px 8px rgba(23, 22, 15, 0.06), 0 12px 32px rgba(23, 22, 15, 0.12);
  --shadow-xl: 0 8px 16px rgba(23, 22, 15, 0.08), 0 24px 56px rgba(23, 22, 15, 0.16);

  /* Bottom-sheet / raised nav casts upward */
  --shadow-sheet: 0 -2px 8px rgba(23, 22, 15, 0.06), 0 -8px 32px rgba(23, 22, 15, 0.10);

  /* Inset — pressed / sunken fields */
  --shadow-inset: inset 0 1px 2px rgba(23, 22, 15, 0.08);

  /* Focus ring (composable) */
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* Colored glows for verdict emphasis (used sparingly) */
  --glow-go: 0 4px 20px rgba(18, 161, 80, 0.22);
  --glow-skip: 0 4px 20px rgba(217, 59, 59, 0.20);
}

/* ===== tokens/motion.css ===== */
/* ============================================================
   Визиторкрут — Motion
   Snappy and decisive — a field tool must feel instant. Short
   durations, a confident standard ease, no bounce on functional
   UI. Press = quick scale-down; hover = subtle darken/lift.
   ============================================================ */

:root {
  --duration-instant: 80ms;   /* @kind other */
  --duration-fast: 120ms;     /* @kind other */
  --duration-base: 200ms;     /* @kind other */
  --duration-slow: 320ms;     /* @kind other */
  --duration-slower: 480ms;   /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* Interaction primitives */
  --press-scale: 0.97;          /* @kind other */
  --lift: translateY(-1px);     /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;  /* @kind other */
    --duration-fast: 0ms;     /* @kind other */
    --duration-base: 0ms;     /* @kind other */
    --duration-slow: 0ms;     /* @kind other */
    --duration-slower: 0ms;   /* @kind other */
    --press-scale: 1;         /* @kind other */
    --lift: none;             /* @kind other */
  }
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Визиторкрут — Base
   Minimal reset + brand defaults. Consumers linking styles.css
   get a paper background, Golos Text body, and branded links
   out of the box.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

button { font-family: inherit; }

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--green-200); color: var(--ink); }

:focus-visible {
  outline: var(--border-width-focus) solid var(--brand);
  outline-offset: 2px;
}

/* Tabular numerals wherever a metric is shown */
.tnum { font-feature-settings: var(--numeric-tabular); }

/* Common surfaces */
.surface {
  background: var(--color-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xl);
}
.surface-sunken {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-xl);
}