/* Voar Sem Asas Design System 2026 — Core Variables & Base Styles
   Arquivo base com tokens do novo design system. Importado no header.php.
   Coexiste com CSS legado; variáveis novas não conflitam com as antigas.
*/

:root {
  color-scheme: dark light;

  /* Paleta de cores base */
  --tabaco: #2C201C;
  --duna: #ECE5DC;
  --terracota: #D36135;
  --musgo: #3A4736;
  --abissal: #0F1C23;
  --giz: #F3F4F1;
  --cobre: #C27F59;
  --ameixa: #1A0D16;
  --alabastro: #FDF9F5;
  --bordeaux: #E32D65;

  /* Tipografia */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'DM Sans', Inter, system-ui, sans-serif;

  /* Animação */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Layout */
  --shell: min(1680px, calc(100vw - 8vw));
  --shell-narrow: min(1180px, calc(100vw - 8vw));
  --radius-soft: 28px;
  --radius-wide: 42px;

  /* Tema escuro (padrão) */
  --bg-primary: var(--tabaco);
  --bg-secondary: #241916;
  --text-primary: var(--duna);
  --text-muted: rgba(236, 229, 220, .68);
  --text-soft: rgba(236, 229, 220, .46);
  --accent: var(--terracota);
  --accent-ink: #fff7f0;
  --line-divider: rgba(236, 229, 220, .16);
  --line-strong: rgba(236, 229, 220, .34);
  --glass-clear: rgba(44, 32, 28, .18);
  --glass-bg: rgba(44, 32, 28, .42);
  --glass-frosted: rgba(44, 32, 28, .58);
  --glass-border: rgba(236, 229, 220, .38);
  --glass-elevated: rgba(44, 32, 28, .72);
  --shadow-atmospheric: 0 32px 90px rgba(10, 6, 5, .28);
  --btn-bg: var(--duna);
  --btn-text: var(--tabaco);
  --photo-filter: saturate(.78) contrast(1.08) brightness(.86);
  --scrim-a: rgba(20, 12, 10, .82);
  --scrim-b: rgba(44, 32, 28, .28);
  --body-grain: radial-gradient(circle at 15% 10%, rgba(211,97,53,.18), transparent 30%), radial-gradient(circle at 80% 35%, rgba(58,71,54,.24), transparent 26%), linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));

  /* Fabric pattern (decorativo) */
  --fabric-bg: color-mix(in srgb, var(--tabaco) 88%, var(--musgo));
  --fabric-thread: color-mix(in srgb, var(--duna) 72%, var(--cobre));
  --fabric-thread-soft: color-mix(in srgb, var(--fabric-thread) 38%, transparent);
  --fabric-accent: var(--terracota);
  --fabric-density: 24;
  --fabric-intensity: .72;
  --fabric-speed: .42;

  /* Gradientes */
  --gradient-bg: var(--tabaco);
  --gradient-color-1: var(--terracota);
  --gradient-color-2: var(--cobre);
  --gradient-color-3: var(--musgo);
  --gradient-color-4: var(--bordeaux);
  --gradient-speed: .36;
  --gradient-grain: .18;
  --gradient-intensity: .82;
}

/* Tema claro */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: var(--duna);
  --bg-secondary: #e2d7cb;
  --text-primary: var(--tabaco);
  --text-muted: rgba(44, 32, 28, .72);
  --text-soft: rgba(44, 32, 28, .48);
  --accent: var(--terracota);
  --accent-ink: #fff9f4;
  --line-divider: rgba(44, 32, 28, .17);
  --line-strong: rgba(44, 32, 28, .46);
  --glass-clear: rgba(236, 229, 220, .26);
  --glass-bg: rgba(236, 229, 220, .44);
  --glass-frosted: rgba(236, 229, 220, .62);
  --glass-border: rgba(44, 32, 28, .44);
  --glass-elevated: rgba(236, 229, 220, .78);
  --shadow-atmospheric: 0 32px 90px rgba(44, 32, 28, .14);
  --btn-bg: var(--tabaco);
  --btn-text: var(--duna);
  --photo-filter: saturate(.86) contrast(1.02) brightness(.98);
  --body-grain: radial-gradient(circle at 14% 10%, rgba(211,97,53,.13), transparent 31%), radial-gradient(circle at 82% 33%, rgba(58,71,54,.14), transparent 26%), linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
}

