/* ========================================
   BYTXO TECHNOLOGIES — Design Tokens
   ======================================== */

:root {
  /* Core Brand Colors */
  --midnight:      #232323;
  --charcoal:      #333333;
  --graphite:      #4C4C4C;
  --cloud:         #F4F4F4;
  --white:         #FFFFFF;

  /* Accent */
  --accent:        #00D4AA;
  --accent-glow:   rgba(0, 212, 170, 0.2);
  --accent-dark:   #00A88A;
  --accent-light:  #33DDBB;
  --accent-subtle: rgba(0, 212, 170, 0.07);

  /* Semantic */
  --danger:        #FF4C4C;
  --danger-subtle: rgba(255, 76, 76, 0.15);

  /* Glass */
  --glass-bg:          rgba(35, 35, 35, 0.65);
  --glass-border:      rgba(244, 244, 244, 0.08);
  --glass-border-hover: rgba(244, 244, 244, 0.18);

  /* Gradients */
  --gradient-hero:    linear-gradient(135deg, #232323 0%, #1a1a2e 50%, #232323 100%);
  --gradient-accent:  linear-gradient(135deg, #00D4AA 0%, #00A88A 100%);
  --gradient-card:    linear-gradient(160deg, #2e2e2e 0%, #262626 100%);
  --gradient-text:    linear-gradient(90deg, #00D4AA, #33DDBB, #00D4AA);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Font Sizes */
  --text-xs:  clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm:  clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
  --text-lg:  clamp(1.05rem, 1rem + 0.25vw, 1.125rem);
  --text-xl:  clamp(1.15rem, 1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.3rem, 1.1rem + 0.7vw, 1.5rem);
  --text-3xl: clamp(1.6rem, 1.3rem + 1vw, 1.875rem);
  --text-4xl: clamp(1.9rem, 1.4rem + 1.5vw, 2.25rem);
  --text-5xl: clamp(2.2rem, 1.5rem + 2.5vw, 3rem);
  --text-6xl: clamp(2.6rem, 1.6rem + 3.5vw, 3.75rem);
  --text-7xl: clamp(3rem, 1.8rem + 4.5vw, 4.5rem);

  /* Spacing (8px grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:      0 10px 30px rgba(0,0,0,0.35);
  --shadow-xl:      0 20px 50px rgba(0,0,0,0.4);
  --shadow-glow:    0 0 20px var(--accent-glow);
  --shadow-glow-lg: 0 0 50px var(--accent-glow), 0 0 100px rgba(0,212,170,0.08);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tr-fast:   150ms var(--ease-out-expo);
  --tr-base:   350ms var(--ease-out-expo);
  --tr-slow:   600ms var(--ease-out-expo);
  --tr-bounce: 500ms var(--ease-out-back);

  /* Z-index */
  --z-behind:  -1;
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;

  /* Layout */
  --max-width:     1200px;
  --navbar-height: 80px;
}