/* ============================================
   FORJA GYM — Design Tokens
   Brutalist / Industrial Gym Aesthetic
   ============================================ */

:root {
  /* ── Colors ── */
  --fundo:         hsl(0 0% 5%);
  --superficie:    hsl(0 0% 9%);
  --superficie-2:  hsl(0 0% 13%);
  --texto:         hsl(0 0% 95%);
  --texto-suave:   hsl(0 0% 60%);
  --accent:        hsl(55 100% 55%);
  --accent-dim:    hsl(55 100% 40%);
  --perigo:        hsl(0 80% 55%);
  --borda:         hsl(0 0% 18%);
  --borda-forte:   hsl(0 0% 28%);

  /* ── Typography ── */
  --font-display:  'Impact', 'Arial Black', 'Haettenschweiler', sans-serif;
  --font-body:     'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
  --font-mono:     'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Scale: modular, 1.25 ratio */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.5rem;     /* 24px */
  --fs-xl:    2rem;       /* 32px */
  --fs-2xl:   2.75rem;    /* 44px */
  --fs-3xl:   3.5rem;     /* 56px */
  --fs-hero:  clamp(3rem, 10vw, 8rem);
  --fs-giant: clamp(4rem, 14vw, 12rem);

  --fw-regular: 400;
  --fw-bold:    700;

  --lh-tight:   0.9;
  --lh-snug:    1.05;
  --lh-normal:  1.5;

  /* ── Spacing (4px grid) ── */
  --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;

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;

  /* ── Motion ── */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Breakpoints (used in @media) ── */
  --bp-sm:  40rem;   /* 640px */
  --bp-md:  48rem;   /* 768px */
  --bp-lg:  64rem;   /* 1024px */
  --bp-xl:  80rem;   /* 1280px */
}