/* ==============================================================================
   Super-Intelligence-Solutions (SIS) — Design System Tokens
   Strict adherence to Section 2 tokens
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Colors */
  --bg-void: #0a0b0e;
  --bg-deep: #05060a;
  --bg-panel: #1a1d24;
  --panel-hover: #22262f;
  --cyan: #00f0ff;
  --cyan-dim: #00b8c4;
  --violet: #7c5cff;
  --coral: #ff5c5c;
  --green: #00ff9c;
  --amber: #ffb000;
  --white: #e6e8eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;

  /* Borders */
  --border-hairline: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(0, 240, 255, 0.25);
  --border-accent-strong: rgba(0, 240, 255, 0.6);

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --fs-display-4: clamp(48px, 7vw, 96px);
  --fs-display-3: clamp(40px, 6vw, 80px);
  --fs-display-2: clamp(36px, 5vw, 64px);
  --fs-display-1: clamp(32px, 4vw, 48px);

  --fs-h1: clamp(28px, 3.5vw, 40px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-h3: clamp(20px, 2.5vw, 24px);
  --fs-h4: 20px;

  --fs-body-xl: 20px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;

  --fs-mono-lg: 14px;
  --fs-mono-md: 12px;
  --fs-mono-sm: 10px;

  /* Line Height */
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-mono: 1.4;

  /* Max Line Length */
  --max-ch: 68ch;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

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

  /* Glows */
  --glow-cyan-sm: 0 0 12px rgba(0, 240, 255, 0.2);
  --glow-cyan-md: 0 0 24px rgba(0, 240, 255, 0.35);
  --glow-cyan-lg: 0 0 48px rgba(0, 240, 255, 0.5);
  --glow-coral: 0 0 20px rgba(255, 92, 92, 0.4);
  --glow-green: 0 0 20px rgba(0, 255, 156, 0.4);

  /* Motion Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-moderate: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 900ms;
  --duration-ambient: 8000ms;
  --duration-scan: 3000ms;

  /* Motion Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* Grid Layouts */
  --container-max: 1280px;
  --grid-gutter: 32px;
  --grid-margin: 80px;
}

@media (max-width: 1024px) {
  :root {
    --grid-gutter: 24px;
    --grid-margin: 32px;
    --space-40: 100px;
  }
}

@media (max-width: 640px) {
  :root {
    --grid-gutter: 16px;
    --grid-margin: 20px;
    --space-40: 80px;
  }
}