/* ============================================================
   VARIABLES.CSS — Design Tokens
   ============================================================ */

:root {
  /* Colors */
  --color-bg-primary:   #0D1117;
  --color-bg-mid:       #161B22;
  --color-bg-light:     #1C2333;
  --color-bg-deep:      #080B10;
  --color-bg-footer:    #060810;
  --color-accent:       #58A6FF;
  --color-accent-light: #79C0FF;
  --color-accent-warm:  #388BFD;
  --color-text-primary: #E6EDF3;
  --color-text-muted:   #7D8590;
  --color-text-dark:    #0D1117;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-faint: rgba(255, 255, 255, 0.05);

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

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

  /* Container */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

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

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-out-expo);
  --transition-med:  300ms var(--ease-out-expo);
  --transition-slow: 600ms var(--ease-out-expo);

  /* Shadows */
  --shadow-glow: 0 0 40px rgba(88, 166, 255, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(88, 166, 255, 0.08);

  /* Z-index layers */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-nav:      100;
  --z-cursor:   9000;
  --z-gate:     9999;
}