/*
 * KITT Design Tokens
 * ------------------------------------------------------------------
 * Single source of truth for color, type, spacing and shadow values
 * across index.html / member.html / admin.html.
 *
 * Values below are extracted verbatim from the existing inline
 * :root blocks in index.html, member.html and admin.html — nothing
 * is a new color choice, this only centralizes what already exists
 * so the "styl zostaje, tylko dopracowujemy szczegóły" requirement
 * holds true. `--pink` is kept as an alias of `--red` because
 * index.html's own inline CSS refers to `--pink` while
 * member.html/admin.html use `--red` for the exact same hex value
 * (#ff0055) — consuming code can use either name safely.
 *
 * This file has ZERO effect until a page actually links it with
 * <link rel="stylesheet" href="assets/css/kitt-tokens.css">.
 * index.html/member.html/admin.html are NOT modified by this task;
 * they keep their own inline :root blocks working exactly as before.
 * Wiring happens incrementally in later tasks (Task 4+).
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────── */
  --k-bg: #040508;
  --k-bg-card: rgba(14, 17, 24, 0.75);
  --k-bg-card-hover: rgba(22, 27, 38, 0.88);
  --k-bg-glass: rgba(10, 13, 20, 0.85);
  --k-bg-surface: #0f1218; /* admin/member "--surface" equivalent */

  /* ── Brand / accent colors ───────────────────────────────────── */
  --k-cyan: #00ffcc;
  --k-cyan-glow: rgba(0, 255, 204, 0.35);
  --k-violet: #7b61ff;
  --k-violet-glow: rgba(123, 97, 255, 0.35);
  --k-red: #ff0055;
  --k-red-glow: rgba(255, 0, 85, 0.35);
  --k-pink: var(--k-red);          /* alias used historically in index.html */
  --k-pink-glow: var(--k-red-glow);
  --k-amber: #f59e0b;
  --k-amber-glow: rgba(245, 158, 11, 0.35);
  --k-green: #10b981;
  --k-green-glow: rgba(16, 185, 129, 0.35);

  /* Kick/YouTube brand colors (used by status pills / live badges) */
  --k-kick: #53fc18;
  --k-youtube: #ff0055;
  --k-telegram: #0088cc;

  /* ── Text ────────────────────────────────────────────────────── */
  --k-text-main: #f1f5f9;
  --k-text-muted: #94a3b8;
  --k-text-dim: #64748b;
  --k-white: #ffffff;
  --k-black: #0a0a0a;

  /* ── Borders ─────────────────────────────────────────────────── */
  --k-border: rgba(255, 255, 255, 0.08);
  --k-border-cyan: rgba(0, 255, 204, 0.3);
  --k-border-violet: rgba(123, 97, 255, 0.3);
  --k-border-red: rgba(255, 0, 85, 0.3);
  --k-border-amber: rgba(245, 158, 11, 0.3);
  --k-border-green: rgba(16, 185, 129, 0.3);

  /* ── Fonts ───────────────────────────────────────────────────── */
  --k-font-sans: 'Inter', sans-serif;
  --k-font-mono: 'JetBrains Mono', monospace;
  --k-font-title: 'Chakra Petch', 'Space Grotesk', 'Inter', sans-serif;
  --k-font-orbitron: 'Orbitron', 'Chakra Petch', sans-serif;

  /* Type scale — 5 steps, replaces the ~15 ad-hoc font-size values
     scattered across inline styles. Use for new/refactored markup;
     existing untouched markup keeps its own literal sizes. */
  --k-text-xs: 0.72rem;   /* micro-labels, badges, mono meta */
  --k-text-sm: 0.85rem;   /* body copy, descriptions */
  --k-text-base: 1rem;    /* default body */
  --k-text-lg: 1.25rem;   /* card titles, sub-headings */
  --k-text-xl: clamp(1.8rem, 3.5vw, 2.5rem);  /* section titles */
  --k-text-2xl: clamp(2.3rem, 5vw, 3.8rem);   /* hero title */

  /* ── Spacing scale ───────────────────────────────────────────── */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 20px;
  --k-space-6: 24px;
  --k-space-8: 32px;
  --k-space-10: 40px;
  --k-space-12: 48px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --k-radius-sm: 6px;
  --k-radius-md: 10px;
  --k-radius-lg: 16px;
  --k-radius-xl: 20px;
  --k-radius-pill: 999px;

  /* ── Shadows / glow ──────────────────────────────────────────── */
  --k-shadow-card: 0 15px 35px rgba(0, 0, 0, 0.6);
  --k-shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.8);
  --k-glow-cyan: 0 0 25px var(--k-cyan-glow);
  --k-glow-violet: 0 0 25px var(--k-violet-glow);
  --k-glow-red: 0 0 25px var(--k-red-glow);

  /* ── Motion ──────────────────────────────────────────────────── */
  --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --k-transition-fast: 0.2s ease;
  --k-transition-base: 0.3s ease;
}