/* ============================================================
   KOGNAI — Tokens (color + type)
   v2.2 — Inter Tight + JetBrains Mono.

   The visible boundary between humanist sans and machine-honest mono
   IS the brand: humans wrote the philosophy, machines read the protocol.

   Prior pairing (Cormorant Garamond / Sora / IBM Plex Mono) is retired.
   Legacy --font-serif token preserved as alias to --font-sans so cascading
   callers keep rendering.

   FONT HOSTING: self-hosted at /fonts/ — no third-party CDN, no
   privacy leakage. Variable fonts: 4 files (~582 KB) cover all weights
   via the `font-weight: <min> <max>` range declarations below.

   Updated: 2026-05-23 (self-hosted migration)
   ============================================================ */

/* ============ @font-face — self-hosted (no CDN) ============
   Inter Tight + JetBrains Mono variable fonts. The browser interpolates
   weight values between the declared min/max ranges. Italic variants
   have their own files. */

@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-vf.woff2') format('woff2-variations'),
       url('/fonts/inter-tight-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-vf-italic.woff2') format('woff2-variations'),
       url('/fonts/inter-tight-vf-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-vf.woff2') format('woff2-variations'),
       url('/fonts/jetbrains-mono-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-vf-italic.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============ COLOR — SURFACE (deep navy, sampled from logo) ============ */
  --void:        #091C2B;   /* primary background. Logo canvas exactly. */
  --void-2:      #06151F;   /* recessed panel (slightly darker) */
  --void-3:      #0E2A3D;   /* raised tablet */
  --void-edge:   #1B3A53;   /* hairlines, engraved seams */

  /* ============ COLOR — FOREGROUND (cool bone) ============ */
  --bone:        #E4EDEC;   /* primary text — cool cream, slight teal tint */
  --bone-2:      #A3B5B3;   /* secondary */
  --bone-3:      #6A7C7A;   /* tertiary / meta */
  --bone-4:      #3D4F4D;   /* disabled / deep meta */

  /* ============ COLOR — ACCENT — jade (singular, sampled from logo) ============ */
  --jade:        #26BEB7;   /* primary accent — the brand teal exactly */
  --jade-hot:    #4DD9D2;   /* hover */
  --jade-deep:   #1A8B86;   /* pressed / underline rest */

  /* legacy aliases kept so previously-written cards keep rendering */
  --bronze:      var(--jade);
  --bronze-hot:  var(--jade-hot);
  --bronze-deep: var(--jade-deep);

  /* ============ COLOR — SIGNAL (data only) ============ */
  --ember:       #D85345;   /* critical / alert */
  --phosphor:    #8FCB7A;   /* live / passing / on-chain */
  --ink:         #5685B8;   /* informational / footnote */

  /* ============ COLOR — NEON (mascot + status glyphs only) ============ */
  --jade-glow:       rgba(77, 217, 210, 0.55);
  --jade-glow-soft:  rgba(38, 190, 183, 0.18);
  --neon-bone-sheen: rgba(228, 237, 236, 0.85);

  /* ============ TYPE — FAMILIES (v2.2) ============ */
  --font-sans:   'Inter Tight', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* legacy alias — pre-2.2 surfaces called for var(--font-serif).
     Inter Tight is now the body face; alias keeps cascade intact. */
  --font-serif:  var(--font-sans);

  /* ============ TYPE — SCALE (Inter Tight) ============
     Display 96/72 · H 48/36/24/20 · Body 18/16/14 · Caption 12 */
  --t-display-1: 96px;  --t-display-1-lh: 0.95; --t-display-1-wt: 600; --t-display-1-tk: -0.02em;
  --t-display-2: 72px;  --t-display-2-lh: 1.00; --t-display-2-wt: 500; --t-display-2-tk: -0.015em;
  --t-display-3: 56px;  --t-display-3-lh: 1.05; --t-display-3-wt: 500; --t-display-3-tk: -0.01em;
  --t-h1:        48px;  --t-h1-lh:        1.10; --t-h1-wt:        600; --t-h1-tk:        -0.01em;
  --t-h2:        36px;  --t-h2-lh:        1.15; --t-h2-wt:        600; --t-h2-tk:        -0.005em;
  --t-h3:        24px;  --t-h3-lh:        1.30; --t-h3-wt:        500; --t-h3-tk:         0;
  --t-h4:        20px;  --t-h4-lh:        1.40; --t-h4-wt:        500; --t-h4-tk:         0;
  --t-body-lg:   18px;  --t-body-lg-lh:   1.55; --t-body-lg-wt:   400;
  --t-body:      16px;  --t-body-lh:      1.60; --t-body-wt:      400;
  --t-body-sm:   14px;  --t-body-sm-lh:   1.55; --t-body-sm-wt:   400;
  --t-caption:   12px;  --t-caption-lh:   1.40; --t-caption-wt:   500; --t-caption-tk:    0.05em;

  /* legacy size aliases — pre-2.2 surfaces */
  --t-meta:      13px;  --t-meta-lh:   1.4;
  --t-micro:     11px;  --t-micro-lh:  1.4;

  /* ============ TYPE — SCALE (JetBrains Mono) ============ */
  --t-mono:      14px;  --t-mono-lh:   1.6;
  --t-mono-sm:   12px;  --t-mono-sm-lh: 1.5;

  /* ============ TYPE — TRACKING ============ */
  --track-display:    -0.01em;
  --track-heading:    -0.015em;
  --track-kicker:     0.24em;
  --track-wordmark:   0.18em;
  --track-smallcaps:  0.12em;
  --track-micro:      0.18em;
  --track-caption:    0.05em;
  --track-body:       0;

  /* ============ SPACING ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ============ RADII ============ */
  --r-0: 0;
  --r-1: 2px;

  /* ============ BORDER ============ */
  --hairline: 1px solid var(--void-edge);
  --hairline-strong: 1px solid var(--bone-4);

  /* ============ MOTION ============ */
  --ease-default: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-state: 180ms;
  --dur-enter: 400ms;

  /* ============ MOTION — AMBIENT (mascot + live data only) ============
     180ms / 400ms own all chrome + state changes.
     Below are reserved for: mascot state overlays, live data indicators,
     ticker. NEVER body, nav, buttons, or marketing surfaces. */
  --dur-ambient-fast: 1.4s;
  --dur-ambient:      1.8s;
  --dur-ambient-slow: 2.4s;
  --ease-ambient:     ease-in-out;

  /* ============ STATE GLYPH SEMANTICS (runtime states) ============ */
  --state-thinking:   var(--jade);
  --state-processing: var(--jade);
  --state-listening:  var(--jade);
  --state-speaking:   var(--jade);
  --state-alert:      var(--ember);
  --state-stalled:    var(--bone-3);
  --state-error:      var(--ember);
  --state-happy:      var(--phosphor);

  /* ============ ELEVATION ============ */
  --shadow-none: none;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — apply via .kgn-doc { … }
   ============================================================ */
.kgn-doc {
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kgn-doc h1, .kgn-doc h2, .kgn-doc h3, .kgn-doc h4 {
  font-family: var(--font-sans);
  color: var(--bone);
  margin: 0;
}
.kgn-doc h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: var(--t-h1-wt); letter-spacing: var(--t-h1-tk); }
.kgn-doc h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: var(--t-h2-wt); letter-spacing: var(--t-h2-tk); }
.kgn-doc h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: var(--t-h3-wt); letter-spacing: var(--t-h3-tk); }
.kgn-doc h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); font-weight: var(--t-h4-wt); letter-spacing: var(--t-h4-tk); }

