/* Kartoid — base design tokens
   Import this file from every HTML preview / UI-kit page.
   Raw tokens on :root; semantic aliases below. */

/* ---------- Fonts ----------
   Single-family system: PT Sans for everything. */
/* Шрифт не тянется из Google: на kartoid.com PT Sans лежит в fonts/,
   @font-face — в <style> самой страницы. Это единственное отличие
   от View/colors_and_type.css. */

:root {
  /* ═══════════════════════════════════════════════════════════════
     NAMED COLOR TOKENS — единый источник правды.
     Описание каждого токена см. preview/colors-system.html
  ═══════════════════════════════════════════════════════════════ */

  /* ---------- 1 · Brand & accent — Sunset ---------- */
  --sunset:        #FF8B33;   /* primary accent, logo, route, selection */
  --sunset-hi:     #FFA763;   /* hover lift (+10% L) */
  --sunset-lo:     #E97A25;   /* pressed (−7% L) */
  --amber:         #FFB378;   /* icon/text on sunset-tinted surface */
  --sunset-wash:   rgba(255,139,51,0.20);  /* selected tree row, soft map highlight */
  --sunset-veil:   rgba(255,139,51,0.12);  /* accent toolbar bed, focus-ring */
  --sunset-hover:  rgba(255,139,51,0.18);  /* menu hover, active suggestion */

  /* ---------- 2 · Surfaces — Mountain Night ---------- */
  --midnight:      #021218;   /* bg of app, sidebar, topbar */
  --midnight-mist: rgba(2,18,24,0.94); /* glass overlay over map */
  --pinetop:       #061921;   /* raised — context-menu, search dropdown */
  --graphite:      #1E2C34;   /* tooltips, help bubble */
  --slate:         #2B3A43;   /* sidebar search pill bed */
  --deepsea:       #0D323F;   /* strong divider in dark chrome */

  /* ---------- 3 · Paper — light surfaces ---------- */
  --paper:         #E7E4E2;   /* warm off-white map paper */
  --bone:          #F4F4F2;   /* light preview-card bg (neutral) */
  --mist:          #E9EBE5;   /* icon-preview bg (cooler) */

  /* ---------- 4 · Map markers ---------- */
  --trail:         #FF8B33;   /* routes & tracks (== --sunset) */
  --forest:        #3EA46A;   /* POI, campsites */
  --harbor:        #5282C7;   /* cities, compass-S */
  --heather:       #AA5AC8;   /* raw coordinates, custom points */

  /* ---------- 5 · Signal — danger ---------- */
  --ember:         #FD5C40;   /* destructive, compass-N, alerts */
  --ember-wash:    rgba(253,92,64,0.15);   /* destructive hover */

  /* ---------- 6 · Ink alphas (text & dividers on dark) ---------- */
  --text-strong:   rgba(255,255,255,0.92);  /* titles, active rows */
  --text-body:     rgba(255,255,255,0.80);  /* primary UI body */
  --text-muted:    rgba(255,255,255,0.60);  /* metadata, default toolbar icons */
  --text-faint:    rgba(255,255,255,0.45);  /* uppercase section labels */
  --text-disabled: rgba(255,255,255,0.22);  /* disabled ghost controls */
  --hairline-strong: rgba(255,255,255,0.12);/* toolbar group divider */
  --hairline:      rgba(255,255,255,0.08);  /* default 1px divider */
  --wash:          rgba(255,255,255,0.04);  /* neutral hover tint */

  /* ---------- 7 · Shadows ---------- */
  --shadow-card:   2px 3px 4.7px rgba(0,0,0,0.33);
  --shadow-logo-glow: 0 0 9.9px rgba(0,0,0,1);
  --shadow-text:   0 2px 2px rgba(0,0,0,1);
  --shadow-inset-compass: inset 0 0 4px 2px rgba(0,0,0,0.26);
  --shadow-menu:   0 12px 28px rgba(0,0,0,0.45);


  /* ═══════════════════════════════════════════════════════════════
     LEGACY ALIASES — keep existing components working.
     New code should NOT use these — use the named tokens above.
  ═══════════════════════════════════════════════════════════════ */
  --ink-950:    var(--midnight);
  --ink-900:    rgb(7, 34, 44);
  --ink-800:    var(--deepsea);
  --ink-700:    rgb(17, 38, 56);
  --ink-600:    rgb(30, 55, 76);
  --ink-500:    var(--slate);
  --ink-ring:   var(--pinetop);

  --orange-500: var(--sunset);
  --orange-400: #F8954A;
  --orange-600: var(--ember);
  --orange-200: var(--sunset-wash);

  --blue-500:   rgb(1, 90, 184);
  --blue-300:   rgb(124, 151, 213);
  --blue-200:   rgb(156, 181, 255);
  --blue-hint:  rgba(88, 158, 238, 0.08);

  --white:      #ffffff;
  --gray-500:   rgb(156, 156, 156);
  --gray-400:   rgb(171, 171, 171);
  --gray-300:   rgb(217, 217, 217);
  --gray-200:   rgb(207, 207, 207);

  --on-ink-92:  var(--text-strong);
  --on-ink-80:  var(--text-body);
  --on-ink-60:  var(--text-muted);
  --on-ink-50:  rgba(255,255,255,0.50);
  --on-ink-40:  rgba(255,255,255,0.40);
  --on-ink-08:  var(--hairline);
  --on-ink-07:  rgba(255,255,255,0.07);

  --shadow-ink-33: rgba(0, 0, 0, 0.33);
  --shadow-ink-26: rgba(0, 0, 0, 0.26);
  --shadow-ink-25: rgba(0, 0, 0, 0.25);

  /* ---------- Typography ---------- */
  --font-display:  "PT Sans", Georgia, serif;
  --font-ui:       "PT Sans", Georgia, serif;
  --font-body:     "PT Sans", Georgia, serif;
  --font-caption:  "PT Sans", Georgia, serif;

  /* Fluid type scale (px values match the Figma) */
  --fs-logo:    64px;   /* PT Sans Bold — wordmark */
  --fs-compass: 26px;   /* PT Sans Bold — 3D compass face */
  --fs-h1:      20px;   /* PT Sans 400 — topbar search */
  --fs-h2:      16px;   /* PT Sans 700 — route title */
  --fs-body:    16px;   /* PT Sans 400 — chrome body */
  --fs-ui:      14px;   /* PT Sans 400 — tree rows */
  --fs-caption: 12px;   /* PT Sans 400 — placeholder, desc */

  /* ---------- Spacing (4pt grid) ---------- */
  --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-16: 64px;

  /* ---------- Radii ---------- */
  --radius-1:  4px;    /* tree rows, chips */
  --radius-2:  8px;    /* cards, sidebar search */
  --radius-3:  9px;    /* topbar pills */
  --radius-4:  10px;   /* tool-stack pills (left edge) */
  --radius-5:  18px;   /* license capsule (right edge) */
  --radius-pill: 999px;/* sidebar search input */

  /* ---------- Elevation ---------- */
  --shadow-chrome: 2px 3px 4.7px rgba(0, 0, 0, 0.33);
  --shadow-logo:   0 0 9.9px rgba(0, 0, 0, 1);
  --shadow-text:   0 2px 2px rgba(0, 0, 0, 1);
  --shadow-inset-compass: inset 0 0 4px 2px rgba(0, 0, 0, 0.26);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 240ms;

  /* ---------- Semantic aliases ---------- */
  --bg-page:     var(--white);
  --bg-chrome:   var(--midnight);
  --bg-chrome-94: var(--midnight-mist);
  --bg-sidebar-search: var(--slate);
  --bg-selected: var(--sunset-wash);

  --fg-primary:   var(--text-strong);
  --fg-body:      var(--text-body);
  --fg-muted:     var(--text-muted);
  --fg-disabled:  var(--text-disabled);

  --accent:       var(--sunset);
  --accent-soft:  var(--orange-400);
  --divider:      var(--hairline);
  --divider-strong: var(--hairline-strong);
}

/* ---------- Semantic element defaults ---------- */
.kt-logo {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-logo);
  line-height: 1;
  color: var(--accent);
  text-shadow: var(--shadow-logo);
  letter-spacing: 0;
}
.kt-h1 {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--fg-muted);
}
.kt-h2 {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--on-ink-92);
}
.kt-body {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--fg-body);
}
.kt-ui {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-ui);
  line-height: 20px;
  color: var(--fg-body);
}
.kt-caption {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 17px;
  color: var(--gray-400);
}
.kt-overline {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}