/* ═══════════════════════════════════════════════
   variables.css — Design tokens & custom properties
   ═══════════════════════════════════════════════ */

:root {
  /* Brand colors */
  --cr-red:          #FF3E63;
  --cr-cyan:         #56C8D8;
  --cr-charcoal:     #3A3A3A;

  /* Dark theme backgrounds */
  --cr-bg-deep:      #0A0E17;
  --cr-bg-surface:   #111827;
  --cr-bg-elevated:  #1A2332;
  --cr-border:       #1E2A3A;

  /* Text hierarchy */
  --cr-text-primary:   #E2E8F0;
  --cr-text-secondary: #94A3B8;
  --cr-text-dim:       #475569;

  /* Terminal accents */
  --cr-green:        #4ADE80;
  --cr-amber:        #FBBF24;

  /* Glow effects */
  --cr-red-glow:     rgba(255, 62, 99, 0.15);
  --cr-cyan-glow:    rgba(86, 200, 216, 0.15);

  /* Typography */
  --font-mono:       'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Font sizes — fluid scale */
  --text-xs:         0.75rem;    /* 12px */
  --text-sm:         0.875rem;   /* 14px */
  --text-base:       1rem;       /* 16px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        1.875rem;   /* 30px */
  --text-4xl:        2.25rem;    /* 36px */
  --text-5xl:        3rem;       /* 48px */

  /* Spacing */
  --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;

  /* Layout */
  --max-width:       1200px;
  --nav-height:      64px;

  /* Borders */
  --radius-sm:       4px;
  --radius-md:       8px;

  /* Transitions */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}