.kgn-doc p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--bone-2);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

.kgn-doc code, .kgn-doc kbd, .kgn-doc samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--bone);
  background: var(--void-2);
  padding: 1px 6px;
  border: var(--hairline);
  border-radius: var(--r-1);
}

.kgn-doc pre code {
  display: block;
  font-size: var(--t-mono);
  font-weight: 400;
  line-height: var(--t-mono-lh);
  padding: var(--space-4);
  background: var(--void-2);
}

/* ============================================================
   UTILITY CLASSES — composable, opt-in
   ============================================================ */
.kgn-display    { font-family: var(--font-sans); font-weight: var(--t-display-1-wt); font-size: var(--t-display-1); line-height: var(--t-display-1-lh); letter-spacing: var(--t-display-1-tk); }
.kgn-display-2  { font-family: var(--font-sans); font-weight: var(--t-display-2-wt); font-size: var(--t-display-2); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-tk); }
.kgn-display-3  { font-family: var(--font-sans); font-weight: var(--t-display-3-wt); font-size: var(--t-display-3); line-height: var(--t-display-3-lh); letter-spacing: var(--t-display-3-tk); }

.kgn-h1         { font-family: var(--font-sans); font-weight: var(--t-h1-wt); font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tk); }
.kgn-h2         { font-family: var(--font-sans); font-weight: var(--t-h2-wt); font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tk); }
.kgn-h3         { font-family: var(--font-sans); font-weight: var(--t-h3-wt); font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tk); }
.kgn-h4         { font-family: var(--font-sans); font-weight: var(--t-h4-wt); font-size: var(--t-h4); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-tk); }

