/* ═══════════════════════════════════════════════════════════
   TOKENS — Variáveis CSS Globais
   Cores, Tipografia, Espaçamento, Transições, Layout e Scrollbar
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Colors — Light Theme */
  --color-primary:      #3179ff;
  --color-primary-10:   rgba(49, 121, 255, 0.1);
  --color-primary-20:   rgba(49, 121, 255, 0.2);
  --color-surface:      #f2f7ff;
  --color-surface-02:   #eaeef5;
  --color-surface-03:   #e0e5ee;
  --color-surface-04:   #d4dae6;
  --color-content:      #151515;
  --color-content-60:   rgba(21, 21, 21, 0.6);
  --color-content-30:   rgba(21, 21, 21, 0.3);
  --color-content-10:   rgba(21, 21, 21, 0.1);
  --color-border:       rgba(21, 21, 21, 0.08);
  --color-border-hover: rgba(21, 21, 21, 0.2);

  /* Typography */
  --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Scale (fluid) */
  --fs-2xs: clamp(0.625rem, 1.5vw, 0.75rem);
  --fs-xs:  clamp(0.75rem, 1.8vw, 0.875rem);
  --fs-sm:  clamp(0.875rem, 2vw, 1rem);
  --fs-md:  clamp(1rem, 2.5vw, 1.125rem);
  --fs-lg:  clamp(1.125rem, 3vw, 1.375rem);
  --fs-xl:  clamp(1.5rem, 4vw, 2rem);
  --fs-2xl: clamp(2rem, 5vw, 3rem);
  --fs-3xl: clamp(2.5rem, 7vw, 4.5rem);
  --fs-4xl: clamp(3.5rem, 10vw, 7rem);
  --fs-hero: clamp(4rem, 9vw, 11rem);

  /* Spacing (8px grid) */
  --space-1: 0.5rem;    /* 8px  */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */
  --space-24: 12rem;    /* 192px */

  /* Border Radius — Tactile Brutalism */
  --radius-none: 0px;
  --radius-sm:   1px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    350ms;
  --dur-slow:    600ms;
  --dur-xslow:   900ms;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1rem, 4vw, 4rem);
  --nav-height: 72px;
}

/* Custom Scrollbar */
body::-webkit-scrollbar {
  width: 0.7rem;
}

body::-webkit-scrollbar-track {
  background: var(--color-border-hover);
}

body::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 30px;
}