/* =====================================================================
   KaspaNova — BASE DESIGN SYSTEM
   Tokens • Reset • Primitives UI ONLY
===================================================================== */

/* -------------------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --kn-bg: #0d1117;
  --kn-bg-elevated: #161b22;
  --kn-bg-soft: #111827;

  /* Text */
  --kn-text: #e6e6e6;
  --kn-text-muted: #9ca3af;

  /* Borders */
  --kn-border: rgba(255,255,255,0.08);
  --kn-border-strong: rgba(255,255,255,0.16);

  /* Brand */
  --kn-purple: #7a3df1;
  --kn-purple-soft: rgba(122,61,241,0.14);
  --kn-green: #70c7ba;

  /* Status */
  --kn-success: #22c55e;
  --kn-danger: #ef4444;
  --kn-warning: #fb923c;

  /* Radius */
  --kn-radius-sm: 10px;
  --kn-radius-md: 16px;
  --kn-radius-lg: 24px;
  --kn-radius-pill: 999px;

  /* Motion */
  --kn-transition: 0.22s ease;

  /* Shadow */
  --kn-shadow-soft: 0 14px 40px rgba(0,0,0,0.55);
}

/* -------------------------------------------------------------------
   2. LIGHT MODE TOKENS
------------------------------------------------------------------- */
body.theme-light {
  --kn-bg: #faf8f5;
  --kn-bg-elevated: #ffffff;
  --kn-bg-soft: #f2f0eb;

  --kn-text: #2a2a2a;
  --kn-text-muted: #666;

  --kn-border: rgba(0,0,0,0.08);
  --kn-border-strong: rgba(0,0,0,0.18);

  --kn-shadow-soft: 0 20px 38px rgba(0,0,0,0.10);
}

/* ==========================================================
   GLOBAL LAYOUT — NAVBAR OFFSET (SOURCE OF TRUTH)
========================================================== */

:root {
  --kn-navbar-height: 72px;
}

@media (max-width: 768px) {
  :root {
    --kn-navbar-height: 56px;
  }
}

body {
  padding-top: var(--kn-navbar-height);
}

/* -------------------------------------------------------------------
   3. RESET & BASE
------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--kn-bg);
  color: var(--kn-text);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--kn-green);
  text-decoration: none;
}

/* -------------------------------------------------------------------
   4. UTILITIES
------------------------------------------------------------------- */
.kn-muted {
  color: var(--kn-text-muted);
}

.kn-label {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
  color: var(--kn-text-muted);
}

/* -------------------------------------------------------------------
   5. BUTTONS (PRIMITIVES)
------------------------------------------------------------------- */
.kn-btn {
  padding: 0.55rem 1.2rem;
  border-radius: var(--kn-radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--kn-transition);
  border: 1px solid transparent;
  font-size: 0.95rem;
  background: none;
}

.kn-btn-pill {
  border-radius: var(--kn-radius-pill);
}

.kn-btn-primary {
  background: var(--kn-purple);
  color: #fff;
  box-shadow: 0 6px 22px rgba(122,61,241,0.35);
}

.kn-btn-primary:hover {
  background: #6b30ee;
  box-shadow: 0 10px 36px rgba(122,61,241,0.45);
}

.kn-btn-outline {
  border: 1px solid var(--kn-border);
  color: var(--kn-text);
}

/* -------------------------------------------------------------------
   6. INPUTS
------------------------------------------------------------------- */
.kn-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--kn-radius-sm);
  border: 1px solid var(--kn-border);
  background: #0a0f18;
  color: var(--kn-text);
  font-size: 0.95rem;
  transition: var(--kn-transition);
}

.kn-input:focus {
  border-color: var(--kn-purple);
  box-shadow: 0 0 0 1px rgba(122,61,241,0.45);
  outline: none;
}

body.theme-light .kn-input {
  background: #fff;
  color: #2a2a2a;
}

/* -------------------------------------------------------------------
   7. CARDS (GENERIC)
------------------------------------------------------------------- */
.kn-card {
  background: linear-gradient(
    145deg,
    rgba(122,61,241,0.06),
    rgba(15,23,42,0.92)
  );
  border: 1px solid rgba(122,61,241,0.18);
  border-radius: var(--kn-radius-lg);
  padding: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(122,61,241,0.32);
}

body.theme-light .kn-card {
  background: #fff;
  border: 1px solid rgba(122,61,241,0.16);
}

/* -------------------------------------------------------------------
   8. BADGES & PILLS
------------------------------------------------------------------- */
.kn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.7rem;
  border-radius: var(--kn-radius-pill);
  font-size: 0.75rem;
  border: 1px solid var(--kn-border);
}

.kn-pill-success {
  background: rgba(34,197,94,0.18);
  color: #4ade80;
  border-color: rgba(34,197,94,0.45);
}

.kn-pill-danger {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.45);
}

/* -------------------------------------------------------------------
   9. ICON SYSTEM (Lucide wrapper)
------------------------------------------------------------------- */
.kn-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kn-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.kn-icon-purple svg { stroke: var(--kn-purple); }
.kn-icon-green svg  { stroke: var(--kn-green); }
.kn-icon-muted svg  { stroke: var(--kn-text-muted); }

/* -------------------------------------------------------------------
   10. ANIMATIONS (GENERIC)
------------------------------------------------------------------- */
.kn-animate {
  opacity: 0;
  transform: translateY(8px);
}

.kn-animate-in {
  animation: kn-fade-up 0.45s ease-out forwards;
}

@keyframes kn-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   MOBILE SAFETY — No horizontal overflow (site-wide)
============================================================ */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Media safety */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}