/* =========================================================================
   Konotop IT Cluster — Design Tokens
   Ported 1:1 from the canonical design-system.html / index.html prototype.
   Single source of truth: colors, type, spacing, radii, rules.

   Brand rules (from the design system "Do & Don't"):
   • One accent + one neutral at a time. Yellow highlight is a spot only.
   • Content cards are SHARP (radius 0). Pills (999px) are for buttons only.
   • Hairline rules (1px rgba .14) divide — no boxes within boxes.
   • Playfair Display italic = accent words only — never bold it.
   • Hex mark as background ≤ 12% opacity.
   ========================================================================= */

:root {
  /* ---- Electric · primary (light) ------------------------------------- */
  --bg:       #F2EFE7;   /* Paper · base            */
  --bg-2:     #E8E4D8;   /* Paper-2 · alt surface   */
  --ink:      #0E0E10;   /* Ink · headings/text     */
  --ink-2:    #2A2A2E;   /* Ink-2 · body            */
  --muted:    #5C5C63;   /* Muted · meta (≥4.5:1 on --bg for a11y) */
  --card:     #FFFFFF;   /* Card surfaces           */
  --paper:    #FBF9F3;

  --accent:   #2A4BFF;   /* Electric blue           */
  --accent-2: #FFCC00;   /* Yellow highlight (spot) */
  --hex:      #2A4BFF;   /* Hex-mark fill           */

  --rule:     rgba(14, 14, 16, .14);  /* hairline dividers */
  --rule-2:   rgba(14, 14, 16, .06);  /* faint dividers    */

  --accent-ink: #FFFFFF; /* text on --accent */
  --accent-2-ink: #0E0E10; /* text on --accent-2 (yellow) — dark in both themes */

  /* ---- Typography (self-hosted, full Ukrainian Cyrillic — see fonts.css) */
  /* Sans head: e-Ukraine — headings, big numbers, wordmark.                */
  /* Sans body: Fixel Text (MacPaw) — running text, UI, forms.              */
  /* Display:   Playfair Display italic — accent words, leads, quotes.      */
  /* Mono:      JetBrains Mono 400/500 — meta, tags, dates (UPPER, tracked).*/
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans:    "e-Ukraine", "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Fixel Text", "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Spacing — base-4 ----------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  56px;
  --space-7:  80px;
  --space-8:  120px;

  /* ---- Radii — sharp content, pill buttons ---------------------------- */
  --radius-0:    0;       /* content cards            */
  --radius-sm:   2px;
  --radius:      6px;
  --radius-pill: 999px;   /* buttons only             */

  /* ---- Layout --------------------------------------------------------- */
  --container:    1440px;
  --pad:          40px;   /* desktop gutter           */
  --pad-mobile:   20px;   /* ≤ 700px gutter           */

  /* ---- z-index -------------------------------------------------------- */
  --z-nav:    40;
  --z-overlay: 80;

  --transition: .25s ease;
}

/* =========================================================================
   Dark mode — toggled via [data-theme="dark"] on <html> (assets/js/theme.js)
   ========================================================================= */
[data-theme="dark"] {
  --bg:     #0B0B0E;
  --bg-2:   #14141A;
  --ink:    #F2EFE7;
  --ink-2:  #C9C7C0;
  --muted:  #8A8A92;
  --card:   #1A1A22;
  --paper:  #14141A;
  --rule:   rgba(242, 239, 231, .16);
  --rule-2: rgba(242, 239, 231, .06);
}

/* =========================================================================
   Ukraine · alt palette — governmental / official / patriotic contexts only.
   Toggled via [data-palette="ukraine"] on <html>.
   ========================================================================= */
[data-palette="ukraine"] {
  --accent:   #005BBB;
  --accent-2: #FFD500;
  --hex:      #005BBB;
}
[data-palette="electric"] {
  --accent:   #2A4BFF;
  --accent-2: #FFCC00;
  --hex:      #2A4BFF;
}

/* Sky — the official logo blue (#5FB1E9). Used for the mark, esp. on dark. */
[data-palette="sky"] {
  --accent:   #5FB1E9;
  --accent-2: #FFCC00;
  --hex:      #5FB1E9;
}

/* Respect reduced motion — neutralise the token AND any hard-coded
   transitions/animations (arrows, buttons, ticker, smooth scroll). */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}