/**
 * TOKENS DE DESIGN V08 (DEFINITIVOS DE PRODUÇÃO) — VIVENCE (TEMPLATE BELLA)
 * Arquivo: tokens.v08.css
 * Edição: V08.0.1 / REV02_TESTE_LOCAL
 * Gate: Gate G6 / Checkpoint 13 (Design System Final Congelado)
 * Stack: CSS Variables + Tailwind CSS 3.4.x (prefixo obrigatório 'tw-')
 * Acessibilidade: WCAG 2.1 AA e AAA em Modo Claro e Modo Escuro
 * 
 * Regras Estritas:
 * 1. ZERO @theme (Tailwind 4)
 * 2. ZERO sintaxe SCSS / Nuxt / Vue
 * 3. ZERO cores soltas fora dos tokens canônicos
 * 4. Progressive Enhancement: suporte nativo a No-JS e prefers-reduced-motion
 */

:root {
  /* =============================================================
   * 1. PALETA FUNDAMENTAL CANÔNICA (VETOR OFICIAL VIVENCE)
   * Extraída de: vivence - Logo vetor.svg (CorelDRAW X8 original)
   * ============================================================= */
  --vivence-vanilla: #F8E7D6;     /* Baunilha Suave - Base circular do logo (.fil0) */
  --vivence-olive-deep: #534A1D;  /* Oliva Profundo - Wordmark e traços principais (.fil3, .fil5) */
  --vivence-gold: #AEA07B;        /* Dourado / Oliva Suave - Molduras botânicas (.fil4, .fil1) */
  --vivence-caramel: #BC9E77;     /* Caramelo Sensorial - Acentos táteis e folhas secundárias (.fil12, .fil14) */
  --vivence-earth: #7A6C4C;       /* Terra Quente - Textos de apoio e hastes (.fil10, .fil16) */

  /* Cores Neutras e Superfícies de Apoio */
  --neutral-white: #FFFFFF;
  --neutral-offwhite: #FAF6F0;
  --neutral-dark-bg: #1E1B15;     /* Oliva Noturno Profundo */
  --neutral-dark-surface: #2A261E;/* Oliva Terra Envolvente */
  --neutral-dark-elevated: #363127;
  --neutral-dark-border: rgba(174, 160, 123, 0.18);

  /* Cores de Identificação Olfativa (Acentos de Linha e Badges) */
  --scent-rose: #D48B96;          /* Peônia / Delina Rose */
  --scent-lavender: #9D8DB8;      /* Lavanda Calma */
  --scent-marine: #7BA3B8;        /* Gotas de Mar */
  --scent-cinnamon: #A85D42;      /* Canela Prosperidade */
  --scent-citrus: #829A64;        /* Capim Limão / Alecrim */
  --scent-gold: #BC9E77;          /* Store Gold / Golden Althair */

  /* =============================================================
   * 2. PAPÉIS SEMÂNTICOS — MODO CLARO (DEFAULT / ATELIER DIURNO)
   * ============================================================= */
  --color-bg-primary: var(--vivence-vanilla);        /* #F8E7D6 - Fundo principal da página */
  --color-bg-surface: var(--neutral-white);          /* #FFFFFF - Cartões e blocos elevados */
  --color-bg-elevated: var(--neutral-offwhite);      /* #FAF6F0 - Superfícies secundárias */
  --color-bg-header: rgba(248, 231, 214, 0.92);      /* Baunilha translúcida para header fixo */
  --color-bg-overlay: rgba(30, 27, 21, 0.65);       /* Cortina de modais e drawer mobile */

  /* Tipografia e Tinta (Contrastes auditados contra #F8E7D6) */
  --color-text-primary: var(--vivence-olive-deep);   /* #534A1D -> 7.36:1 (AAA) */
  --color-text-secondary: #463E19;                   /* Oliva Escurecido -> 7.80:1 (AAA) */
  --color-text-muted: var(--vivence-earth);          /* #7A6C4C -> 5.07:1 em card branco (AA) */
  --color-text-on-accent: var(--neutral-white);      /* #FFFFFF sobre botões escuros */
  --color-text-contrast: var(--vivence-olive-deep);  /* Texto de alto contraste */

  /* Interação, Acentos e Foco */
  --color-accent-primary: var(--vivence-caramel);    /* #BC9E77 - Acento principal */
  --color-accent-hover: #A88B66;                     /* Caramelo escurecido para hover */
  --color-accent-active: #8F7453;                    /* Caramelo pressionado */
  --color-accent-subtle: rgba(188, 158, 119, 0.15);  /* Fundo de tags e badges */
  --color-focus-ring: var(--vivence-olive-deep);     /* 7.36:1 - Anel de foco acessível */

  /* Molduras, Bordas e Divisores */
  --color-border-subtle: rgba(174, 160, 123, 0.35); /* Dourado suave translúcido */
  --color-border-strong: var(--vivence-olive-deep);  /* Borda escura destacada */
  --color-border-card: rgba(83, 74, 29, 0.12);       /* Contorno suave de cards */

  /* =============================================================
   * 3. ARQUITETURA TIPOGRÁFICA & PILHAS
   * ============================================================= */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala Fluida Responsiva (clamp 360px -> 1440px) */
  --text-hero: clamp(3.5rem, 8vw + 1rem, 7.5rem);           /* 56px - 120px */
  --text-display: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);       /* 40px - 72px */
  --text-h1: clamp(2rem, 3.5vw + 0.5rem, 3rem);              /* 32px - 48px */
  --text-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);           /* 24px - 36px */
  --text-h3: clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem);        /* 20px - 24px */
  --text-body: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);       /* 16px - 18px */
  --text-sm: clamp(0.875rem, 0.25vw + 0.8rem, 0.9375rem);    /* 14px - 15px */
  --text-xs: 0.75rem;                                        /* 12px fixo */

  /* Alturas de Linha (Line-Heights) */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* =============================================================
   * 4. SISTEMA ESPACIAL & DIMENSÕES MODULARES
   * ============================================================= */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Touch Target Mínimo (W3C WCAG 2.5.5 / 2.5.8) */
  --touch-target-min: 44px;

  /* =============================================================
   * 5. ARREDONDAMENTO (BORDER RADIUS)
   * ============================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* =============================================================
   * 6. ELEVAÇÃO & SOMBRAS (CALOROSAS / TONS TERROSOS)
   * ============================================================= */
  --shadow-sm: 0 1px 2px 0 rgba(83, 74, 29, 0.05);
  --shadow-md: 0 4px 12px -1px rgba(83, 74, 29, 0.08), 0 2px 4px -2px rgba(83, 74, 29, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(83, 74, 29, 0.12), 0 4px 6px -4px rgba(83, 74, 29, 0.06);
  --shadow-warm: 0 16px 32px -8px rgba(188, 158, 119, 0.25);

  /* =============================================================
   * 7. TRANSIÇÕES & MOTION TIMING
   * ============================================================= */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-marquee: 80s;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);     /* Smooth ease out (anti-jank) */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* =============================================================
 * PAPÉIS SEMÂNTICOS — MODO ESCURO (NOTURNO / RITUAL DA CHAMA)
 * Ativado via atributo [data-theme="dark"] na tag <html> ou <body>
 * ============================================================= */
