/* ============================================================
   K-tronik Design System — Color + Type Tokens
   ============================================================
   Source of truth for the lime-on-black brand. Import this file
   first, then layer component styles on top.

   Fonts loaded via Google Fonts (substitute — see fonts/README).
   ============================================================ */

:root {
  /* ---------- BRAND CORE ---------- */
  --kt-lime:        #cafd2c;   /* primary accent. The whole brand. */
  --kt-lime-bright: #d8ff4d;   /* hover / brighter highlight */
  --kt-lime-dim:    #9ec820;   /* pressed / darker accent */
  --kt-lime-soft:   #e6ff8a;   /* very soft tint, focus rings */

  --kt-black:       #000000;   /* canvas. The brand is BLACK first. */
  --kt-ink:         #0a0a0a;   /* near-black for layered surfaces */
  --kt-coal:        #141414;   /* card / panel surface on black */
  --kt-graphite:    #1f1f1f;   /* elevated panel */
  --kt-iron:        #2a2a2a;   /* hairlines, dividers on dark */
  --kt-steel:       #3a3a3a;   /* stronger dividers, disabled bg */

  --kt-white:       #ffffff;
  --kt-paper:       #f5f5f5;   /* light-mode canvas */
  --kt-bone:        #ececec;   /* light-mode panel */
  --kt-fog:         #d4d4d4;   /* light-mode hairline */

  /* ---------- SEMANTIC FOREGROUND (on dark) ---------- */
  --kt-fg-1: #ffffff;          /* primary text on black */
  --kt-fg-2: #c8c8c8;          /* secondary text */
  --kt-fg-3: #8a8a8a;          /* tertiary, captions */
  --kt-fg-4: #5a5a5a;          /* disabled, placeholder */
  --kt-fg-accent: var(--kt-lime);

  /* ---------- SEMANTIC FOREGROUND (on light) ---------- */
  --kt-fg-1-light: #0a0a0a;
  --kt-fg-2-light: #3a3a3a;
  --kt-fg-3-light: #6a6a6a;
  --kt-fg-4-light: #a0a0a0;

  /* ---------- SEMANTIC BACKGROUNDS ---------- */
  --kt-bg:          var(--kt-black);
  --kt-bg-elev-1:   var(--kt-coal);
  --kt-bg-elev-2:   var(--kt-graphite);
  --kt-bg-light:    var(--kt-paper);

  /* ---------- BORDERS ---------- */
  --kt-border:        var(--kt-iron);
  --kt-border-strong: var(--kt-steel);
  --kt-border-accent: var(--kt-lime);

  /* ---------- STATE COLORS ---------- */
  --kt-success: #4ade80;
  --kt-warning: #facc15;
  --kt-danger:  #ef4444;
  --kt-info:    #38bdf8;

  /* ---------- TYPOGRAPHY ---------- */
  --kt-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  --kt-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --kt-font-display: 'JetBrains Mono', ui-monospace, monospace; /* mono is the brand voice */

  --kt-fs-12: 12px;
  --kt-fs-14: 14px;
  --kt-fs-16: 16px;
  --kt-fs-18: 18px;
  --kt-fs-20: 20px;
  --kt-fs-24: 24px;
  --kt-fs-32: 32px;
  --kt-fs-40: 40px;
  --kt-fs-56: 56px;
  --kt-fs-72: 72px;
  --kt-fs-96: 96px;

  --kt-lh-tight:  1.05;
  --kt-lh-snug:   1.2;
  --kt-lh-normal: 1.45;
  --kt-lh-loose:  1.7;

  --kt-tracking-tight:  -0.02em;
  --kt-tracking-normal:  0;
  --kt-tracking-wide:    0.06em;
  --kt-tracking-mono:   -0.01em;
  --kt-tracking-caps:    0.18em;   /* tagged labels, eyebrow text */

  /* ---------- SPACING (4px base) ---------- */
  --kt-sp-1:  4px;
  --kt-sp-2:  8px;
  --kt-sp-3:  12px;
  --kt-sp-4:  16px;
  --kt-sp-5:  20px;
  --kt-sp-6:  24px;
  --kt-sp-8:  32px;
  --kt-sp-10: 40px;
  --kt-sp-12: 48px;
  --kt-sp-16: 64px;
  --kt-sp-20: 80px;
  --kt-sp-24: 96px;
  --kt-sp-32: 128px;

  /* ---------- RADII ---------- */
  --kt-r-0:    0;          /* default — brand prefers sharp corners */
  --kt-r-sm:   2px;        /* subtle softening, inputs */
  --kt-r-md:   4px;        /* buttons, cards */
  --kt-r-lg:   8px;        /* large surfaces */
  --kt-r-pill: 9999px;     /* badges, status pills */

  /* ---------- SHADOWS / GLOWS ---------- */
  --kt-shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --kt-shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --kt-shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
  --kt-glow-lime:  0 0 0 1px rgba(202,253,44,0.4), 0 0 24px rgba(202,253,44,0.25);
  --kt-glow-lime-strong: 0 0 0 2px var(--kt-lime), 0 0 32px rgba(202,253,44,0.55);
  --kt-ring-focus: 0 0 0 3px rgba(202,253,44,0.45);

  /* ---------- MOTION ---------- */
  --kt-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --kt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kt-dur-fast:   120ms;
  --kt-dur-base:   200ms;
  --kt-dur-slow:   400ms;
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */
html, body {
  background: var(--kt-bg);
  color: var(--kt-fg-1);
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-16);
  line-height: var(--kt-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHY ROLES — semantic classes
   ============================================================
   Naming reflects the brand: display = mono (the logo voice).
   Body = sans for legibility in long German marketing copy.
   ============================================================ */

.kt-display-1 {
  font-family: var(--kt-font-display);
  font-size: clamp(56px, 9vw, 96px);
  line-height: var(--kt-lh-tight);
  letter-spacing: var(--kt-tracking-mono);
  font-weight: 700;
}
.kt-display-2 {
  font-family: var(--kt-font-display);
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: var(--kt-lh-tight);
  letter-spacing: var(--kt-tracking-mono);
  font-weight: 700;
}

.kt-h1 {
  font-family: var(--kt-font-display);
  font-size: var(--kt-fs-56);
  line-height: var(--kt-lh-tight);
  letter-spacing: var(--kt-tracking-mono);
  font-weight: 700;
}
.kt-h2 {
  font-family: var(--kt-font-display);
  font-size: var(--kt-fs-40);
  line-height: var(--kt-lh-snug);
  letter-spacing: var(--kt-tracking-mono);
  font-weight: 700;
}
.kt-h3 {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-32);
  line-height: var(--kt-lh-snug);
  letter-spacing: var(--kt-tracking-tight);
  font-weight: 600;
}
.kt-h4 {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-24);
  line-height: var(--kt-lh-snug);
  font-weight: 600;
}
.kt-h5 {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-20);
  line-height: var(--kt-lh-snug);
  font-weight: 600;
}

