/* ============================================================
   LenkoLab — Design Tokens v1.0
   Drop-in CSS custom properties. Import once at :root.
   Source of truth: LenkoLab Brand Book v1.0 (May 2026).
   ============================================================ */

:root {
  /* ---------- Color · Brand ---------- */
  --lk-indigo:      #1E3A8A;  /* primary — logo, headings, key accents, active elements */
  --lk-blue:        #2563EB;  /* working — links, hover, CTA buttons, interactive */
  --lk-amber:       #D97706;  /* warm accent — used sparingly: one element per screen max */

  /* ---------- Color · Neutral ---------- */
  --lk-ink:         #0F172A;  /* primary text, dark surfaces, hero sections */
  --lk-slate:       #475569;  /* secondary text, descriptions, captions */
  --lk-slate-2:     #64748B;  /* tertiary text, meta labels */
  --lk-mist:        #F1F5F9;  /* card surface, block fills, dividers */
  --lk-line:        #E2E8F0;  /* borders, hairlines */
  --lk-line-soft:   #EEF2F6;  /* subtle inner borders */
  --lk-white:       #FFFFFF;  /* primary background */

  /* ---------- Typography · Families ---------- */
  --lk-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lk-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --lk-font-serif:  'Source Serif 4', Georgia, 'Times New Roman', serif; /* long-form article body only */

  /* ---------- Typography · Scale (web) ---------- */
  --lk-text-display: 56px;  /* H1 Display — line-height 1.1, weight 700 */
  --lk-text-h1:      36px;  /* line-height 1.2, weight 700 */
  --lk-text-h2:      24px;  /* line-height 1.3, weight 600 */
  --lk-text-h3:      18px;  /* line-height 1.4, weight 600 */
  --lk-text-body-l:  18px;  /* line-height 1.6, weight 400 */
  --lk-text-body:    16px;  /* line-height 1.6, weight 400 */
  --lk-text-small:   14px;  /* line-height 1.5, weight 400 */
  --lk-text-caption: 12px;  /* line-height 1.4, weight 500, uppercase, +0.05em tracking */

  /* ---------- Typography · Weights ---------- */
  --lk-weight-regular:  400;
  --lk-weight-medium:   500;
  --lk-weight-semibold: 600;
  --lk-weight-bold:     700;

  /* ---------- Spacing · base unit = 4px ---------- */
  --lk-space-1:  4px;
  --lk-space-2:  8px;
  --lk-space-3:  12px;
  --lk-space-4:  16px;
  --lk-space-6:  24px;
  --lk-space-8:  32px;
  --lk-space-12: 48px;
  --lk-space-16: 64px;

  /* ---------- Radius ---------- */
  --lk-radius-sm:  4px;
  --lk-radius-md:  6px;
  --lk-radius-lg:  8px;
  --lk-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --lk-border:     1px solid var(--lk-line);

  /* ---------- Motion ---------- */
  --lk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --lk-dur-fast:   120ms;
  --lk-dur-base:   150ms;
  --lk-dur-slow:   250ms;

  /* ---------- Layout ---------- */
  --lk-container:  1240px;  /* max content width */
  --lk-gutter:     48px;    /* horizontal page padding (desktop) */
}

/*
  NOTE — the brand uses NO gradients, NO shadows, NO 3D effects on brand elements.
  Surfaces are flat. Depth is communicated through 1px hairlines and the Mist fill,
  not drop-shadows. See "Don'ts" in the brand book.

  60–30–10 color rule:
    60% neutral (white, Mist, Ink) · 30% Indigo · 10% accent (Blue OR Amber, not both).
  Amber and Blue are never combined inside the same module.
*/