/*
  tokens.css — fonte única da verdade de design.
  Cor, espaçamento, tipografia e duração de animação vivem só aqui (CLAUDE.md §7).
  Breakpoints usados no projeto: 360 / 480 / 768 / 1024 / 1280.
*/

:root {
  /* Cores — paleta "robustez confiável" (docs/fase-1-conceito.md) */
  --color-graphite: #1b1f24;
  --color-graphite-soft: #262b32;
  --color-steel: #3a4b5c;
  --color-concrete: #eef0f0; /* cinza-concreto, deliberadamente frio — evita o cliché cream+terracota do §6 */
  --color-cement: #ffffff;
  --color-signal-green: #1fa855;
  --color-signal-green-dark: #17853f;
  --color-alert-orange: #e8622c;
  --color-alert-orange-tint: #fbe4da;
  --color-alert-orange-border: #f0a688;

  --color-text-on-light: var(--color-graphite);
  --color-text-on-dark: var(--color-cement);
  --color-text-muted-on-light: #55606b;
  --color-text-muted-on-dark: #b7c0c8;
  --color-border-on-light: #e0dcd3;
  --color-border-on-dark: #3f4750;

  /* Tipografia */
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.1rem + 3vw, 2.5rem);
  --text-3xl: clamp(2.1rem, 1.2rem + 4.5vw, 3.4rem);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.06em;

  /* Espaçamento (escala 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;
  --space-11: 7.5rem;

  /* Raios e sombra */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-card: 0 8px 24px -12px rgb(27 31 36 / 0.35);
  --shadow-cta: 0 10px 30px -8px rgb(31 168 85 / 0.55);

  /* Movimento */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal-text: 500ms;
  --duration-move-lg: 750ms;
  --duration-city-fade: 150ms;
  --duration-hero-3d-reveal: 600ms;

  /* Container */
  --container-max: 1120px;
  --container-padding: var(--space-5);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-7);
  }
}