/* ============================================================
   Kreditzen 2.0 — Design Tokens
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=instrument-serif@400&f[]=jetbrains-mono@400,500&display=swap');

:root {
  /* ---------- BRAND SCALES ---------- */
  --teal-50:  #E6FAF9;
  --teal-100: #C2F2F0;
  --teal-200: #8EE6E3;
  --teal-300: #55D6D2;
  --teal-400: #1EC4BF;
  --teal-500: #00B3B0;
  --teal-600: #009A98;
  --teal-700: #007E7C;
  --teal-800: #005F5D;
  --teal-900: #003F3E;

  --amber-50:  #FFF8DB;
  --amber-100: #FFEFA8;
  --amber-200: #FFE370;
  --amber-300: #FFD94A;
  --amber-400: #FFD138;
  --amber-500: #FFCD29;
  --amber-600: #EABC20;
  --amber-700: #BE9A12;
  --amber-800: #8F720B;
  --amber-900: #5F4A05;

  --navy-50:  #E9EEF2;
  --navy-100: #C7D2DB;
  --navy-200: #94A9B8;
  --navy-300: #5E7E94;
  --navy-400: #2F5770;
  --navy-500: #134358;
  --navy-600: #0A3649;
  --navy-700: #062E3F;
  --navy-800: #032330;
  --navy-900: #002D40;
  --navy-950: #001825;

  --coral-50:  #FFF0ED;
  --coral-100: #FFDAD3;
  --coral-200: #FFBAAD;
  --coral-300: #FF9A87;
  --coral-400: #FF8C7A;
  --coral-500: #F56F5A;
  --coral-600: #D85640;

  /* ---------- SEMANTIC ---------- */
  --success-500: #14B86A;
  --success-600: #0E9657;
  --warning-500: #FBBC05;
  --warning-600: #B18504;
  --danger-500:  #EA4335;
  --danger-600:  #C53325;
  --info-500:    #4285F4;

  /* ---------- NEUTRAL SCALE ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBFA;
  --n-50:  #F5F6F5;
  --n-100: #EBECEB;
  --n-150: #DFE1DF;
  --n-200: #CED1CE;
  --n-300: #ADB1AD;
  --n-400: #868A86;
  --n-500: #5E625E;
  --n-600: #41443F;
  --n-700: #2A2C29;
  --n-800: #1A1B19;
  --n-900: #0D0E0C;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:  'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-base: 15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;
  --fs-5xl:  60px;
  --fs-6xl:  84px;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---------- RADIUS ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-xs: 0 1px 2px rgba(0,45,64,.06);
  --sh-sm: 0 2px 6px rgba(0,45,64,.07), 0 1px 2px rgba(0,45,64,.05);
  --sh-md: 0 6px 16px rgba(0,45,64,.08), 0 2px 4px rgba(0,45,64,.05);
  --sh-lg: 0 16px 40px rgba(0,45,64,.10), 0 4px 10px rgba(0,45,64,.06);
  --sh-glow-teal:  0 0 0 4px rgba(0,179,176,.18);
  --sh-glow-amber: 0 0 0 4px rgba(255,205,41,.28);

  /* ---------- LIGHT THEME (default) ---------- */
  --bg-app:       var(--n-50);
  --bg-surface:   var(--n-0);
  --bg-surface-2: var(--n-25);
  --bg-muted:     var(--n-100);
  --bg-inverse:   var(--navy-800);
  --fg-1:         var(--navy-900);
  --fg-2:         var(--n-600);
  --fg-3:         var(--n-500);
  --fg-on-primary: #FFFFFF;
  --fg-on-accent:  var(--navy-900);
  --border:        var(--n-150);
  --border-strong: var(--n-200);
  --primary:       var(--teal-500);
  --primary-hover: var(--teal-600);
  --primary-tint:  var(--teal-50);
  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-600);
  --ring:          0 0 0 3px rgba(0,179,176,.25);
}

[data-theme="dark"] {
  --bg-app:       var(--navy-800);
  --bg-surface:   var(--navy-700);
  --bg-surface-2: #083544;
  --bg-muted:     #0B3F51;
  --bg-inverse:   var(--n-0);
  --fg-1:         #F0F6F8;
  --fg-2:         #A6BCC6;
  --fg-3:         #7E98A3;
  --fg-on-primary: #FFFFFF;
  --fg-on-accent:  var(--navy-900);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --primary:       var(--teal-400);
  --primary-hover: var(--teal-300);
  --primary-tint:  rgba(0,179,176,.14);
  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-400);
  --ring:          0 0 0 3px rgba(30,196,191,.35);

  --sh-xs: 0 1px 2px rgba(0,0,0,.30);
  --sh-sm: 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.20);
  --sh-md: 0 8px 20px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.20);
  --sh-lg: 0 24px 60px rgba(0,0,0,.45);
}

/* ---------- Clases tipográficas ---------- */
.kz-display {
  font-family: var(--font-serif);
  font-size: var(--fs-6xl);
  line-height: .95;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.kz-h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-4xl); line-height: 1.1;  letter-spacing: -0.02em; }
.kz-h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: -0.015em; }
.kz-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.2;  letter-spacing: -0.01em; }
.kz-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xl);  line-height: 1.25; }
.kz-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base); line-height: 1.5; color: var(--fg-1); }
.kz-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-md);   line-height: 1.45; color: var(--fg-2); }
.kz-label   { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.kz-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
.kz-mono    { font-family: var(--font-mono); font-size: var(--fs-sm); }
.kz-numeric { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Base universal */
html, body {
  margin: 0; padding: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }