/* KAHN Design Tokens — shared by kahn.tools and kahn.run
 * 
 * LICENSING NOTE (§1.2 kahn-landing.md):
 * Current fonts are free fallbacks via Google Fonts:
 *   - Fraunces (display)
 *   - Source Serif 4 (body)
 *   - JetBrains Mono (mono)
 *
 * At production launch, swap to paid Klim foundry fonts:
 *   - Söhne Breit (display) — replace Fraunces
 *   - Tiempos Text (body) — replace Source Serif 4
 *   - Berkeley Mono (mono) — replace JetBrains Mono
 *
 * No changes to custom property names or fallback chains required.
 */

:root {
  /* ========== PALETTE (§1.1) ========== */
  /* Near-black with +2 warmth undertone */
  --k-ink-00:        #0b0c0d;
  /* Elevated surface: cards, code blocks */
  --k-ink-05:        #111214;
  /* Elevated +1: hover states, focus backgrounds */
  --k-ink-10:        #191b1e;
  /* Dividers, inactive edges */
  --k-ink-20:        #2a2d31;
  /* Muted text, metadata, captions */
  --k-ink-40:        #4b5058;
  /* Secondary text, fine print */
  --k-ink-60:        #7d844d;
  /* Body text */
  --k-ink-80:        #c4c8cd;
  /* Primary text, headings */
  --k-ink-95:        #e8eaec;
  /* Warm off-white; reserved for accents only */
  --k-bone:          #f4f0e8;

  /* Hot accent — hero DAG active node, install-command underline, link hover.
   * Appears at most THREE TIMES per viewport (§1.1 usage rules). */
  --k-amber:         #ffb547;
  /* 13% alpha amber for halos and soft highlights */
  --k-amber-glow:    #ffb54722;
  /* Text colour on solid amber backgrounds */
  --k-amber-ink:     #3a2608;

  /* DAG edges only. Teal. Never for UI chrome.
   * Reserved for visualisations: edges, inactive nodes in DAGs. */
  --k-wire:          #3aa99f;

  /* Error/failure state. Used exactly once per site (kahn.run only).
   * Never in body copy, never as primary affordance. */
  --k-fail:          #e85c4a;

  /* ========== TYPE FACES (§1.2) ========== */
  /* Display/headline face. Fallback chain prioritises monospace
   * because if display font fails to load, the site should look like KAHN,
   * not like a generic serif doc. */
  --k-display:       "Fraunces", "JetBrains Mono", ui-monospace, monospace;

  /* Serif body copy. Deliberate choice for comprehension at length.
   * Reinforces "this is an engineering document, not a SaaS deck" positioning. */
  --k-body:          "Source Serif 4", "Georgia", "Charter", serif;

  /* Monospace. Mono is the product's native tongue.
   * Never alter letter-spacing on mono. */
  --k-mono:          "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ========== TYPE SCALE (§1.2) — modular, ratio 1.25 ========== */
  --k-t-xs:   0.75rem;    /* 12px  — metadata, copyright, status dots */
  --k-t-sm:   0.875rem;   /* 14px  — captions, nav, inline code */
  --k-t-base: 1rem;       /* 16px  — body */
  --k-t-md:   1.25rem;    /* 20px  — lede paragraph, section intro */
  --k-t-lg:   1.5625rem;  /* 25px  — H3 */
  --k-t-xl:   2.441rem;   /* 39px  — H2 */
  --k-t-2xl:  3.815rem;   /* 61px  — H1 (kahn.tools only) */
  --k-t-3xl:  5.96rem;    /* 95px  — hero monogram (kahn.tools only) */

  /* ========== LINE HEIGHT & TRACKING (§1.2) ========== */
  /* Display: tight (1.02). Used for headlines at high point sizes. */
  --k-lh-display: 1.02;
  /* Body: generous (1.55). Used for long-form copy. */
  --k-lh-body:    1.55;
  /* Mono: standard (1.5). Code, command blocks. */
  --k-lh-mono:    1.5;

  /* Letter-spacing (tracking). Never alter mono tracking (use 0). */
  --k-track-display: -0.035em;  /* Display: tight */
  --k-track-body:    -0.005em;  /* Body: near-zero */
  --k-track-mono:    0;         /* Mono: never touch */

  /* ========== SPACE — 8px base unit (§1.3) ========== */
  --k-s-1:  4px;     --k-s-2:  8px;    --k-s-3:  12px;
  --k-s-4:  16px;    --k-s-6:  24px;   --k-s-8:  32px;
  --k-s-12: 48px;    --k-s-16: 64px;   --k-s-24: 96px;
  --k-s-32: 128px;   --k-s-48: 192px;

  /* ========== LAYOUT METRICS (§1.3) ========== */
  /* Max content width */
  --k-max-width:     1240px;
  /* Gutter from viewport edge: dynamic clamp for responsiveness */
  --k-gutter:        clamp(24px, 5vw, 80px);
  /* Max line length for body copy (readability cap, regardless of viewport) */
  --k-ch-max:        68ch;
  /* Narrower column max (kahn.run) */
  --k-ch-narrow:     58ch;

  /* ========== MOTION (§1.4) ========== */
  --k-dur-1:   80ms;    /* Instant feedback: hover, focus */
  --k-dur-2:   160ms;   /* State change: button press, tab switch */
  --k-dur-3:   320ms;   /* Layout transition: accordion, reveal */
  --k-dur-4:   640ms;   /* Orchestrated sequences: hero entrance */

  /* Cubic-bezier easings. No keyword easings (ease, ease-in-out).
   * No springs, bounces, elastic animations. */
  --k-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* Mechanical arrival */
  --k-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);  /* State crossfade */

  /* Brand heartbeat: the cursor blink and DAG active-node pulse.
   * Constant across all animations. */
  --k-heartbeat:     1.2s;

  /* ========== RADIUS (§1.5) ========== */
  /* Single radius value: 2px. Used sparingly on code blocks, buttons.
   * Hero DAG nodes are perfect circles (50%). Everything else square. */
  --k-r:             2px;

  /* ========== BORDERS & DIVIDERS (§1.5) ========== */
  /* Canonical hairline divider. Thickness never increases. */
  --k-border:        1px solid var(--k-ink-20);

  /* ========== SHADOWS (§1.5) — exactly two ========== */
  /* Hairline shadow: subtle depth on edge */
  --k-shadow-1:  0 1px 0 0 var(--k-ink-20);

  /* Lifted card: used on code blocks, Scope mock, major surfaces.
   * Two-layer composition: soft drop shadow + hairline edge. */
  --k-shadow-2:  0 24px 48px -24px rgba(0, 0, 0, 0.6),
                 0 1px 0 0 var(--k-ink-20);

  /* ========== GRID (§1.3) — responsive breakpoints ========== */
  /* Mobile: 320–719px — single column */
  --k-bp-mobile:     319px;
  /* Tablet: 720–1119px — 6-column grid */
  --k-bp-tablet:     719px;
  /* Desktop: 1120px+ — 12-column grid */
  --k-bp-desktop:    1119px;

  /* Column widths at desktop (12-column grid, 1240px max, 24px gutter) */
  --k-col-desktop:   calc((1240px - (11 * 24px)) / 12);
}

/* ========== REDUCED MOTION (§1.4 + A11Y-05) ========== */
/* Disables all --k-dur-3 and --k-dur-4 animations unconditionally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --k-dur-3: 0ms;
    --k-dur-4: 0ms;
  }
}

/* ========== FONT IMPORTS (§1.2 + BUILD-03) ========== */
/* Free fallbacks from Google Fonts. Swap to self-hosted or paid at production. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Source+Serif+4:ital,opsz,wght@0,8..72,400;0,8..72,600;1,8..72,400&family=JetBrains+Mono:ital,wght@0,400;0,600;1,400&display=swap');

/* Note on self-hosting: Once these fonts are licensed/downloaded, remove the @import above
 * and replace with local @font-face blocks. Use glyphhanger or equivalent for subsetting.
 * Format: .woff2 only (BUILD-03). No .woff, .ttf, or other formats.
 *
 * Example swap pattern (do this at production):
 * @font-face {
 *   font-family: "Fraunces";
 *   src: url('/fonts/fraunces-700.woff2') format('woff2');
 *   font-weight: 700;
 *   font-display: swap;
 * }
 */