.kt-body-lg {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-18);
  line-height: var(--kt-lh-normal);
  font-weight: 400;
}
.kt-body {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-16);
  line-height: var(--kt-lh-normal);
  font-weight: 400;
}
.kt-body-sm {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-14);
  line-height: var(--kt-lh-normal);
  font-weight: 400;
}
.kt-caption {
  font-family: var(--kt-font-sans);
  font-size: var(--kt-fs-12);
  line-height: var(--kt-lh-normal);
  color: var(--kt-fg-3);
}

/* The signature voice: tagged + uppercase mono labels (eyebrow text) */
.kt-eyebrow {
  font-family: var(--kt-font-mono);
  font-size: var(--kt-fs-12);
  font-weight: 500;
  letter-spacing: var(--kt-tracking-caps);
  text-transform: uppercase;
  color: var(--kt-lime);
}

/* Code / mono inline */
.kt-code, code {
  font-family: var(--kt-font-mono);
  font-size: 0.92em;
  background: var(--kt-coal);
  border: 1px solid var(--kt-border);
  padding: 1px 6px;
  border-radius: var(--kt-r-sm);
  color: var(--kt-lime);
}

/* Bracket-tag — the literal brand voice. <like-this/> */
.kt-tag::before { content: '<'; color: var(--kt-fg-3); }
.kt-tag::after  { content: '/>'; color: var(--kt-fg-3); }
.kt-tag {
  font-family: var(--kt-font-mono);
  color: var(--kt-lime);
  font-weight: 600;
  letter-spacing: var(--kt-tracking-mono);
}