/* =============================================================
 * Kontre Kourant — Design Tokens
 * Locked: May 2026
 *
 * System: Neon Nocturne — dark-first with light counterparts.
 * Apply mode by setting [data-theme="dark"] or [data-theme="light"]
 * on the root element. Default is dark.
 * ============================================================= */

/* ---------- Brand palette (immutable) ---------- */
:root {
  /* Brand */
  --kk-primary:    #FF1E5C;   /* Rouge néon — couleur signature */
  --kk-accent:     #4D7DFF;   /* Bleu néon — accent secondaire */
  --kk-accent-2:   #00E0FF;   /* Cyan — signal, info, état actif */

  /* Dark surfaces */
  --kk-night:      #06081A;   /* Fond principal dark */
  --kk-surface-d:  #0F1330;   /* Surface élevée dark */
  --kk-surface-d2: #181D44;   /* Surface très élevée dark */
  --kk-ink-d:      #ECEEFF;   /* Texte sur dark */
  --kk-ink-d-mute: #8E94BA;   /* Texte secondaire sur dark */
  --kk-line-d:     #1F2552;   /* Lignes / bordures dark */

  /* Light surfaces (bleutées, cousines de #ECEEFF) */
  --kk-day:        #F4F5FB;   /* Fond principal light */
  --kk-surface-l:  #E8EAF4;   /* Surface élevée light */
  --kk-ink-l:      #0F1330;   /* Texte sur light */
  --kk-ink-l-mute: #5A6080;   /* Texte secondaire sur light */
  --kk-line-l:     #DCDFEC;   /* Lignes / bordures light */
  --kk-white:      #FFFFFF;   /* Cartes / élévation light */

  /* Sémantique */
  --kk-success:    #00C896;
  --kk-warning:    #FFB020;
  --kk-danger:     #FF1E5C;

  /* Type */
  --kk-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kk-font-display: 'Inter', system-ui, sans-serif;
  --kk-font-ui:      'Rubik', 'Inter', sans-serif;
  --kk-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique */
  --kk-fs-display: clamp(48px, 6vw, 88px);
  --kk-fs-h1:      40px;
  --kk-fs-h2:      32px;
  --kk-fs-h3:      24px;
  --kk-fs-body:    16px;
  --kk-fs-small:   13px;
  --kk-fs-eyebrow: 11px;
  --kk-fs-mono:    13px;

  --kk-lh-tight: 0.98;
  --kk-lh-snug:  1.15;
  --kk-lh-body:  1.55;

  --kk-tracking-display: -0.035em;
  --kk-tracking-h1:      -0.025em;
  --kk-tracking-h2:      -0.02em;
  --kk-tracking-eyebrow: 0.18em;

  /* Espacement (système 4px) */
  --kk-s-1: 4px;
  --kk-s-2: 8px;
  --kk-s-3: 12px;
  --kk-s-4: 16px;
  --kk-s-5: 20px;
  --kk-s-6: 24px;
  --kk-s-8: 32px;
  --kk-s-10: 40px;
  --kk-s-12: 48px;
  --kk-s-16: 64px;
  --kk-s-20: 80px;
  --kk-s-24: 96px;

  /* Radius */
  --kk-r-btn:    4px;
  --kk-r-card:   12px;
  --kk-r-card-l: 16px;
  --kk-r-pill:   999px;

  /* Bordure */
  --kk-bw: 1px;

  /* Ombres (light seulement — pas d'ombre sur dark) */
  --kk-shadow-card:   0 4px 16px rgba(15, 19, 48, 0.06);
  --kk-shadow-hover:  0 8px 28px rgba(15, 19, 48, 0.10);
  --kk-shadow-glow:   0 0 24px rgba(255, 30, 92, 0.35);
  --kk-shadow-glow-c: 0 0 24px rgba(0, 224, 255, 0.30);

  /* Easing */
  --kk-ease-ui:    cubic-bezier(0.4, 0, 0.2, 1);
  --kk-ease-enter: cubic-bezier(0.2, 0.7, 0.3, 1);
  --kk-d-fast:     150ms;
  --kk-d-mid:      280ms;
  --kk-d-slow:     480ms;
}

