/* =========================================================
   Kernel Design System — Colors & Type
   A design system for technical presentations.
   ========================================================= */

/* =========================================================
   Brand fonts — self-hosted from ./fonts/
   Open source: Geist (OFL), JetBrains Mono (OFL), Instrument Serif (OFL)
   ========================================================= */
@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-VariableItalic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('./fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('./fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOR — Base surfaces
     A warm-biased near-black, inspired by a terminal viewed
     through amber phosphor CRT nostalgia.
     ========================================================= */
  --bg-0: #0a0a0b;            /* deepest — outside the stage */
  --bg-1: #121113;            /* slide canvas (default) */
  --bg-2: #1a181c;            /* card / elevated surface */
  --bg-3: #232026;            /* higher elevation / inputs */
  --bg-inverse: #f6f3ec;      /* warm off-white for light mode slides */

  /* =========================================================
     COLOR — Foreground
     Warm-biased whites. Do not use pure white.
     ========================================================= */
  --fg-1: #f6f3ec;            /* primary text — warm off-white */
  --fg-2: #b9b3a7;            /* secondary text — muted */
  --fg-3: #7a7569;            /* tertiary / labels / captions */
  --fg-4: #4a4740;            /* quaternary / dividers on dark */
  --fg-inverse: #121113;      /* on light backgrounds */

  /* =========================================================
     COLOR — Signal (primary brand accent)
     Amber — the signal color. Used sparingly, for emphasis,
     the active/running state, and CTAs.
     ========================================================= */
  --signal-50:  #fdf4d4;
  --signal-100: #fbe79a;
  --signal-300: #f6cf48;
  --signal-500: #e5b317;      /* base amber */
  --signal-600: #c79408;      /* hover */
  --signal-700: #9a7305;
  --signal: var(--signal-500);

  /* =========================================================
     COLOR — Accent (secondary, technical)
     Electric mint/cyan — used for positive state, links,
     code highlighting accents. Echoes a terminal cursor.
     ========================================================= */
  --accent-300: #8ef0c3;
  --accent-500: #4adba0;
  --accent-700: #19a673;
  --accent: var(--accent-500);

  /* =========================================================
     COLOR — Semantic
     ========================================================= */
  --success: #4adba0;
  --warning: #e5b317;
  --danger:  #ff6a5b;
  --info:    #7aa2ff;

  /* =========================================================
     COLOR — Syntax highlighting
     For code blocks. Tuned to the warm palette.
     ========================================================= */
  --syn-keyword:  #e5b317;   /* amber — keywords */
  --syn-string:   #4adba0;   /* mint — strings */
  --syn-number:   #ffb37a;   /* peach — numbers */
  --syn-comment:  #7a7569;   /* muted — comments */
  --syn-fn:       #7aa2ff;   /* blue — functions */
  --syn-type:     #c78eff;   /* lavender — types */
  --syn-punct:    #b9b3a7;   /* fg-2 — punctuation */

  /* =========================================================
     COLOR — Data viz
     Seven-step qualitative ramp, starts with signal.
     ========================================================= */
  --chart-1: #e5b317;
  --chart-2: #4adba0;
  --chart-3: #7aa2ff;
  --chart-4: #c78eff;
  --chart-5: #ff6a5b;
  --chart-6: #ffb37a;
  --chart-7: #8ef0c3;

  /* =========================================================
     TYPE — Families
     ========================================================= */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* =========================================================
     TYPE — Sizes (slide scale, optimized for 1920×1080)
     ========================================================= */
  --fs-display:  140px;   /* D1 — hero slides */
  --fs-h1:       96px;    /* title slides */
  --fs-h2:       64px;    /* section headers */
  --fs-h3:       44px;    /* slide titles */
  --fs-h4:       32px;    /* sub-headings */
  --fs-lg:       28px;    /* lead / large body */
  --fs-body:     24px;    /* default slide body */
  --fs-sm:       20px;    /* secondary slide text */
  --fs-label:    16px;    /* labels, captions */
  --fs-mono-sm:  18px;    /* inline code */
  --fs-mono:     22px;    /* block code on slides */

  /* =========================================================
     TYPE — Weights, tracking, leading
     ========================================================= */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --ls-tight:    -0.03em;  /* display */
  --ls-snug:     -0.02em;  /* headings */
  --ls-normal:   -0.005em; /* body */
  --ls-label:    0.08em;   /* LABELS — UPPERCASE */
  --ls-mono:     0em;

  --lh-tight:    1.02;
  --lh-snug:     1.15;
  --lh-body:     1.4;
  --lh-loose:    1.6;

  /* =========================================================
     SPACING — 4px base scale
     ========================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* =========================================================
     RADII
     Favor small or none — technical, not soft.
     ========================================================= */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* =========================================================
     ELEVATION — shadow + hairline
     Dark UI relies more on hairlines than shadows.
     ========================================================= */
  --hair:        1px solid rgba(246, 243, 236, 0.08);
  --hair-strong: 1px solid rgba(246, 243, 236, 0.14);
  --hair-signal: 1px solid rgba(229, 179, 23, 0.4);
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-signal: 0 0 0 3px rgba(229, 179, 23, 0.2);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* =========================================================
   SEMANTIC TYPE ROLES
   Use these class-equivalent selectors in components.
   ========================================================= */
.k-display, [data-type="display"] {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.k-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.k-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.k-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.k-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.k-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}
.k-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.k-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Accent italic — used for ONE-word emphasis within a heading */
.k-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
  letter-spacing: 0;
}

/* Labels — uppercase, tracked mono */
.k-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-3);
}

/* Code */
.k-code, code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}
pre.k-block {
  font-size: var(--fs-mono);
  line-height: 1.55;
  padding: var(--s-6);
  background: var(--bg-2);
  border: var(--hair);
  border-radius: var(--r-3);
  overflow: auto;
}

/* KBD-style chip */
.k-kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  border: var(--hair-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-2);
  background: var(--bg-3);
  color: var(--fg-2);
}

/* =========================================================
   RESET-ISH for design-system demos
   ========================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* Selection — amber signal */
::selection { background: var(--signal); color: var(--bg-0); }