/* Destinei Viagens · Design Tokens
   Fonte da verdade. Nenhum valor literal de cor, espaço, raio ou sombra
   deve ser escrito fora deste arquivo. */

:root {
  /* ---------- Cores · marca ---------- */
  --color-primary:        #0064B4;  /* Azul Destinei */
  --color-primary-hover:  #00539A;
  --color-primary-active: #004587;
  --color-secondary:      #00A0F0;  /* Azul Horizonte — nunca texto pequeno sobre branco */
  --color-secondary-soft: #E5F5FE;

  /* ---------- Cores · neutros ---------- */
  --color-ink:      #14243B;  /* Grafite — títulos e corpo */
  --color-ink-soft: #5A6B7E;  /* Cinza — texto secundário */
  --color-bg:       #FFFFFF;
  --color-bg-alt:   #F2F6FA;  /* Névoa — seções e base do neomorfismo */
  --color-border:   #DCE4EE;

  /* ---------- Cores · feedback ---------- */
  --color-success: #0E7C4A;
  --color-warning: #9A5B00;
  --color-error:   #C4262E;
  --color-info:    #00A0F0;

  /* ---------- Degradês (Flat 2.0 · baixo contraste) ---------- */
  --grad-action: linear-gradient(135deg, #0064B4 0%, #0080D6 100%);
  --grad-sky:    linear-gradient(160deg, #E3F1FB 0%, #F7FBFE 100%);
  --grad-brand:  linear-gradient(135deg, #0064B4 0%, #00A0F0 100%); /* só gráfico */

  /* ---------- Tipografia ---------- */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Work Sans', sans-serif;

  --text-h1:   2.5rem;   /* 40px */
  --text-h2:   2rem;     /* 32px */
  --text-h3:   1.5rem;   /* 24px */
  --text-h4:   1.125rem; /* 18px */
  --text-body: 1rem;     /* 16px */
  --text-sm:   .875rem;  /* 14px */
  --text-xs:   .75rem;   /* 12px */

  --leading-tight: 1.15;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  /* ---------- Espaçamento (escala 8px) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: var(--space-8);
  --grid-gutter:   var(--space-6);
  --header-h:      64px;
  --nav-item-h:    56px;  /* altura dos itens na folha mobile */

  /* ---------- Raios ---------- */
  --radius-sm:   8px;    /* inputs, botões, chips retangulares */
  --radius-md:   12px;   /* blocos internos, nav flutuante */
  --radius-lg:   16px;   /* cards, modais */
  --radius-xl:   20px;   /* barra de busca, painéis de hero */
  --radius-pill: 999px;

  /* ---------- Elevação ---------- */
  --shadow-1: 0 2px 8px   rgb(20 36 59 / .06);
  --shadow-2: 0 8px 24px  rgb(20 36 59 / .08);
  --shadow-3: 0 16px 40px rgb(20 36 59 / .13);
  --shadow-cta:       0 6px 16px  rgb(0 100 180 / .25);
  --shadow-cta-hover: 0 10px 24px rgb(0 100 180 / .35);

  /* Neomorfismo moderado — só busca, cards e controles isolados sobre Névoa */
  --shadow-neo:       -6px -6px 14px rgb(255 255 255 / .85),
                       8px  8px 20px rgb(20 36 59 / .10);
  --shadow-neo-panel: -8px -8px 20px rgb(255 255 255 / .90),
                      10px 10px 24px rgb(20 36 59 / .12);
  --shadow-neo-inset: inset  2px  2px 6px rgb(20 36 59 / .08),
                      inset -2px -2px 6px rgb(255 255 255 / .90);

  /* ---------- Glassmorphism ---------- */
  --glass-bg:     rgb(255 255 255 / .65);
  --glass-border: rgb(255 255 255 / .60);
  --glass-blur:   blur(16px) saturate(180%);
  --glass-border-ink: rgb(0 100 180 / .15);  /* contorno de controles sobre vidro */

  /* ---------- Overlays sobre fotografia ---------- */
  --overlay-base: linear-gradient(180deg, rgb(20 36 59 / 0) 35%, rgb(20 36 59 / .78) 100%);
  --overlay-veil: rgb(20 36 59 / .5);   /* mínimo .45 */

  /* ---------- Movimento ---------- */
  --ease:      all .3s ease;
  --ease-fast: all .2s ease;
  --lift:      translateY(-2px);
  --lift-card: translateY(-4px);

  /* ---------- Ícones (Lucide) ---------- */
  --icon-stroke: 1.5;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* ---------- Logo ---------- */
  --logo-w-min:    120px;  /* largura mínima do logotipo */
  --logo-h-min:    24px;   /* altura mínima do isotipo */
  --logo-w-header: 140px;

  /* ---------- Camadas ---------- */
  --z-header: 50;
  --z-modal:  100;
}


/* ============================================================
   TEMA ESCURO — v2.1
   Ativação: <html data-theme="dark">
   Não é inversão da paleta clara: é outro conjunto de tokens.
   ============================================================ */
[data-theme="dark"] {
  /* Superfícies — elevação por luminosidade, nunca preto puro */
  --color-bg:        #0B1725;  /* Noite */
  --color-bg-alt:    #142334;  /* Superfície — cards e painéis */
  --color-bg-raised: #1B2E44;  /* Elevada — hover, menus, modais */
  --color-border:    #27394F;

  /* Texto */
  --color-ink:      #E8EEF6;   /* 14,2:1 sobre Noite — AAA */
  --color-ink-soft: #A3B4C7;   /* 7,4:1 — AA */

  /* Marca clareada */
  --color-primary:        #3FA9F5;  /* 6,4:1 sobre Noite */
  --color-primary-hover:  #6FBFF9;
  --color-primary-active: #2E8FD8;
  --color-on-primary:     #08131F;  /* texto sobre o azul — nunca branco */
  --color-secondary:      #7CD0FF;
  --color-secondary-soft: #12314A;

  /* Feedback */
  --color-success: #3DD68C;
  --color-warning: #E9A93F;
  --color-error:   #FF7A7A;
  --color-info:    #7CD0FF;

  /* Degradês */
  --grad-action: linear-gradient(135deg, #3FA9F5 0%, #6FBFF9 100%);
  --grad-sky:    none;              /* sem equivalente: use --color-bg-alt */
  --grad-brand:  linear-gradient(135deg, #2E8FD8 0%, #7CD0FF 100%);

  /* Elevação */
  --shadow-1: 0 2px 8px   rgb(0 0 0 / .35);
  --shadow-2: 0 8px 24px  rgb(0 0 0 / .45);
  --shadow-3: 0 16px 40px rgb(0 0 0 / .55);
  --shadow-neo:       none;         /* relevo desligado no escuro */
  --shadow-neo-inset: inset 2px 2px 6px rgb(0 0 0 / .35);

  /* Glass — base invertida */
  --glass-bg:     rgb(11 23 37 / .60);
  --glass-border: rgb(255 255 255 / .14);
  --glass-border-ink: rgb(255 255 255 / .22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Repetir o bloco [data-theme="dark"] aqui na build,
       ou aplicar data-theme="dark" no <html> via script. */
  }
}

[data-theme="dark"] img.foto     { filter: brightness(.92); }
[data-theme="dark"] .btn-primary { color: var(--color-on-primary); }