/* ---------- Theme variables (semantic, switchable) ---------- */
:root, :root[data-theme="dark"] {
  --bg:        var(--kk-night);
  --surface:   var(--kk-surface-d);
  --surface-2: var(--kk-surface-d2);
  --ink:       var(--kk-ink-d);
  --ink-mute:  var(--kk-ink-d-mute);
  --line:      var(--kk-line-d);

  --primary:     var(--kk-primary);
  --primary-ink: #FFFFFF;
  --accent:      var(--kk-accent);
  --accent-2:    var(--kk-accent-2);

  --card-bg:     var(--kk-surface-d);
  --card-line:   var(--kk-line-d);
  --btn-shadow:  var(--kk-shadow-glow);
}

:root[data-theme="light"] {
  --bg:        var(--kk-day);
  --surface:   var(--kk-surface-l);
  --surface-2: var(--kk-white);
  --ink:       var(--kk-ink-l);
  --ink-mute:  var(--kk-ink-l-mute);
  --line:      var(--kk-line-l);

  --primary:     var(--kk-primary);
  --primary-ink: #FFFFFF;
  --accent:      var(--kk-accent);
  --accent-2:    #0096B8; /* cyan plus sombre pour AA sur light */

  --card-bg:     var(--kk-white);
  --card-line:   var(--kk-line-l);
  --btn-shadow:  var(--kk-shadow-card);
}

/* ---------- Typographic utilities ---------- */
.kk-display {
  font-family: var(--kk-font-display);
  font-size: var(--kk-fs-display);
  line-height: var(--kk-lh-tight);
  letter-spacing: var(--kk-tracking-display);
  font-weight: 800;
  color: var(--ink);
}
.kk-h1 {
  font-family: var(--kk-font-display);
  font-size: var(--kk-fs-h1);
  line-height: var(--kk-lh-snug);
  letter-spacing: var(--kk-tracking-h1);
  font-weight: 700;
  color: var(--ink);
}
.kk-h2 {
  font-family: var(--kk-font-display);
  font-size: var(--kk-fs-h2);
  line-height: var(--kk-lh-snug);
  letter-spacing: var(--kk-tracking-h2);
  font-weight: 700;
  color: var(--ink);
}
.kk-h3 {
  font-family: var(--kk-font-display);
  font-size: var(--kk-fs-h3);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
}
.kk-body {
  font-family: var(--kk-font-sans);
  font-size: var(--kk-fs-body);
  line-height: var(--kk-lh-body);
  color: var(--ink-mute);
}
.kk-small {
  font-family: var(--kk-font-sans);
  font-size: var(--kk-fs-small);
  line-height: 1.5;
  color: var(--ink-mute);
}
.kk-eyebrow {
  font-family: var(--kk-font-ui);
  font-size: var(--kk-fs-eyebrow);
  letter-spacing: var(--kk-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary);
}
.kk-ui {
  font-family: var(--kk-font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.kk-mono {
  font-family: var(--kk-font-mono);
  font-size: var(--kk-fs-mono);
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.kk-btn {
  font-family: var(--kk-font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 20px;
  border-radius: var(--kk-r-btn);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--kk-d-fast) var(--kk-ease-ui),
              transform 80ms var(--kk-ease-ui),
              box-shadow var(--kk-d-fast) var(--kk-ease-ui);
}
.kk-btn:active { transform: scale(0.98); }

.kk-btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--btn-shadow);
}
.kk-btn--primary:hover { filter: brightness(1.05); }

.kk-btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 11.5px 18.5px;
}
.kk-btn--secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

.kk-btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 11.5px 16px;
}
.kk-btn--ghost:hover { background: var(--surface); }

/* ---------- Surfaces ---------- */
.kk-card {
  background: var(--card-bg);
  border: var(--kk-bw) solid var(--card-line);
  border-radius: var(--kk-r-card);
  padding: var(--kk-s-6);
}

.kk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--kk-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--kk-r-pill);
}

/* ---------- Page reset for system docs ---------- */
.kk-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--kk-font-sans);
  min-height: 100vh;
}