/* =========================================================
   Der Kabelmann — Design tokens
   Colors, type, spacing, radii, shadows + semantic styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Press+Start+2P&display=swap');

:root {
  /* -------------------------------------------------------
     Brand palette — the rainbow ribbon cable
     ------------------------------------------------------- */
  --kabel-pink:    #FF2E93;
  --kabel-cyan:    #00D9F5;
  --kabel-violet:  #8B5CFF;
  --kabel-orange:  #FF8A3D;
  --kabel-yellow:  #FFD93D;
  --kabel-lime:    #A8FF3D;
  --kabel-navy:    #14133B;
  --kabel-cream:   #FFF4E6;
  --kabel-white:   #FFFFFF;

  /* Soft tints — only used in dashboard UI where neon would shout */
  --kabel-pink-soft:   #FFE0EF;
  --kabel-cyan-soft:   #D6F8FE;
  --kabel-violet-soft: #ECE3FF;
  --kabel-yellow-soft: #FFF6CC;
  --kabel-lime-soft:   #E8FFCC;

  /* Navy tints — for borders, dividers, faint backgrounds */
  --kabel-navy-90: rgba(20, 19, 59, 0.90);
  --kabel-navy-60: rgba(20, 19, 59, 0.60);
  --kabel-navy-40: rgba(20, 19, 59, 0.40);
  --kabel-navy-20: rgba(20, 19, 59, 0.20);
  --kabel-navy-10: rgba(20, 19, 59, 0.10);
  --kabel-navy-05: rgba(20, 19, 59, 0.05);

  /* -------------------------------------------------------
     Semantic color roles
     ------------------------------------------------------- */
  --bg:           var(--kabel-cream);
  --bg-card:      var(--kabel-white);
  --bg-inverse:   var(--kabel-navy);
  --bg-hero:      var(--kabel-pink);

  --fg:           var(--kabel-navy);
  --fg-muted:     var(--kabel-navy-60);
  --fg-faint:     var(--kabel-navy-40);
  --fg-on-dark:   var(--kabel-cream);
  --fg-on-pink:   var(--kabel-white);

  --accent:       var(--kabel-pink);
  --link:         var(--kabel-violet);
  --link-hover:   var(--kabel-pink);

  --success:      var(--kabel-lime);
  --warning:      var(--kabel-orange);
  --danger:       #FF3D5C;            /* hotter red, harmonized with pink */
  --info:         var(--kabel-cyan);

  --border:       var(--kabel-navy);
  --border-soft:  var(--kabel-navy-20);
  --divider:      var(--kabel-navy-10);

  /* -------------------------------------------------------
     Typography
     ------------------------------------------------------- */
  --font-display: 'Archivo Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-pixel:   'Press Start 2P', 'JetBrains Mono', monospace;

  /* Type scale (1.250 major third, snapped) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-hero: 120px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-pixel:  0.06em;

  /* -------------------------------------------------------
     Spacing — 4px base
     ------------------------------------------------------- */
  --space-0:  0;
  --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: 160px;
  --space-12: 192px;

  /* -------------------------------------------------------
     Radii
     ------------------------------------------------------- */
  --radius-0:    0;          /* pixel art */
  --radius-1:    4px;        /* chips, tags */
  --radius-2:    8px;        /* inputs, small buttons */
  --radius-3:    16px;       /* cards, large buttons */
  --radius-full: 999px;      /* pills */

  /* -------------------------------------------------------
     Borders — bold and dark
     ------------------------------------------------------- */
  --border-thin:  2px solid var(--kabel-navy);
  --border-thick: 3px solid var(--kabel-navy);
  --border-soft-thin: 1px solid var(--kabel-navy-20);

  /* -------------------------------------------------------
     Shadows
     The hard offset shadow uses --shadow-ink, which flips from
     navy (light) to a light cream (dark) so the offset never
     disappears against a dark page. See dark override below.
     ------------------------------------------------------- */
  --shadow-ink:        var(--kabel-navy);
  --shadow-sticker:    6px 6px 0 var(--shadow-ink);
  --shadow-sticker-lg: 10px 10px 0 var(--shadow-ink);
  --shadow-sticker-pink: 6px 6px 0 var(--kabel-pink);
  --shadow-sticker-cyan: 6px 6px 0 var(--kabel-cyan);
  --shadow-float:      0 8px 24px rgba(20, 19, 59, 0.18);
  --shadow-float-sm:   0 2px 8px rgba(20, 19, 59, 0.12);

  /* -------------------------------------------------------
     Motion
     ------------------------------------------------------- */
  --ease-snap:   cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-bounce:  320ms; /* @kind other */

  /* -------------------------------------------------------
     Layout
     ------------------------------------------------------- */
  --content-max:   1200px;
  --content-wide:  1440px;
  --gutter:        var(--space-5);
}

/* =========================================================
   Dark theme token overrides
   Opt in by adding class .dark (or [data-theme="dark"]) to a
   wrapper. Flips the hard-offset shadow ink to a light tone so
   sticker shadows stay visible on the navy page, and swaps the
   soft float shadow to black (a navy shadow vanishes on navy).
   Surface roles (--bg, --card, borders) should be set by the
   consuming layout; these are the cross-cutting shadow fixes.
   ========================================================= */
.dark,
[data-theme="dark"] {
  --shadow-ink:      rgba(255, 244, 230, 0.5);
  --shadow-float:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-float-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   Semantic element styles
   (Optional — opt in by adding class .km to a wrapper)
   ========================================================= */

.km {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.km h1, .km .h1,
.km h2, .km .h2,
.km h3, .km .h3,
.km h4, .km .h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black is already heavy */
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.km h1, .km .h1 { font-size: var(--text-4xl); }
.km h2, .km .h2 { font-size: var(--text-3xl); }
.km h3, .km .h3 { font-size: var(--text-2xl); }
.km h4, .km .h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }

.km .display { font-size: var(--text-5xl); line-height: 0.95; letter-spacing: -0.03em; }
.km .hero    { font-size: var(--text-hero); line-height: 0.92; letter-spacing: -0.04em; }

.km .eyebrow {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: var(--tracking-pixel);
  color: var(--kabel-pink);
  text-transform: lowercase;
}

.km p, .km .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.km .lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.km small, .km .small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.km .mono, .km code, .km kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.km .pixel {
  font-family: var(--font-pixel);
  letter-spacing: var(--tracking-pixel);
  line-height: 1.6;
}

.km a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap);
}
.km a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}