/* ============================================================
   KingsCorner Design Tokens
   Phase 0 of the Global CSS Redesign Sprint
   ------------------------------------------------------------
   Semantic naming: token names describe ROLE, not literal value.
   That lets a future [data-theme="light"] block fulfill the same
   names without touching any component CSS.

   RULE: component CSS must NEVER hardcode hex/rgba/px values.
   Always reference tokens declared here.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ============ BACKGROUND / SURFACES ============ */
  --kc-bg-base:        #0a0a0f;
  --kc-bg-card:        #141414;
  --kc-bg-elevated:    #1a1a24;

  /* Aurora bloom colors (viewport-fixed background, drawn by base.html) */
  --kc-aurora-bloom-1: rgba(14, 165, 233, 0.18);   /* cyan wash, top-left */
  --kc-aurora-bloom-2: rgba(168, 85, 247, 0.14);   /* purple wash, bottom-right */
  --kc-aurora-bloom-3: rgba(15, 23, 42, 0.20);     /* deep-navy center wash */

  /* Glass surfaces (translucent, backdrop-blur) */
  --kc-glass-surface:            rgba(15, 23, 42, 0.55);
  --kc-glass-surface-strong:     rgba(15, 23, 42, 0.70);
  --kc-glass-surface-inner:      rgba(30, 41, 59, 0.55);
  --kc-glass-surface-inner-hover:rgba(30, 41, 59, 0.75);
  --kc-glass-blur:               20px;
  --kc-glass-blur-strong:        24px;
  --kc-glass-saturate:           140%;

  /* ============ BORDERS ============ */
  --kc-border-faint:      rgba(255, 255, 255, 0.06);
  --kc-border-med:        rgba(255, 255, 255, 0.10);
  --kc-border-strong:     rgba(255, 255, 255, 0.16);
  --kc-glass-border:      rgba(148, 163, 184, 0.15);
  --kc-glass-border-dim:  rgba(148, 163, 184, 0.10);
  --kc-glass-border-hover:rgba(14, 165, 233, 0.35);

  /* ============ TEXT ============ */
  --kc-text-primary:   #f1f5f9;
  --kc-text-body:      #e8e8f0;
  --kc-text-secondary: #cbd5e1;
  --kc-text-muted:     #94a3b8;
  --kc-text-dim:       #6c6c8a;
  --kc-text-dimmer:    #64748b;
  --kc-text-inverse:   #0a0a0f;

  /* ============ ACCENTS ============ */
  --kc-accent-cyan:         #0ea5e9;
  --kc-accent-cyan-hover:   #0284c7;
  --kc-accent-cyan-soft:    rgba(14, 165, 233, 0.15);
  --kc-accent-cyan-glow:    rgba(14, 165, 233, 0.35);

  --kc-accent-purple:       #a855f7;
  --kc-accent-purple-alt:   #8b5cf6;
  --kc-accent-purple-soft:  rgba(168, 85, 247, 0.15);

  --kc-accent-green:        #10b981;
  --kc-accent-green-alt:    #22c55e;
  --kc-accent-green-soft:   rgba(16, 185, 129, 0.15);
  --kc-accent-green-text:   #86efac;

  --kc-accent-orange:       #f59e0b;
  --kc-accent-orange-soft:  rgba(245, 158, 11, 0.15);
  --kc-accent-orange-text:  #fbbf24;

  --kc-accent-red:          #ef4444;
  --kc-accent-red-soft:     rgba(239, 68, 68, 0.15);
  --kc-accent-red-text:     #f87171;

  --kc-accent-slate:        #334155;

  /* ============ ELEVATION / SHADOW ============ */
  --kc-shadow-sm:         0 2px 8px  rgba(0, 0, 0, 0.25);
  --kc-shadow-md:         0 4px 24px rgba(0, 0, 0, 0.35);
  --kc-shadow-lg:         0 10px 40px rgba(0, 0, 0, 0.45);
  --kc-shadow-glow-cyan:  0 0 24px rgba(14, 165, 233, 0.28);

  /* ============ RADIUS ============ */
  --kc-radius-sm:   6px;
  --kc-radius-md:   10px;
  --kc-radius-lg:   12px;
  --kc-radius-xl:   16px;
  --kc-radius-2xl:  18px;
  --kc-radius-pill: 999px;

  /* ============ SPACING (4/8/12/16/20/24/32/48) ============ */
  --kc-space-1:  4px;
  --kc-space-2:  8px;
  --kc-space-3:  12px;
  --kc-space-4:  16px;
  --kc-space-5:  20px;
  --kc-space-6:  24px;
  --kc-space-8:  32px;
  --kc-space-12: 48px;

  /* ============ TYPOGRAPHY ============ */
  --kc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --kc-fs-xs:    11px;
  --kc-fs-sm:    12.5px;
  --kc-fs-base:  15px;
  --kc-fs-md:    16px;
  --kc-fs-lg:    20px;
  --kc-fs-xl:    24px;
  --kc-fs-2xl:   32px;

  --kc-fw-normal:   400;
  --kc-fw-medium:   500;
  --kc-fw-semibold: 600;
  --kc-fw-bold:     700;

  /* ============ MOTION ============ */
  --kc-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --kc-dur-fast:  120ms;
  --kc-dur-base:  180ms;
  --kc-dur-slow:  220ms;

  /* ============ LAYOUT ============ */
  --kc-container-max: 1400px;
  --kc-container-pad: 20px;

  /* Breakpoints (reference only - use inside @media rules)
     sm: 480px | md: 768px | lg: 1024px | xl: 1280px */
}

/* ============================================================
   Legacy shim: existing inline templates reference --bg,
   --bg-card, --accent, --text. Map them onto new tokens so
   pages can migrate incrementally without breaking.
   REMOVE this block after every page is migrated (Phase 8).
   ============================================================ */
:root {
  --bg:      var(--kc-bg-base);
  --bg-card: var(--kc-bg-card);
  --accent:  var(--kc-accent-cyan);
  --text:    var(--kc-text-body);
}