/* ==========================================================================
   KRAFTING DIGITAL — DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */

:root {
  /* Color Palette - Cyber Dark & Obsidian Foundations */
  --kd-bg-primary: #08090E;
  --kd-bg-secondary: #0F111A;
  --kd-bg-tertiary: #161926;
  --kd-bg-surface: rgba(22, 25, 38, 0.72);
  --kd-bg-surface-hover: rgba(30, 35, 54, 0.88);
  --kd-bg-card: rgba(15, 17, 26, 0.85);
  --kd-bg-glass: rgba(255, 255, 255, 0.03);
  --kd-bg-glass-heavy: rgba(15, 17, 26, 0.92);

  /* Typography Colors */
  --kd-text-primary: #F8FAFC;
  --kd-text-secondary: #94A3B8;
  --kd-text-muted: #94A3B8;
  --kd-text-inverse: #090A0F;

  /* Brand Accents */
  --kd-accent-primary: #6366F1;     /* Vibrant Indigo */
  --kd-accent-secondary: #8B5CF6;   /* Royal Violet */
  --kd-accent-pink: #EC4899;        /* Electric Pink */
  --kd-accent-cyan: #06B6D4;        /* Cyan Neon */
  --kd-accent-emerald: #10B981;     /* Mint Emerald */

  /* Gradients */
  --kd-grad-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  --kd-grad-cyan: linear-gradient(135deg, #06B6D4 0%, #6366F1 100%);
  --kd-grad-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  --kd-grad-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.18) 50%, rgba(236, 72, 153, 0.12) 100%);
  --kd-grad-border: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(99, 102, 241, 0.35) 100%);

  /* Borders & Glass */
  --kd-border-subtle: rgba(255, 255, 255, 0.08);
  --kd-border-medium: rgba(255, 255, 255, 0.14);
  --kd-border-highlight: rgba(99, 102, 241, 0.45);
  --kd-border-glow: rgba(99, 102, 241, 0.3);
  --kd-glass-blur: blur(20px);
  --kd-glass-blur-sm: blur(12px);

  /* Shadows & Specular Highlights */
  --kd-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --kd-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --kd-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
  --kd-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.28);
  --kd-shadow-glow-pink: 0 0 40px rgba(236, 72, 153, 0.25);
  --kd-shadow-specular: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 20px rgba(255, 255, 255, 0.02);

  /* Fonts (LOCKED) */
  --kd-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --kd-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing & Layout */
  --kd-container-max: 1320px;
  --kd-container-wide: 1520px;
  --kd-header-height: 80px;
  
  /* Border Radii */
  --kd-radius-sm: 8px;
  --kd-radius-md: 14px;
  --kd-radius-lg: 20px;
  --kd-radius-xl: 28px;
  --kd-radius-full: 9999px;

  /* Transitions */
  --kd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kd-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kd-transition-fast: 0.2s var(--kd-ease);
  --kd-transition-normal: 0.35s var(--kd-ease);
  --kd-transition-slow: 0.6s var(--kd-ease);

  /* Z-Index Hierarchy */
  --kd-z-ambient: 0;
  --kd-z-content: 2;
  --kd-z-sticky: 10;
  --kd-z-header: 100;
  --kd-z-drawer: 200;
  --kd-z-cursor: 9999;
}