/* ============================================
   SafeBlock — CSS Custom Properties (Design Tokens)
   Premium Black/Yellow/White Design System
   ============================================ */

:root {
  /* --- Primary Colors --- */
  --sb-black: #000000;
  --sb-yellow: #FFD400;
  --sb-white: #FFFFFF;

  /* --- Gray Scale --- */
  --sb-gray-950: #050505;
  --sb-gray-900: #0a0a0a;
  --sb-gray-850: #0f0f0f;
  --sb-gray-800: #111111;
  --sb-gray-750: #161616;
  --sb-gray-700: #1a1a1a;
  --sb-gray-650: #222222;
  --sb-gray-600: #2a2a2a;
  --sb-gray-500: #3a3a3a;
  --sb-gray-400: #888888;
  --sb-gray-300: #aaaaaa;
  --sb-gray-200: #cccccc;
  --sb-gray-100: #e5e5e5;
  --sb-gray-50: #f5f5f5;

  /* --- Yellow Variants --- */
  --sb-yellow-light: #ffe14d;
  --sb-yellow-dark: #c9a800;
  --sb-yellow-50: rgba(255, 212, 0, 0.05);
  --sb-yellow-10: rgba(255, 212, 0, 0.1);
  --sb-yellow-15: rgba(255, 212, 0, 0.15);
  --sb-yellow-20: rgba(255, 212, 0, 0.2);
  --sb-yellow-30: rgba(255, 212, 0, 0.3);
  --sb-yellow-40: rgba(255, 212, 0, 0.4);
  --sb-yellow-60: rgba(255, 212, 0, 0.6);
  --sb-yellow-80: rgba(255, 212, 0, 0.8);

  /* --- Semantic Colors --- */
  --sb-success: #00c853;
  --sb-danger: #ff1744;
  --sb-info: #00b0ff;
  --sb-warning: #ff9100;

  /* --- Gradients --- */
  --sb-gradient-primary: linear-gradient(135deg, var(--sb-yellow) 0%, var(--sb-yellow-dark) 100%);
  --sb-gradient-dark: linear-gradient(180deg, var(--sb-black) 0%, var(--sb-gray-900) 100%);
  --sb-gradient-card: linear-gradient(145deg, var(--sb-gray-800) 0%, var(--sb-gray-900) 100%);
  --sb-gradient-glow: linear-gradient(135deg, var(--sb-yellow-20) 0%, transparent 50%, var(--sb-yellow-10) 100%);
  --sb-gradient-hero: radial-gradient(ellipse at 20% 50%, var(--sb-yellow-10) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 20%, var(--sb-yellow-05, rgba(255,212,0,0.05)) 0%, transparent 40%),
                      linear-gradient(180deg, var(--sb-gray-950) 0%, var(--sb-black) 100%);
  --sb-gradient-border: linear-gradient(135deg, var(--sb-yellow-40), var(--sb-yellow-10), var(--sb-yellow-30));
  --sb-gradient-text: linear-gradient(90deg, var(--sb-yellow), var(--sb-yellow-light), var(--sb-white));
  --sb-gradient-section-alt: linear-gradient(180deg, var(--sb-gray-900) 0%, var(--sb-gray-950) 50%, var(--sb-gray-900) 100%);
  --sb-gradient-radial-accent: radial-gradient(circle at center, var(--sb-yellow-15) 0%, transparent 70%);

  /* --- Typography --- */
  --sb-font-heading: 'Space Grotesk', sans-serif;
  --sb-font-body: 'Inter', sans-serif;
  --sb-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid typography) */
  --sb-fs-display: clamp(2.5rem, 5vw + 1rem, 5rem);
  --sb-fs-h1: clamp(2rem, 4vw + 0.5rem, 3.75rem);
  --sb-fs-h2: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  --sb-fs-h3: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --sb-fs-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --sb-fs-h5: clamp(1.1rem, 1.2vw + 0.5rem, 1.375rem);
  --sb-fs-h6: clamp(1rem, 1vw + 0.5rem, 1.125rem);
  --sb-fs-body-lg: 1.125rem;
  --sb-fs-body: 1rem;
  --sb-fs-body-sm: 0.875rem;
  --sb-fs-caption: 0.75rem;
  --sb-fs-overline: 0.6875rem;

  /* Font Weights */
  --sb-fw-light: 300;
  --sb-fw-regular: 400;
  --sb-fw-medium: 500;
  --sb-fw-semibold: 600;
  --sb-fw-bold: 700;
  --sb-fw-extrabold: 800;

  /* Line Heights */
  --sb-lh-tight: 1.1;
  --sb-lh-snug: 1.25;
  --sb-lh-normal: 1.5;
  --sb-lh-relaxed: 1.75;

  /* Letter Spacing */
  --sb-ls-tight: -0.02em;
  --sb-ls-normal: 0;
  --sb-ls-wide: 0.05em;
  --sb-ls-wider: 0.1em;
  --sb-ls-widest: 0.2em;

  /* --- Spacing --- */
  --sb-space-2xs: 0.25rem;
  --sb-space-xs: 0.5rem;
  --sb-space-sm: 0.75rem;
  --sb-space-md: 1rem;
  --sb-space-lg: 1.5rem;
  --sb-space-xl: 2rem;
  --sb-space-2xl: 3rem;
  --sb-space-3xl: 4rem;
  --sb-space-4xl: 6rem;
  --sb-space-5xl: 8rem;
  --sb-space-6xl: 10rem;

  /* Section Padding */
  --sb-section-py: clamp(4rem, 8vw, 8rem);
  --sb-section-py-sm: clamp(3rem, 5vw, 5rem);

  /* --- Border Radius --- */
  --sb-radius-sm: 0.375rem;
  --sb-radius-md: 0.625rem;
  --sb-radius-lg: 1rem;
  --sb-radius-xl: 1.5rem;
  --sb-radius-2xl: 2rem;
  --sb-radius-full: 9999px;

  /* --- Shadows --- */
  --sb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --sb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sb-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --sb-shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);
  --sb-shadow-glow-sm: 0 0 15px var(--sb-yellow-20);
  --sb-shadow-glow-md: 0 0 30px var(--sb-yellow-30);
  --sb-shadow-glow-lg: 0 0 60px var(--sb-yellow-20), 0 0 120px var(--sb-yellow-10);
  --sb-shadow-glow-yellow: 0 4px 30px var(--sb-yellow-30), 0 0 80px var(--sb-yellow-15);
  --sb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sb-shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--sb-yellow-15);

  /* --- Glassmorphism --- */
  --sb-glass-bg: rgba(10, 10, 10, 0.7);
  --sb-glass-bg-light: rgba(20, 20, 20, 0.5);
  --sb-glass-bg-heavy: rgba(5, 5, 5, 0.85);
  --sb-glass-border: rgba(255, 255, 255, 0.08);
  --sb-glass-border-light: rgba(255, 255, 255, 0.12);
  --sb-glass-blur: blur(20px);
  --sb-glass-blur-heavy: blur(40px);

  /* --- Transitions --- */
  --sb-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --sb-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --sb-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --sb-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --sb-transition-fast: 0.15s var(--sb-ease-smooth);
  --sb-transition-base: 0.3s var(--sb-ease-smooth);
  --sb-transition-slow: 0.5s var(--sb-ease-smooth);
  --sb-transition-slower: 0.8s var(--sb-ease-out-expo);

  /* --- Z-Index Scale --- */
  --sb-z-behind: -1;
  --sb-z-base: 0;
  --sb-z-raised: 10;
  --sb-z-dropdown: 100;
  --sb-z-sticky: 200;
  --sb-z-navbar: 1000;
  --sb-z-modal: 1100;
  --sb-z-loading: 9999;
  --sb-z-cursor: 10000;

  /* --- Container Max Widths --- */
  --sb-container-sm: 540px;
  --sb-container-md: 720px;
  --sb-container-lg: 960px;
  --sb-container-xl: 1140px;
  --sb-container-xxl: 1320px;
  --sb-container-wide: 1440px;

  /* --- Navbar --- */
  --sb-navbar-height: 80px;
  --sb-navbar-height-scrolled: 64px;
}