/* ==========================================================================
   DS01: FUSÃO CRIATIVA DESIGN SYSTEM — BASE.CSS
   DNA Matrix: Julian David (Estrutura Editorial Suíça) × Auton Foster (Acentos & Efeitos Futuristas)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET MODERNO & CONFIGURAÇÃO GLOBAL
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  background-color: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
  position: relative;
}

h1, h2, h3, h4, h5, h6, p, span, a, li, blockquote {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. MATRIZ DE DESIGN TOKENS (:root)
   -------------------------------------------------------------------------- */
:root {
  /* --- Superfícies Dark Mode Extraídas da Foto --- */
  --bg-base: #0c0f14;               /* Fundo de estúdio ultra profundo */
  --bg-surface: #12161b;            /* Fundo intermediário */
  --bg-surface-elevated: #242d31;   /* Fundo chumbo de apoio */
  --bg-surface-subtle: #1c2227;     /* Superfície sutil */
  --bg-card: #35393d;               /* Preto grafite da jaqueta */
  --bg-card-hover: #40454a;
  --bg-glass-pill: rgba(255, 255, 255, 0.05);
  --bg-glass-dock: rgba(12, 15, 20, 0.85);
  --bg-overlay: rgba(12, 15, 20, 0.92);

  /* --- Acentos Laranja Solar & Halo Luminoso (Extraídos da Foto) --- */
  --accent-primary: #fe8701;        /* Laranja solar vibrante principal */
  --accent-primary-hover: #ffa534;  /* Estado hover do botão */
  --accent-glow: rgba(254, 135, 1, 0.45);
  --accent-soft: rgba(254, 135, 1, 0.12);
  --accent-shadow-deep: #542805;    /* Sombra profunda âmbar/laranja */

  /* Aliases para compatibilidade total com o Design System */
  --accent-crimson: #fe8701;
  --accent-crimson-glow: rgba(254, 135, 1, 0.45);
  --accent-crimson-soft: rgba(254, 135, 1, 0.12);
  --btn-crimson: #fe8701;
  --btn-crimson-hover: #ffa534;
  --accent-orange: #fe8701;
  --accent-orange-glow: rgba(254, 135, 1, 0.45);
  --accent-orange-soft: rgba(254, 135, 1, 0.12);
  --btn-orange: #fe8701;
  --btn-orange-hover: #ffa534;
  --accent-neon: #fe8701;
  --accent-neon-glow: rgba(254, 135, 1, 0.45);
  --accent-neon-soft: rgba(254, 135, 1, 0.12);
  --accent-cobalt: #35393d;
  --accent-cobalt-glow: rgba(53, 57, 61, 0.35);
  --accent-white: #ffffff;

  /* --- Tipografia Editorial & Tons Neutros --- */
  --text-headline: #ffffff;
  --text-primary: #ffffff;
  --text-warm-bone: #eee4d5;        /* Branco osso da jaqueta */
  --text-sand: #d8c6b1;             /* Creme secundário */
  --text-secondary: #d8c6b1;
  --text-muted: #a99e93;            /* Cinza suave para legendas */
  --text-dim: #6d665f;
  --text-inverse: #0c0f14;

  /* --- Bordas & Linhas de Corte --- */
  --border-subtle: rgba(216, 198, 177, 0.12);
  --border-card: rgba(216, 198, 177, 0.16);
  --border-strong: rgba(216, 198, 177, 0.32);
  --border-interactive: rgba(254, 135, 1, 0.5);
  --border-neon: rgba(254, 135, 1, 0.5);
  --border-accent: rgba(254, 135, 1, 0.6);
  --border-divider: #242d31;

  /* --- Iluminação Atmosférica & Gradientes --- */
  --glow-ambient: radial-gradient(circle at 50% 15%, rgba(254, 135, 1, 0.14) 0%, rgba(36, 45, 49, 0.08) 35%, rgba(12, 15, 20, 0) 70%);
  --glow-beam: radial-gradient(ellipse at 50% 0%, rgba(238, 228, 213, 0.15) 0%, rgba(238, 228, 213, 0) 65%);
  --gradient-card: linear-gradient(180deg, rgba(53, 57, 61, 0.6) 0%, rgba(36, 45, 49, 0.25) 100%);
  --gradient-accent: linear-gradient(135deg, #fe8701 0%, #ffa534 100%);

  /* --- Famílias Tipográficas Harmonizadas --- */
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-condensed: 'Bebas Neue', sans-serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Chivo Mono', monospace;
  --font-signature: 'Satisfy', cursive;

  /* --- Grid & Proporção de Layout --- */
  --container-max: 1360px;
  --container-pad: clamp(1rem, 4vw, 3.5rem);
  --section-pad: clamp(3.75rem, 7vw, 8.5rem);

  /* --- Raios de Arredondamento --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Física de Molas & Transições (Framer Motion feel) --- */
  --spring-stiff: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: all 0.2s var(--spring-stiff);
  --transition-normal: all 0.35s var(--spring-stiff);
  --transition-slow: all 0.6s var(--spring-stiff);

  /* --- Sombras & Elevações --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 35px var(--accent-glow);
  --shadow-glass: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(216, 198, 177, 0.12);
}

/* --------------------------------------------------------------------------
   3. CONTAINER & ELEMENTOS ESTRUTURAIS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA BASE & HIERARQUIA VISUAL
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Seleção de Texto */
::selection {
  background: var(--accent-neon);
  color: var(--text-inverse);
}