/* ============================================
   SYNAPSE SPACE — DESIGN TOKENS
   Extracted from brand identity system
   ============================================ */

:root {
  /* === PRIMARY PALETTE === */

  /* Backgrounds */
  --canvas:     #FFFFFF;
  --linen:      #FAFBFC;
  --surface:    #F4F5F7;
  --shelf:      #ECEEF1;
  --frame:      #E0E3E8;
  --moulding:   #D1D5DC;

  /* Text */
  --ink:        #0F1419;
  --charcoal:   #2C3440;
  --slate:      #536170;
  --fog:        #8494A7;
  --haze:       #B0BEC9;

  /* Sky accent */
  --sky-whisper: #EBF5FF;
  --sky-tint:    #D7EBFF;
  --sky:         #AFD6FE;
  --sky-active:  #8EC4FD;
  --sky-deep:    #69B0FC;

  /* Functional */
  --danger:     #EF4444;
  --warning:    #F59E0B;
  --success:    #10B981;

  /* === TYPOGRAPHY === */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  /* === SPACING === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === BORDER RADIUS === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* === ANIMATION === */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;

  /* === WEBSITE-SPECIFIC === */
  --max-width:        1200px;
  --max-width-narrow: 720px;
  --nav-height:       72px;
  --nav-height-mobile: 60px;
  --sticky-bar-height: 72px;
}