/* ============================================================
 * ViajaLead — Design Tokens (v2 · Editorial Confiança)
 * ------------------------------------------------------------
 * Realinhamento à identidade do brand book real:
 *   Teal  #0C5460 · primary
 *   Coral #E8704C · accent
 *   Cream #FAF8F4 · canvas
 *   Ink   #1A2D31 · text contrast
 *
 * Substitui o sistema gold/sage anterior. Mantém os aliases
 * `--c-*`, `--vl-*`, `--r-*`, `--shadow-*` para que o restante
 * do código existente continue funcionando enquanto o codex faz
 * a migração progressiva (search & replace).
 * ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 1. ESCALA DE COR ---------- */
  /* Teal (primary) — destinos, confiança, navegação principal */
  --vl-teal-50:  #EAF2F3;
  --vl-teal-100: #C9DDE1;
  --vl-teal-200: #94BCC2;
  --vl-teal-300: #5B9AA3;
  --vl-teal-400: #2E7B86;
  --vl-teal-500: #0C5460;   /* ★ brand */
  --vl-teal-600: #094753;
  --vl-teal-700: #07383F;
  --vl-teal-800: #052930;
  --vl-teal-900: #031C21;

  /* Coral (accent) — ação, energia, destaque editorial */
  --vl-coral-50:  #FCEEE8;
  --vl-coral-100: #F9D6C7;
  --vl-coral-200: #F2AB8C;
  --vl-coral-300: #ED8B65;
  --vl-coral-400: #EA7A54;
  --vl-coral-500: #E8704C;  /* ★ brand */
  --vl-coral-600: #C95C3C;
  --vl-coral-700: #9E4530;
  --vl-coral-800: #6F2F22;

  /* Sand (neutro quente · cream) */
  --vl-sand-50:  #FDFCF9;
  --vl-sand-100: #FAF8F4;   /* ★ brand canvas */
  --vl-sand-200: #F2EEE6;
  --vl-sand-300: #E6DFD1;
  --vl-sand-400: #C9C0AE;
  --vl-sand-500: #9A9384;
  --vl-sand-600: #6B6557;
  --vl-sand-700: #44402F;

  /* Ink (frio profundo) */
  --vl-ink-50:  #EEF1F2;
  --vl-ink-100: #D2D8DA;
  --vl-ink-300: #7C8A8E;
  --vl-ink-500: #3A4D52;
  --vl-ink-700: #1A2D31;    /* ★ brand */
  --vl-ink-900: #0A1518;

  /* Funcionais (curados para coexistir com a paleta) */
  --vl-success-50:  #E8F2EC;
  --vl-success-500: #2F8757;
  --vl-success-700: #1E5C3A;

  --vl-warning-50:  #FBF1DE;
  --vl-warning-500: #C9883B;
  --vl-warning-700: #8C5C1F;

  --vl-danger-50:   #FBE6E4;
  --vl-danger-500:  #C44536;
  --vl-danger-700:  #8B2D22;

  --vl-info-50:     #E0EEF1;
  --vl-info-500:    #2A6FDB;
  --vl-info-700:    #1A4DA0;

  /* ---------- 2. TOKENS SEMÂNTICOS ---------- */
  /* Backgrounds */
  --vl-bg:           var(--vl-sand-100);
  --vl-bg-elevated:  var(--vl-sand-50);
  --vl-bg-sunken:    var(--vl-sand-200);
  --vl-bg-warm:      var(--vl-sand-100);
  --vl-surface:      #FFFFFF;
  --vl-surface-soft: var(--vl-sand-200);
  --vl-surface-raised: rgba(255, 255, 255, 0.94);
  --vl-overlay:      rgba(10, 21, 24, 0.62);

  /* Foreground / texto */
  --vl-text:         var(--vl-ink-700);
  --vl-ink:          var(--vl-ink-700);
  --vl-ink-strong:   var(--vl-ink-900);
  --vl-text-soft:    var(--vl-ink-500);
  --vl-text-muted:   var(--vl-ink-300);
  --vl-text-inverse: var(--vl-sand-100);

  /* Bordas */
  --vl-line:         rgba(26, 45, 49, 0.10);
  --vl-line-strong:  rgba(26, 45, 49, 0.18);
  --vl-line-focus:   var(--vl-coral-500);

  /* Marca */
  --vl-primary:        var(--vl-teal-500);
  --vl-primary-hover:  var(--vl-teal-600);
  --vl-primary-soft:   var(--vl-teal-50);
  --vl-on-primary:     #FFFFFF;

  --vl-accent:         var(--vl-coral-500);
  --vl-accent-strong:  var(--vl-coral-600);
  --vl-accent-hover:   var(--vl-coral-600);
  --vl-accent-soft:    var(--vl-coral-50);
  --vl-on-accent:      #FFFFFF;

  /* Painel administrativo (sidebar profundo) */
  --vl-panel-bg:       var(--vl-ink-700);
  --vl-panel-bg-soft:  var(--vl-ink-500);
  --vl-panel-text:     rgba(250, 248, 244, 0.86);
  --vl-panel-text-muted: rgba(250, 248, 244, 0.52);
  --vl-panel-active:   var(--vl-coral-500);
  --vl-panel-line:     rgba(250, 248, 244, 0.10);

  /* Estados funcionais */
  --vl-success:        var(--vl-success-500);
  --vl-success-soft:   var(--vl-success-50);
  --vl-warning:        var(--vl-warning-500);
  --vl-warning-soft:   var(--vl-warning-50);
  --vl-danger:         var(--vl-danger-500);
  --vl-danger-soft:    var(--vl-danger-50);
  --vl-info:           var(--vl-info-500);
  --vl-info-soft:      var(--vl-info-50);

  /* ---------- 3. TIPOGRAFIA ---------- */
  --vl-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --vl-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --vl-font-panel: "IBM Plex Sans", sans-serif;
  --vl-font-mono:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Escala fluida (clamp) */
  --vl-fs-2xs: 0.6875rem;  /* 11 */
  --vl-fs-xs:  0.75rem;    /* 12 */
  --vl-fs-sm:  0.8125rem;  /* 13 */
  --vl-fs-md:  0.9375rem;  /* 15 */
  --vl-fs-base:1rem;       /* 16 */
  --vl-fs-lg:  1.125rem;   /* 18 */
  --vl-fs-xl:  1.375rem;   /* 22 */
  --vl-fs-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);   /* 28-36 */
  --vl-fs-3xl: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);      /* 36-48 */
  --vl-fs-4xl: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);       /* 48-72 */

  /* Pesos & line-heights */
  --vl-fw-regular: 400;
  --vl-fw-medium:  500;
  --vl-fw-semi:    600;
  --vl-fw-bold:    700;

  --vl-lh-tight:   1.08;
  --vl-lh-heading: 1.18;
  --vl-lh-body:    1.55;
  --vl-lh-relaxed: 1.72;

  /* Tracking */
  --vl-ls-display: -0.02em;
  --vl-ls-tight:   -0.01em;
  --vl-ls-normal:  0em;
  --vl-ls-eyebrow: 0.14em;

  /* ---------- 4. ESPAÇAMENTO (base 4) ---------- */
  --vl-space-1:  0.25rem;   /* 4  */
  --vl-space-2:  0.5rem;    /* 8  */
  --vl-space-3:  0.75rem;   /* 12 */
  --vl-space-4:  1rem;      /* 16 */
  --vl-space-5:  1.25rem;   /* 20 */
  --vl-space-6:  1.5rem;    /* 24 */
  --vl-space-8:  2rem;      /* 32 */
  --vl-space-10: 2.5rem;    /* 40 */
  --vl-space-12: 3rem;      /* 48 */
  --vl-space-16: 4rem;      /* 64 */
  --vl-space-20: 5rem;      /* 80 */
  --vl-space-24: 6rem;      /* 96 */
  --vl-space-32: 8rem;      /* 128 */

  /* ---------- 5. RAIO ---------- */
  --vl-radius-xs:   2px;
  --vl-radius-sm:   6px;
  --vl-radius-md:   10px;
  --vl-radius-lg:   16px;
  --vl-radius-xl:   24px;
  --vl-radius-2xl:  32px;
  --vl-radius-pill: 999px;

  /* ---------- 6. SOMBRAS (tom teal) ---------- */
  --vl-shadow-xs: 0 1px 2px rgba(12, 84, 96, 0.06);
  --vl-shadow-sm: 0 2px 6px rgba(12, 84, 96, 0.08);
  --vl-shadow-md: 0 8px 24px rgba(12, 84, 96, 0.10);
  --vl-shadow-lg: 0 20px 48px rgba(12, 84, 96, 0.14);
  --vl-shadow-xl: 0 32px 80px rgba(12, 84, 96, 0.20);
  --vl-shadow-focus: 0 0 0 4px rgba(232, 112, 76, 0.28);
  --vl-focus: var(--vl-shadow-focus);

  /* ---------- 7. MOTION ---------- */
  --vl-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --vl-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --vl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vl-dur-swift:  150ms;
  --vl-dur-smooth: 240ms;
  --vl-dur-gentle: 400ms;
  --vl-dur-slow:   640ms;

  /* ---------- 8. LAYOUT ---------- */
  --vl-container-narrow: 880px;
  --vl-container:        1200px;
  --vl-container-wide:   1440px;
  --vl-nav-height:       72px;
  --vl-z-nav:    100;
  --vl-z-modal:  1000;
  --vl-z-toast:  1100;
  --vl-footer-bg: var(--vl-ink-700);
  --vl-footer-text: rgba(250, 248, 244, 0.72);
  --vl-on-footer: var(--vl-sand-100);
  --vl-sidebar-start: var(--vl-ink-700);
  --vl-sidebar-end: var(--vl-ink-900);

  /* ============================================================
   * ALIASES de compatibilidade (manter durante migração)
   * Codex pode remover gradualmente conforme refatora cada arquivo.
   * ============================================================ */
  --c-ink:         var(--vl-text);
  --c-ink-soft:    var(--vl-text-soft);
  --c-cream:       var(--vl-bg);
  --c-cream-warm:  var(--vl-bg-sunken);
  --c-white:       var(--vl-surface);
  --c-text:        var(--vl-text);
  --c-text-soft:   var(--vl-text-soft);
  --c-text-muted:  var(--vl-text-muted);
  --c-line:        var(--vl-line);
  --c-line-strong: var(--vl-line-strong);
  /* gold/sage → mapeados para os novos accents */
  --c-gold:        var(--vl-coral-500);
  --c-gold-deep:   var(--vl-coral-600);
  --c-gold-light:  var(--vl-coral-50);
  --c-sage:        var(--vl-success);
  --c-sage-light:  var(--vl-success-soft);
  --c-coral:       var(--vl-danger);
  --c-coral-light: var(--vl-danger-soft);
  --c-amber:       var(--vl-warning);
  --c-amber-light: var(--vl-warning-soft);
  --c-blue:        var(--vl-info);
  --c-blue-light:  var(--vl-info-soft);
  --c-mist:        var(--vl-sand-300);

  --r-sm:    var(--vl-radius-sm);
  --r-md:    var(--vl-radius-md);
  --r-lg:    var(--vl-radius-lg);
  --r-xl:    var(--vl-radius-xl);

  --shadow-sm: var(--vl-shadow-sm);
  --shadow-md: var(--vl-shadow-md);
  --shadow-lg: var(--vl-shadow-lg);
  --shadow-xl: var(--vl-shadow-xl);

  --font-sans:  var(--vl-font-sans);
  --font-serif: var(--vl-font-serif);
  --font-panel: var(--vl-font-panel);

  --fw-regular:  var(--vl-fw-regular);
  --fw-medium:   var(--vl-fw-medium);
  --fw-semibold: var(--vl-fw-semi);
  --fw-bold:     var(--vl-fw-bold);

  --fs-2xs:     var(--vl-fs-2xs);
  --fs-xs:      var(--vl-fs-xs);
  --fs-sm:      var(--vl-fs-sm);
  --fs-md:      0.875rem;
  --fs-base:    var(--vl-fs-md);
  --fs-lg:      var(--vl-fs-lg);
  --fs-xl:      var(--vl-fs-xl);
  --fs-2xl:     1.75rem;
  --fs-display: clamp(2.35rem, 5vw, 4.75rem);

  --lh-tight:   1.15;
  --lh-heading: 1.22;
  --lh-body:    var(--vl-lh-body);
  --lh-relaxed: 1.7;

  --ls-normal:  var(--vl-ls-normal);

  --ease:       var(--vl-ease-inout);
  --ease-slow:  var(--vl-ease-out);
}

