/* ==========================================================================
   Auto Suíça — Tokens do design system (CLAUDE.md, secção 3)
   ========================================================================== */

/* Fontes de recurso com métricas aproximadas, para reduzir o layout shift
   enquanto Archivo e Manrope carregam (font-display: swap) */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Black'), local('ArialBlack');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 22%;
}

@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 104%;
  ascent-override: 102%;
  descent-override: 29%;
}

:root {
  /* Marca */
  --color-primary: #CF142C;
  --color-primary-dark: #A80F23;
  --color-dark: #141113;
  --color-graphite: #1F1D21;

  /* Neutros */
  --color-bg: #FFFFFF;
  --color-silver: #F4F4F5;
  --color-surface: #FFFFFF;
  --color-text: #141113;
  --color-text-muted: #5E5A5C;
  --color-metal: #8A8587;          /* apenas decorativo, nunca texto < 18px */
  --color-border: #E4E4E7;

  /* Estados */
  --color-error: #A80F23;
  --color-success: #2E7D32;
  --color-warning: #B26A00;

  /* Gradientes */
  --gradient-red: linear-gradient(135deg, #CF142C 0%, #A80F23 100%);
  --gradient-hero-overlay: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .85) 35%, rgba(255, 255, 255, .2) 58%, transparent 70%);
  --gradient-hero-overlay-mobile: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  --gradient-dark-overlay: linear-gradient(90deg, rgba(20, 17, 19, .92) 0%, rgba(20, 17, 19, .4) 60%, transparent 100%);

  /* Tipografia */
  --font-heading: 'Archivo', 'Archivo Fallback', 'Arial Black', sans-serif;
  --font-body: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;

  /* Forma */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 6px 20px rgba(20, 17, 19, .08);
  --shadow-card-hover: 0 14px 32px rgba(20, 17, 19, .14);
  --shadow-header: 0 6px 24px rgba(20, 17, 19, .08);
  --skew-angle: 12deg;
  --focus-ring: 2px solid var(--color-primary);

  /* Espaçamento (base 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --container: 1240px;
  --gutter: 16px;

  /* Layout */
  --header-height: 68px;
  --section-y: 48px;             /* espaço vertical padrão das secções */

  /* Movimento */
  --duration: 200ms;
  --ease: ease-out;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-y: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 84px;
    --section-y: 72px;
  }
}