[data-theme="dark"] {
  --color-bg-primary: var(--neutral-dark-bg);        /* #1E1B15 - Oliva Profundo Noturno */
  --color-bg-surface: var(--neutral-dark-surface);    /* #2A261E - Superfície dos Cards */
  --color-bg-elevated: var(--neutral-dark-elevated);  /* #363127 - Superfícies destacadas */
  --color-bg-header: rgba(30, 27, 21, 0.92);         /* Fundo fixo do header no escuro */
  --color-bg-overlay: rgba(10, 9, 7, 0.82);          /* Máscara escura */

  /* Tipografia e Tinta (Contrastes auditados contra #1E1B15) */
  --color-text-primary: var(--vivence-vanilla);       /* #F8E7D6 -> 14.21:1 (AAA) */
  --color-text-secondary: #EAD0B8;                   /* Baunilha Suave -> 12.30:1 (AAA) */
  --color-text-muted: var(--vivence-gold);           /* #AEA07B -> 6.68:1 (AA) */
  --color-text-on-accent: var(--neutral-dark-bg);    /* #1E1B15 */
  --color-text-contrast: #FFFFFF;

  /* Interação, Acentos e Foco */
  --color-accent-primary: var(--vivence-caramel);    /* #BC9E77 -> 6.83:1 (AA) */
  --color-accent-hover: #D4B68F;                     /* Caramelo iluminado para hover */
  --color-accent-active: #C19F73;
  --color-accent-subtle: rgba(188, 158, 119, 0.20);
  --color-focus-ring: var(--vivence-caramel);        /* 6.83:1 - Foco nítido */

  /* Molduras e Divisores */
  --color-border-subtle: rgba(174, 160, 123, 0.20);
  --color-border-strong: rgba(248, 231, 214, 0.30);
  --color-border-card: var(--neutral-dark-border);

  /* Sombras em Modo Escuro */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
  --shadow-warm: 0 16px 32px -8px rgba(188, 158, 119, 0.18);
}

