/* ==========================================================================
   COMPUTER CITE - DESIGN TOKENS & SYSTEM VARIABLES
   Faithful replication of Vention modern engineering design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand Accent Colors (Vention Signature Coral-Orange) */
  --color-accent: #ff6a47;
  --color-accent-hover: #e65532;
  --color-accent-active: #cc4524;
  --color-accent-soft: rgba(255, 106, 71, 0.12);
  --color-accent-glow: rgba(255, 106, 71, 0.28);

  /* Dark Theme Surfaces (Engineering Grade Carbon) */
  --color-dark-bg: #0d0d0e;
  --color-dark-surface: #141416;
  --color-dark-surface-2: #1b1b1e;
  --color-dark-surface-3: #242428;
  --color-dark-surface-hover: #2a2a30;

  /* Light Theme Surfaces (Editorial Studio Gray & Clean White) */
  --color-light-bg: #f5f5f7;
  --color-light-surface: #ffffff;
  --color-light-surface-2: #ebebed;
  --color-light-surface-3: #e3e3e6;
  --color-light-surface-hover: #dadadc;

  /* Typography Colors */
  --color-text-white: #ffffff;
  --color-text-light-gray: #e6e6e8;
  --color-text-muted-light: #9a9aa0;
  --color-text-dark: #111113;
  --color-text-dark-secondary: #333338;
  --color-text-muted-dark: #6e6e76;

  /* Hairline Precision Borders */
  --color-border-dark: #26262a;
  --color-border-dark-subtle: rgba(255, 255, 255, 0.08);
  --color-border-light: #d8d8dc;
  --color-border-light-subtle: rgba(0, 0, 0, 0.06);

  /* Fonts */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Typography Scale (using clamp) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.85vw, 2rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.6vw, 3rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  --text-hero: clamp(2.75rem, 2.2rem + 3.8vw, 5.25rem);

  /* Layout Dimensions */
  --container-max: 1360px;
  --container-wide: 1520px;
  --header-height: 72px;
  --header-height-scrolled: 64px;

  /* Fluid Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: clamp(48px, 40px + 3vw, 80px);
  --space-section: clamp(64px, 50px + 5vw, 120px);

  /* Transitions & Animation Curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.18s ease;
  --transition-base: 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 32px var(--color-accent-glow);

  /* Z-Index Registry */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}