/* ==========================================================================
   VW Presença Digital — Design Tokens & Font Definitions
   css/tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia Auto-hospedada (WOFF2 Variable)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Display';
  src: url('/fonts/archivo-display.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/geist-sans.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variáveis Globais (:root)
   -------------------------------------------------------------------------- */

:root {
  /* Famílias Tipográficas */
  --font-display: 'Archivo Display', system-ui, -apple-system, sans-serif;
  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Superfícies Neutras Profundas do Design Original */
  --bg-base: #06080b;       /* Tinta quase preta */
  --bg-surface: #0a0d13;    /* Carbono */
  --bg-card: #10151c;       /* Grafite */
  --bg-elevated: #1a212b;   /* Linha */
  --bg-subtle: #141a22;
  --bg-glass: rgba(6, 8, 11, 0.75);

  /* Linhas e Molduras de Estúdio */
  --border-subtle: rgba(238, 240, 244, 0.09);
  --border-medium: rgba(238, 240, 244, 0.16);
  --border-focus: #bbeef8;

  /* Tipografia Original (Platina, Prata e Ardósia) */
  --text-primary: #eef0f4;    /* Platina */
  --text-secondary: #a9b1bd;  /* Prata fria */
  --text-muted: #8d97a5;      /* Ardósia / Slate */
  --text-inverse: #06080b;

  /* Cores de Acento Originais da VW (Azure & Ice) */
  --accent: #1a72bc;          /* Azul elétrico dos nós neurais */
  --accent-glow: rgba(26, 114, 188, 0.28);
  --accent-glow-subtle: rgba(26, 114, 188, 0.12);
  --accent-hover: #2185d9;
  --accent-pressed: #0f4a7d;
  --accent-ice: #bbeef8;      /* Azul gelo para destaques e linhas */
  --accent-teal: #1a72bc;
  --accent-teal-bright: #bbeef8;

  /* Status Semânticos */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;

  /* Escala de Espaçamento Modular */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2.25rem;   /* 36px */
  --space-2xl: 3.5rem;   /* 56px */
  --space-3xl: 5.5rem;   /* 88px */
  --space-4xl: 8.5rem;   /* 136px */

  /* Sistema de Forma Original: Cantos Retos de Precisão Técnica */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  /* Sombras Difusas e Cinematográficas */
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 16px 48px -4px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 35px -5px var(--accent-glow);

  /* Escala Tipográfica Fluida */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.625rem, 1.45rem + 0.88vw, 2.125rem);
  --text-3xl: clamp(2.125rem, 1.85rem + 1.38vw, 3rem);
  --text-4xl: clamp(2.75rem, 2.25rem + 2.5vw, 4.25rem);
  --text-hero: clamp(3rem, 2.2rem + 4.2vw, 6.25rem);

  /* Containers de Layout */
  --container-max: 1240px;
  --container-wide: 1400px;
  --container-narrow: 820px;
  --container-padding: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);

  /* Curvas e Durações de Movimento */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 360ms;
  --dur-slow: 850ms;
}