.kgn-body-lg    { font-family: var(--font-sans); font-weight: var(--t-body-lg-wt); font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); color: var(--bone); }
.kgn-body       { font-family: var(--font-sans); font-weight: var(--t-body-wt);    font-size: var(--t-body);    line-height: var(--t-body-lh);    color: var(--bone-2); }
.kgn-body-sm    { font-family: var(--font-sans); font-weight: var(--t-body-sm-wt); font-size: var(--t-body-sm); line-height: var(--t-body-sm-lh); color: var(--bone-2); }

.kgn-caption    { font-family: var(--font-sans); font-weight: var(--t-caption-wt); font-size: var(--t-caption); line-height: var(--t-caption-lh); color: var(--bone-3); letter-spacing: var(--t-caption-tk); text-transform: uppercase; }

/* legacy aliases — pre-2.2 callers */
.kgn-meta       { font-family: var(--font-sans); font-size: var(--t-meta); line-height: var(--t-meta-lh); color: var(--bone-3); letter-spacing: 0; }
.kgn-micro      { font-family: var(--font-sans); font-size: var(--t-micro); line-height: var(--t-micro-lh); color: var(--bone-3); letter-spacing: var(--track-micro); text-transform: uppercase; }

.kgn-wordmark   { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--track-wordmark); color: var(--bone); text-transform: uppercase; }

.kgn-mono       { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; line-height: var(--t-mono-lh); font-variant-numeric: tabular-nums; }
.kgn-mono-sm    { font-family: var(--font-mono); font-size: var(--t-mono-sm); font-weight: 400; line-height: var(--t-mono-sm-lh); font-variant-numeric: tabular-nums; }

.kgn-ticket     { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.kgn-smallcaps  { font-variant-caps: all-small-caps; letter-spacing: var(--track-smallcaps); }
.kgn-italic     { font-style: italic; color: var(--bone-2); }

.kgn-marginalia { font-family: var(--font-mono); font-size: var(--t-mono-sm); color: var(--bone-3); letter-spacing: var(--track-micro); text-transform: uppercase; }

/* ============================================================
   NEON TUBE — utility classes (mascot + status glyphs only)
   ============================================================ */
.kgn-neon-tube {
  filter:
    drop-shadow(0 0 6px var(--jade-glow))
    drop-shadow(0 0 14px var(--jade-glow-soft));
}

.kgn-neon-field {
  background:
    radial-gradient(55% 55% at 50% 45%, var(--jade-glow-soft) 0%, transparent 70%);
}

/* ============================================================
   AMBIENT MOTION — keyframes (mascot + live data only)
   ============================================================ */
@keyframes kgn-blink {
  0%, 40% { opacity: 0.2 }
  50%     { opacity: 1 }
  60%,100%{ opacity: 0.2 }
}
@keyframes kgn-pulse {
  0%, 100% { opacity: 0.55 }
  50%      { opacity: 1 }
}
@keyframes kgn-spin {
  to { transform: rotate(360deg) }
}
@keyframes kgn-drift {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-3px) }
}