/* ==========================================================================
   REEFONOMICS — Design Tokens
   Linear.app-inspired dark-first aesthetic
   ========================================================================== */

:root {
  /* Core darks */
  --color-midnight:     #0A0B1A;
  --color-surface:      #12132C;
  --color-surface-alt:  #1A1D35;

  /* Brand accents */
  --color-teal:         #0388A6;
  --color-cyan:         #04C4D9;
  --color-cyan-glow:    rgba(4, 196, 217, 0.12);
  --color-coral:        #E8734A;
  --color-coral-glow:   rgba(232, 115, 74, 0.12);

  /* Text hierarchy */
  --color-text-primary:   rgba(255, 255, 255, 0.95);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-tertiary:  rgba(255, 255, 255, 0.35);

  /* Borders */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.7rem, 0.8vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 0.9vw, 0.875rem);
  --text-base: clamp(0.95rem, 1vw, 1.0625rem);
  --text-lg:   clamp(1.05rem, 1.15vw, 1.1875rem);
  --text-xl:   clamp(1.2rem, 1.4vw, 1.375rem);
  --text-2xl:  clamp(1.4rem, 1.8vw, 1.75rem);
  --text-3xl:  clamp(1.7rem, 2.2vw, 2.25rem);
  --text-4xl:  clamp(2rem, 3vw, 3rem);
  --text-5xl:  clamp(2.5rem, 4.5vw, 4rem);

  /* Spacing (8px grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max:    1280px;
  --container-narrow: 800px;
  --container-pad:    clamp(1.25rem, 4vw, 3rem);
  --section-pad:      clamp(4.5rem, 9vw, 7.5rem);

  /* Effects */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  800ms;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;
}