/* =============================================================
 * CLASSES UTILITÁRIAS COMPATÍVEIS COM TAILWIND 3 (PREFIXO 'tw-')
 * Permite aplicação direta no HTML sem acoplamento a SCSS
 * ============================================================= */

/* Superfícies e Fundos */
.tw-theme-bg-primary {
  background-color: var(--color-bg-primary);
}
.tw-theme-bg-surface {
  background-color: var(--color-bg-surface);
}
.tw-theme-bg-elevated {
  background-color: var(--color-bg-elevated);
}
.tw-theme-bg-header {
  background-color: var(--color-bg-header);
}

/* Tipografia Semântica */
.tw-theme-text-primary {
  color: var(--color-text-primary);
}
.tw-theme-text-secondary {
  color: var(--color-text-secondary);
}
.tw-theme-text-muted {
  color: var(--color-text-muted);
}
.tw-theme-text-accent {
  color: var(--color-accent-primary);
}

/* Molduras e Bordas */
.tw-theme-border-subtle {
  border-color: var(--color-border-subtle);
}
.tw-theme-border-strong {
  border-color: var(--color-border-strong);
}
.tw-theme-border-card {
  border-color: var(--color-border-card);
}

/* Acessibilidade de Foco (:focus-visible) */
.tw-focus-ring {
  outline: none;
}
.tw-focus-ring:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Touch Target Mínimo WCAG */
.tw-touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Micro-Transição Tátil de Cards (GPU Compositor: transform e box-shadow) */
.tw-card-tactile {
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .tw-card-tactile:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-warm);
    border-color: var(--color-accent-primary);
  }
  .tw-card-tactile:hover img {
    transform: scale(1.04);
  }
}
.tw-card-tactile:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 80ms;
}

/* Utilitários Visuais Acessíveis */
.tw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Contêiner de Perspectiva do Hero Flip 3D */
.tw-flip-container {
  perspective: 1200px;
}
.tw-flip-element {
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: center bottom;
}

/* Faixa Contínua do Marquee */
.tw-marquee-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.tw-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* =============================================================
 * REGRAS UNIVERSAIS DE PREFERS-REDUCED-MOTION
 * Ativadas automaticamente pelo sistema operacional do usuário
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Estabilização do Hero Flip 3D */
  .tw-flip-container,
  .tw-flip-element,
  #flip-image-wrapper,
  #flip-image-inner,
  #flip-image {
    perspective: none !important;
    transform: none !important;
    transform-style: flat !important;
  }

  /* Estabilização da Faixa Contínua do Marquee */
  .tw-marquee-track,
  #sliding-images {
    transform: none !important;
    animation: none !important;
  }
  .tw-marquee-wrapper {
    overflow-x: auto !important;
  }

  /* Estabilização dos Cards Táteis */
  .tw-card-tactile,
  .tw-card-tactile:hover,
  .tw-card-tactile:active {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
  }
  .tw-card-tactile img,
  .tw-card-tactile:hover img {
    transform: none !important;
  }
}