/* ================================================================
   FINDMEACLUB — DESIGN TOKENS
   Single source of truth. Edit here, changes propagate everywhere.
   ================================================================ */

:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-cyan:        #00B3C4;
  --clr-cyan-light:  #00D4E8;
  --clr-cyan-dark:   #008A99;
  --clr-green:       #00E87A;
  --clr-blue:        #0055FF;

  /* ── Backgrounds ──────────────────────────────────────── */
  --clr-bg-0:        #060608;   /* deepest — hero, auth pages   */
  --clr-bg-1:        #0C0C0F;   /* base page background          */
  --clr-bg-2:        #111116;   /* raised surface (sections)     */
  --clr-bg-3:        #18181F;   /* cards, panels                 */
  --clr-bg-4:        #202028;   /* hover states, inputs          */

  /* ── Text ─────────────────────────────────────────────── */
  --clr-txt-0:       #FFFFFF;   /* headings, primary text        */
  --clr-txt-1:       #D8D8E0;   /* body text                     */
  --clr-txt-2:       #9090A0;   /* secondary, captions           */
  --clr-txt-3:       #505060;   /* disabled, placeholders        */

  /* ── Borders ──────────────────────────────────────────── */
  --clr-border-0:    rgba(255,255,255,0.06);   /* subtle          */
  --clr-border-1:    rgba(255,255,255,0.10);   /* normal          */
  --clr-border-2:    rgba(255,255,255,0.16);   /* emphasis        */
  --clr-border-cyan: rgba(0,179,196,0.30);
  --clr-border-cyan-strong: rgba(0,179,196,0.55);

  /* ── Alpha fills ──────────────────────────────────────── */
  --clr-cyan-a10:    rgba(0,179,196,0.10);
  --clr-cyan-a15:    rgba(0,179,196,0.15);
  --clr-cyan-a20:    rgba(0,179,196,0.20);
  --clr-green-a10:   rgba(0,232,122,0.10);

  /* ── Typography ───────────────────────────────────────── */
  --font-display:    'Barlow Condensed', 'Orbitron', sans-serif;
  --font-body:       'DM Sans', 'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale (clamp: min, preferred, max) */
  --text-xs:    clamp(0.7rem,  1vw,    0.75rem);
  --text-sm:    clamp(0.8rem,  1.2vw,  0.875rem);
  --text-base:  clamp(0.875rem,1.4vw,  1rem);
  --text-md:    clamp(1rem,    1.6vw,  1.125rem);
  --text-lg:    clamp(1.1rem,  2vw,    1.375rem);
  --text-xl:    clamp(1.4rem,  3vw,    2rem);
  --text-2xl:   clamp(2rem,    4vw,    3rem);
  --text-3xl:   clamp(2.8rem,  6vw,    5rem);
  --text-hero:  clamp(3.5rem,  9vw,    8rem);

  /* ── Spacing ──────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── Border Radius ────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-cyan: 0 8px 32px rgba(0,179,196,0.25);
  --shadow-cyan-lg: 0 16px 48px rgba(0,179,196,0.35);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io:    cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:     150ms var(--ease-out);
  --t-med:      280ms var(--ease-out);
  --t-slow:     450ms var(--ease-out);

  /* ── Layout ───────────────────────────────────────────── */
  --max-w:       1320px;
  --max-w-text:  720px;
  --nav-h:       64px;
  --gutter:      clamp(1rem, 4vw, 2rem);
}