/* Paleta fria */
:root[data-palette="frio"] {
  --tabaco: var(--abissal);
  --duna: var(--giz);
  --terracota: var(--cobre);
  --musgo: #233940;
}

/* Paleta vinho */
:root[data-palette="vinho"] {
  --tabaco: var(--ameixa);
  --duna: var(--alabastro);
  --terracota: var(--bordeaux);
  --musgo: #4b2735;
}

/* ===== BASE STYLES ===== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg-primary);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--body-grain);
  color: var(--text-primary);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

/* Focus visible para acessibilidade */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 4px;
}

/* Skip link para acessibilidade */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 999;
  transform: translateY(-140%);
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: .8rem 1rem;
  border-radius: 999px;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ===== RESPETO A PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* ===== FASE 2: MAPEAMENTO DE VARIÁVEIS LEGADAS PARA 2026 ===== */
/* Esse bloco faz a ponte entre o sistema antigo e o novo.
   Com isso, todo o CSS legado que usa --ink, --paper, --rust etc
   passa a usar automaticamente as cores do Design System 2026.
   Quando migrarmos o CSS componente por componente, podemos
   remover essas linhas gradualmente. */

:root {
  /* Cores principais */
  --paper: var(--duna);           /* Cor de fundo clara antiga → nova */
  --ink: var(--tabaco);           /* Cor de texto escura antiga → nova */
  --rust: var(--terracota);       /* Cor de destaque antiga → nova */
  --dark: var(--tabaco);          /* Fundo escuro */
  --dark-2: var(--bg-secondary);  /* Fundo escuro alternativo */

  /* Cores secundárias */
  --warm: var(--cobre);           /* Tom quente */
  --cool: var(--musgo);           /* Tom frio */
  --aged: var(--bg-secondary);    /* Tom envelhecido */
  --soft: var(--bg-secondary);    /* Tom suave */

  /* Destaque e variações */
  --rust-light: var(--accent-ink);      /* Destaque claro */
  --rust-hover: var(--terracota);       /* Hover do destaque */
  --action: var(--terracota);           /* Cor de ação (links, botões) */

  /* Linhas e bordas */
  --line: var(--line-divider);          /* Linhas divisórias */
  --taupe: var(--line-divider);         /* Bordas neutras */

  /* Texto */
  --muted: var(--text-muted);           /* Texto secundário */
  --text-soft: var(--text-soft);        /* Texto suave */

  /* Cores complementares antigas (mapeadas para as mais próximas) */
  --lav: color-mix(in srgb, var(--terracota) 32%, #76539e);  /* Lavanda */
  --lav-dark: color-mix(in srgb, var(--terracota) 54%, var(--tabaco));
  --peach: var(--accent-ink);           /* Pêssego */
  --cream: var(--alabastro);            /* Creme */

  /* Composições antigas */
  --warm-tint: color-mix(in srgb, var(--cobre) 12%, var(--duna));
  --cool-tint: color-mix(in srgb, var(--musgo) 10%, var(--duna));
  --warm-ink: color-mix(in srgb, var(--cobre) 45%, var(--tabaco));
  --cool-ink: color-mix(in srgb, var(--musgo) 45%, var(--tabaco));

  /* Texto sobre destaque */
  --on-rust: var(--accent-ink);
  --on-accent: var(--accent-ink);

  /* Labels */
  --label-on-dark: var(--duna);

  /* Tipografia - mapeamento para as novas fontes */
  --serif: var(--font-display);   /* Fonte serifada antiga → Playfair Display */
  --sans: var(--font-ui);          /* Fonte sans antiga → DM Sans */

  /* Botões (mantém compatibilidade com sistema antigo de botões) */
  --button-fill: var(--btn-bg);
  --button-fill-hover: var(--accent);
  --button-ink: var(--btn-text);

  /* Gradientes (desabilitados por enquanto, podem ser reativados depois) */
  --gradient-sunset: none;
  --gradient-dusk: none;
  --gradient-mist: none;
  --hero-wash: none;
}

/* Ajuste do tema claro para variáveis legadas */
:root[data-theme="light"] {
  --paper: var(--duna);
  --ink: var(--tabaco);
  --dark: var(--tabaco);
  --button-fill: var(--btn-bg);
  --button-ink: var(--btn-text);
}