/* ==========================================================================
   KillarNation — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth. Every value here was chosen for a dark gaming
   aesthetic with yellow/gold accents. No hex value appears elsewhere.

   Rules:
   1. No hex value anywhere else in CSS. Only var() references.
   2. Add a token here before using a new value in components.css.
   3. Yellow is the signature — use for CTAs, highlights, badges only.

   Load order: tokens → base → layout → components
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. COLOR PRIMITIVES
     ------------------------------------------------------------------ */

  /* Brand yellow — KillarNation signature */
  --kn-yellow:       #FFC400;
  --kn-yellow-light: #FFD21F;
  --kn-yellow-dark:  #D4A300;
  --kn-yellow-soft:  rgba(255, 196, 0, .10);
  --kn-yellow-ink:   #7A5F00;

  /* Dark palette */
  --kn-black:        #0A0A0A;
  --kn-dark-950:     #0D0F14;
  --kn-dark-900:     #111318;
  --kn-dark-800:     #1A1D26;
  --kn-dark-700:     #252833;
  --kn-dark-600:     #2F3340;

  /* Light palette */
  --kn-white:        #FFFFFF;
  --kn-gray-50:      #FAFAFA;
  --kn-gray-100:     #F5F5F5;
  --kn-gray-200:     #E5E5E5;
  --kn-gray-300:     #D4D4D4;
  --kn-gray-400:     #A3A3A3;
  --kn-gray-500:     #737373;
  --kn-gray-600:     #555555;
  --kn-gray-700:     #404040;
  --kn-gray-800:     #262626;

  /* Status */
  --kn-success:      #22C55E;
  --kn-warning:      #F59E0B;
  --kn-danger:       #EF4444;
  --kn-info:         #3B82F6;


  /* ------------------------------------------------------------------
     2. SEMANTIC ALIASES
     What templates and components actually consume.
     ------------------------------------------------------------------ */

  /* Surfaces */
  --kn-canvas:         var(--kn-white);
  --kn-surface:        var(--kn-white);
  --kn-surface-alt:    var(--kn-gray-50);
  --kn-surface-sunken: var(--kn-gray-100);
  --kn-surface-dark:   var(--kn-dark-950);
  --kn-surface-card:   var(--kn-white);

  /* Text */
  --kn-text:           #111111;
  --kn-text-soft:      var(--kn-gray-600);
  --kn-text-muted:     var(--kn-gray-400);
  --kn-text-invert:    var(--kn-white);
  --kn-text-on-dark:   #CCCCCC;
  --kn-text-on-dark-muted: #888888;

  /* Brand / interactive */
  --kn-primary:        var(--kn-yellow);
  --kn-primary-hover:  var(--kn-yellow-light);
  --kn-primary-text:   var(--kn-black);
  --kn-link:           var(--kn-yellow-dark);
  --kn-link-hover:     var(--kn-yellow);

  /* Borders */
  --kn-border:         var(--kn-gray-200);
  --kn-border-light:   var(--kn-gray-100);
  --kn-border-dark:    rgba(255, 255, 255, .08);
  --kn-border-accent:  var(--kn-yellow);

  /* Focus */
  --kn-focus-ring:     0 0 0 3px rgba(255, 196, 0, .30);


  /* ------------------------------------------------------------------
     3. TYPOGRAPHY
     Two families. Self-hosted variable woff2.
     ------------------------------------------------------------------ */

  --kn-font-display:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kn-font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kn-font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem) */
  --kn-fs-xs:      0.75rem;     /* 12px */
  --kn-fs-sm:      0.8125rem;   /* 13px */
  --kn-fs-base:    0.875rem;    /* 14px — UI default */
  --kn-fs-md:      1rem;        /* 16px — body */
  --kn-fs-lg:      1.125rem;    /* 18px */
  --kn-fs-xl:      1.25rem;     /* 20px */
  --kn-fs-2xl:     1.5rem;      /* 24px */
  --kn-fs-3xl:     1.875rem;    /* 30px */
  --kn-fs-4xl:     2.25rem;     /* 36px */
  --kn-fs-5xl:     3rem;        /* 48px — hero */

  /* Weights */
  --kn-fw-normal:    400;
  --kn-fw-medium:    500;
  --kn-fw-semibold:  600;
  --kn-fw-bold:      700;

  /* Leading */
  --kn-lh-tight:     1.2;
  --kn-lh-snug:      1.4;
  --kn-lh-normal:    1.6;
  --kn-lh-relaxed:   1.75;

  /* Tracking */
  --kn-ls-tight:    -0.02em;
  --kn-ls-normal:    0;
  --kn-ls-wide:      0.02em;


  /* ------------------------------------------------------------------
     4. SPACING — 4px base
     ------------------------------------------------------------------ */

  --kn-sp-1:   4px;
  --kn-sp-2:   8px;
  --kn-sp-3:   12px;
  --kn-sp-4:   16px;
  --kn-sp-5:   20px;
  --kn-sp-6:   24px;
  --kn-sp-8:   32px;
  --kn-sp-10:  40px;
  --kn-sp-12:  48px;
  --kn-sp-16:  64px;
  --kn-sp-20:  80px;
  --kn-sp-24:  96px;

  /* Section rhythm */
  --kn-section-sm:  var(--kn-sp-10);
  --kn-section:     var(--kn-sp-16);
  --kn-section-lg:  var(--kn-sp-20);


  /* ------------------------------------------------------------------
     5. LAYOUT
     ------------------------------------------------------------------ */

  --kn-container:     1200px;
  --kn-gutter:        var(--kn-sp-6);
  --kn-gutter-mobile: var(--kn-sp-4);
  --kn-measure:       680px;
  --kn-header-h:      64px;


  /* ------------------------------------------------------------------
     6. RADII
     ------------------------------------------------------------------ */

  --kn-radius-xs:    4px;
  --kn-radius-sm:    6px;
  --kn-radius:       8px;
  --kn-radius-lg:    12px;
  --kn-radius-xl:    16px;
  --kn-radius-pill:  999px;


  /* ------------------------------------------------------------------
     7. ELEVATION
     ------------------------------------------------------------------ */

  --kn-shadow-sm:    0 1px 3px rgba(0, 0, 0, .06);
  --kn-shadow:       0 4px 12px rgba(0, 0, 0, .08);
  --kn-shadow-lg:    0 12px 40px rgba(0, 0, 0, .12);
  --kn-shadow-glow:  0 0 20px rgba(255, 196, 0, .15);


  /* ------------------------------------------------------------------
     8. MOTION
     ------------------------------------------------------------------ */

  --kn-ease:         cubic-bezier(.2, .7, .2, 1);
  --kn-dur-fast:     120ms;
  --kn-dur:          200ms;
  --kn-dur-slow:     400ms;
  --kn-transition:   all var(--kn-dur) var(--kn-ease);


  /* ------------------------------------------------------------------
     9. Z-INDEX
     ------------------------------------------------------------------ */

  --kn-z-base:       1;
  --kn-z-sticky:     40;
  --kn-z-overlay:    60;
  --kn-z-modal:      70;
  --kn-z-toast:      80;
}


/* Fluid overrides -------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --kn-fs-5xl:    2.25rem;
    --kn-fs-4xl:    1.875rem;
    --kn-fs-3xl:    1.5rem;
    --kn-gutter:    var(--kn-gutter-mobile);
    --kn-section-lg: var(--kn-sp-16);
    --kn-section:    var(--kn-sp-12);
    --kn-header-h:   56px;
  }
}

@media (max-width: 480px) {
  :root {
    --kn-fs-5xl:    1.875rem;
    --kn-fs-4xl:    1.5rem;
    --kn-gutter:    var(--kn-sp-3);
  }
}

/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --kn-dur-fast: 1ms;
    --kn-dur:      1ms;
    --kn-dur-slow: 1ms;
  }
}