/* ==========================================================================
   EXCLUSIVE CAR BC | Design Tokens
   ========================================================================== */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Surfaces (profundidade) ---- */
  --surface-0: #050505;
  --surface-1: #0A0B0C;
  --surface-2: #101113;
  --surface-3: #16181B;
  --line-1: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.14);

  /* ---- Marca ---- */
  --blue: #00BFFF;
  --blue-hover: #33CCFF;
  --blue-pressed: #009FD6;
  --blue-tint: rgba(0,191,255,0.06);
  --blue-tint-strong: rgba(0,191,255,0.12);
  --blue-glow: rgba(0,191,255,0.14);

  /* ---- Tipografia (ink) ---- */
  --ink-1: #F4F7FA;
  --ink-2: #C9CED4;
  --ink-3: #8B9299;
  --ink-4: #5C6269;

  /* ---- Funcionais ---- */
  --whatsapp: #25D366;
  --whatsapp-hover: #2FE076;
  --error: #F26D6D;

  /* ---- Fontes ---- */
  --font-display: 'Clash Display', 'Archivo Expanded', sans-serif;
  --font-body: 'Satoshi', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Espaçamento ---- */
  --space-section-desktop: 10rem;
  --space-section-mobile: 5.5rem;
  --gutter: 24px;
  --container-max: 1280px;

  /* ---- Raio ---- */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 700ms;

  /* ---- Sombra ---- */
  --shadow-elevated: 0 20px 60px -20px rgba(0,0,0,0.6);
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  :root { --gutter: 32px; }
}