/* ============================================================
 * DARK MODE
 * Mesmas variáveis semânticas reapontadas. Telas que usam tokens
 * herdam dark sem mexer em CSS de componente.
 * ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --vl-bg:           #08171B;
  --vl-bg-elevated:  #0F2227;
  --vl-bg-sunken:    #051114;
  --vl-bg-warm:      #0F2227;
  --vl-surface:      #112A30;
  --vl-surface-soft: #163840;
  --vl-surface-raised: rgba(17, 42, 48, 0.94);
  --vl-overlay:      rgba(0, 0, 0, 0.66);

  --vl-text:         #F2EEE6;
  --vl-ink:          #F2EEE6;
  --vl-ink-strong:   #FFFFFF;
  --vl-text-soft:    #C7C0B0;
  --vl-text-muted:   #8A8676;
  --vl-text-inverse: var(--vl-ink-700);

  --vl-line:         rgba(242, 238, 230, 0.10);
  --vl-line-strong:  rgba(242, 238, 230, 0.20);

  --vl-primary:        var(--vl-teal-200);
  --vl-primary-hover:  var(--vl-teal-100);
  --vl-primary-soft:   rgba(148, 188, 194, 0.14);
  --vl-on-primary:     var(--vl-ink-900);

  --vl-accent:         #F1845F;
  --vl-accent-strong:  #F1845F;
  --vl-accent-hover:   #F49775;
  --vl-accent-soft:    rgba(232, 112, 76, 0.16);

  --vl-panel-bg:       #06141A;
  --vl-panel-bg-soft:  #112A30;
  --vl-footer-bg:      #06141A;
  --vl-footer-text:    rgba(250, 248, 244, 0.70);
  --vl-sidebar-start:  #112A30;
  --vl-sidebar-end:    #06141A;

  --vl-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
  --vl-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.36);
  --vl-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.50);
}

/* ============================================================
 * RESET MÍNIMO + DEFAULTS DE PÁGINA
 * (opcional — pode ser removido se houver reset global existente)
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--vl-font-sans);
  font-size: var(--vl-fs-base);
  line-height: var(--vl-lh-body);
  color: var(--vl-text);
  background: var(--vl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.panel {
  --vl-font-sans: var(--vl-font-panel);
  --vl-font-serif: var(--vl-font-panel);
  --font-sans: var(--vl-font-panel);
  --font-serif: var(--vl-font-panel);
  --font-panel: var(--vl-font-panel);
  --fs-base: 0.9375rem;
  --fs-display: 1.75rem;
}

/* ============================================================
 * UTILITÁRIOS DE TIPO (serve aos cabeçalhos editoriais)
 * ============================================================ */
.vl-display, .vl-h1, .vl-h2, .vl-h3 {
  font-family: var(--vl-font-serif);
  font-weight: var(--vl-fw-medium);
  color: var(--vl-text);
  letter-spacing: var(--vl-ls-display);
  line-height: var(--vl-lh-tight);
  margin: 0;
}
.vl-display { font-size: var(--vl-fs-4xl); }
.vl-h1      { font-size: var(--vl-fs-3xl); line-height: var(--vl-lh-heading); }
.vl-h2      { font-size: var(--vl-fs-2xl); line-height: var(--vl-lh-heading); }
.vl-h3      { font-size: var(--vl-fs-xl);  line-height: var(--vl-lh-heading); }

.vl-eyebrow {
  font-family: var(--vl-font-sans);
  font-size: var(--vl-fs-xs);
  font-weight: var(--vl-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--vl-ls-eyebrow);
  color: var(--vl-accent);
}
.vl-eyebrow--ink { color: var(--vl-text-soft); }

.vl-italic-serif {
  font-family: var(--vl-font-serif);
  font-style: italic;
  font-weight: var(--vl-fw-regular);
  color: var(--vl-accent);
}