/* ============================================================
   UP YOUR REACH — DESIGN TOKENS
   Locked brand system. Every color/type/spacing decision lives here.
   ============================================================ */

:root {
  /* === COLOR · CYAN RAMP =================================== */
  --cyan-50:  #E6FAFF;
  --cyan-100: #B8F2FF;
  --cyan-200: #8AE9FF;
  --cyan-300: #5CE1FF;
  --cyan-400: #2ED9FF;
  --cyan-500: #00D0FF;   /* HERO */
  --cyan-600: #00ABD1;
  --cyan-700: #0085A3;
  --cyan-800: #006075;
  --cyan-900: #003A47;
  --cyan-950: #00151A;   /* DEEP CYAN — dominant dark surface */

  /* === COLOR · NEUTRALS ==================================== */
  --charcoal:   #1A1A1A;
  --soft-white: #F2F2F2;
  --white:      #FFFFFF;
  --black:      #000000;

  /* === COLOR · ACCENTS ===================================== */
  --signal-red:    #FF2F00;   /* CTAs, highlights, urgent */
  --voltage-yellow:#D0FF00;   /* caption only */
  --deep-indigo:   #2F00FF;   /* caption only */

  /* === COLOR · SEMANTIC ==================================== */
  --bg-dark:       var(--cyan-950);
  --bg-light:      var(--soft-white);
  --bg-pure:       var(--white);
  --fg-on-dark:    var(--soft-white);
  --fg-on-light:   var(--charcoal);
  --fg-muted-dark: rgba(242, 242, 242, 0.62);
  --fg-muted-light:rgba(26, 26, 26, 0.62);
  --rule-on-dark:  rgba(0, 208, 255, 0.18);
  --rule-on-light: rgba(26, 26, 26, 0.10);
  --card-on-dark:  rgba(0, 208, 255, 0.05);
  --card-border-on-dark: rgba(0, 208, 255, 0.14);

  /* === TYPOGRAPHY ========================================== */
  --font-sans: "Nohemi", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Butler", "Playfair Display", Georgia, serif;
  --font-script: "Allura", "Brush Script MT", cursive;

  /* === TYPE SCALE (fluid, mobile-up) ======================= */
  --text-eyebrow: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);   /* 10-12 */
  --text-xs:      clamp(0.75rem,  0.72rem + 0.15vw, 0.875rem);
  --text-sm:      clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  --text-base:    clamp(1rem,     0.97rem + 0.18vw, 1.125rem);
  --text-lg:      clamp(1.125rem, 1.07rem + 0.3vw,  1.375rem);
  --text-xl:      clamp(1.375rem, 1.27rem + 0.55vw, 1.75rem);
  --text-2xl:     clamp(1.75rem,  1.55rem + 1vw,    2.5rem);
  --text-3xl:     clamp(2.25rem,  1.9rem + 1.75vw,  3.5rem);
  --text-4xl:     clamp(2.75rem,  2.1rem + 3vw,     5rem);
  --text-display: clamp(3.5rem,   2.4rem + 5.5vw,   8rem);
  --text-mega:    clamp(5rem,     3rem + 10vw,      14rem);

  /* === LINE HEIGHT ========================================= */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* === LETTER SPACING ====================================== */
  --tracking-display: -0.025em;  /* -2.5% on display */
  --tracking-headline:-0.02em;   /* -2%  on headlines */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;    /* +18% on eyebrows */

  /* === SPACING (4-pt grid) ================================= */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  /* Section padding scales with viewport */
  --section-y: clamp(4rem, 8vw, 8rem);
  --section-x: clamp(1.25rem, 4vw, 2.5rem);

  /* === LAYOUT ============================================== */
  --content-w:  1200px;
  --reading-w:  68ch;
  --tight-w:    920px;

  /* === RADII =============================================== */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* === SHADOW & GLOW ======================================= */
  --glow-cyan:    0 0 0 1px rgba(0,208,255,0.30), 0 18px 60px -12px rgba(0,208,255,0.45);
  --glow-cyan-sm: 0 0 0 1px rgba(0,208,255,0.22), 0 8px 30px -8px rgba(0,208,255,0.35);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -24px rgba(0,0,0,0.5);
  --shadow-light: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px -24px rgba(26,26,26,0.18);

  /* === MOTION ============================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* signature easing */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.5, 0, 0, 1);

  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   480ms;
  --t-glide:  900ms;

  /* === Z LAYERS ============================================ */
  --z-base:    1;
  --z-elev:    10;
  --z-nav:     50;
  --z-modal:   100;
  --z-toast:   200;
}

/* Reduced-motion users get an instant, calm experience */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
    --t-glide: 0ms;
  }
}