/* ============================================
   H2NEXT FRAMEWORK - SISTEMA DE TEMAS
   Arquivo compartilhado entre todas as plataformas
   ============================================ */

/* ---------- RESET UNIVERSAL ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- DESIGN TOKENS: CORES ---------- */
:root {
  /* --- Primary --- */
  --h2-primary-10:  #1a0050;
  --h2-primary-20:  #2d0080;
  --h2-primary-30:  #4100b3;
  --h2-primary-40:  #5b14e5;
  --h2-primary-50:  #7340f0;
  --h2-primary-60:  #8b6cf5;
  --h2-primary-70:  #a894f9;
  --h2-primary-80:  #c4bcfc;
  --h2-primary-90:  #e1defe;
  --h2-primary-95:  #f1efff;
  --h2-primary-99:  #fbfaff;
  --h2-primary:     #6750A4;
  --h2-on-primary:  #ffffff;

  /* --- Secondary --- */
  --h2-secondary:     #625B71;
  --h2-on-secondary:  #ffffff;
  --h2-secondary-container: #E8DEF8;
  --h2-on-secondary-container: #1D192B;

  /* --- Tertiary --- */
  --h2-tertiary:     #7D5260;
  --h2-on-tertiary:  #ffffff;
  --h2-tertiary-container: #FFD8E4;
  --h2-on-tertiary-container: #31111D;

  /* --- Error --- */
  --h2-error:        #B3261E;
  --h2-on-error:     #ffffff;
  --h2-error-container: #F9DEDC;
  --h2-on-error-container: #410E0B;

  /* --- Surface / Background --- */
  --h2-background:   #FEF7FF;
  --h2-on-background:#1D1B20;
  --h2-surface:      #FEF7FF;
  --h2-on-surface:   #1D1B20;
  --h2-surface-variant: #E7E0EC;
  --h2-on-surface-variant: #49454F;
  --h2-surface-container-lowest:  #ffffff;
  --h2-surface-container-low:     #F7F2FA;
  --h2-surface-container:         #F3EDF7;
  --h2-surface-container-high:    #ECE6F0;
  --h2-surface-container-highest: #E6E0E9;

  /* --- Outline --- */
  --h2-outline:         #79747E;
  --h2-outline-variant: #CAC4D0;

  /* --- Inverse --- */
  --h2-inverse-surface:    #322F35;
  --h2-inverse-on-surface: #F5EFF7;
  --h2-inverse-primary:    #D0BCFF;

  /* --- Sombra / Scrim --- */
  --h2-shadow:  #000000;
  --h2-scrim:   #000000;

  /* ---------- DESIGN TOKENS: TIPOGRAFIA ---------- */
  --h2-font-sans:   'Segoe UI', 'Roboto', 'Helvetica Neue', 'SF Pro Text', Arial, sans-serif;
  --h2-font-mono:   'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* Display */
  --h2-display-large:   3.5625rem;   /* 57px */
  --h2-display-medium:  2.8125rem;   /* 45px */
  --h2-display-small:   2.25rem;     /* 36px */

  /* Headline */
  --h2-headline-large:  2rem;        /* 32px */
  --h2-headline-medium: 1.75rem;     /* 28px */
  --h2-headline-small:  1.5rem;      /* 24px */

  /* Title */
  --h2-title-large:  1.375rem;       /* 22px */
  --h2-title-medium: 1rem;           /* 16px */
  --h2-title-small:  0.875rem;       /* 14px */

  /* Label */
  --h2-label-large:  0.875rem;       /* 14px */
  --h2-label-medium: 0.75rem;        /* 12px */
  --h2-label-small:  0.6875rem;      /* 11px */

  /* Body */
  --h2-body-large:   1rem;           /* 16px */
  --h2-body-medium:  0.875rem;       /* 14px */
  --h2-body-small:   0.75rem;        /* 12px */

  /* ---------- DESIGN TOKENS: ESPAÇAMENTO ---------- */
  --h2-space-0:   0;
  --h2-space-1:   0.25rem;    /* 4px  */
  --h2-space-2:   0.5rem;     /* 8px  */
  --h2-space-3:   0.75rem;    /* 12px */
  --h2-space-4:   1rem;       /* 16px */
  --h2-space-5:   1.25rem;    /* 20px */
  --h2-space-6:   1.5rem;     /* 24px */
  --h2-space-8:   2rem;       /* 32px */
  --h2-space-10:  2.5rem;     /* 40px */
  --h2-space-12:  3rem;       /* 48px */
  --h2-space-16:  4rem;       /* 64px */

  /* ---------- DESIGN TOKENS: BORDAS ---------- */
  --h2-radius-none:  0;
  --h2-radius-xs:    0.25rem;   /* 4px  */
  --h2-radius-sm:    0.5rem;    /* 8px  */
  --h2-radius-md:    0.75rem;   /* 12px */
  --h2-radius-lg:    1rem;      /* 16px */
  --h2-radius-xl:    1.75rem;   /* 28px */
  --h2-radius-full:  624.9375rem;

  /* ---------- DESIGN TOKENS: ELEVAÇÃO ---------- */
  --h2-elevation-0: none;
  --h2-elevation-1: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --h2-elevation-2: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --h2-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.3);
  --h2-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.3);
  --h2-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.3);

  /* ---------- DESIGN TOKENS: TRANSIÇÕES ---------- */
  --h2-duration-short:    150ms;
  --h2-duration-medium:   250ms;
  --h2-duration-long:     400ms;
  --h2-duration-x-long:   600ms;
  --h2-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --h2-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --h2-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --h2-easing-linear:     cubic-bezier(0, 0, 1, 1);

  /* ---------- DESIGN TOKENS: Z-INDEX ---------- */
  --h2-z-base:     0;
  --h2-z-dropdown: 1000;
  --h2-z-sticky:   1020;
  --h2-z-fixed:    1030;
  --h2-z-backdrop: 1040;
  --h2-z-modal:    1050;
  --h2-z-popover:  1060;
  --h2-z-tooltip:  1070;
  --h2-z-toast:    1080;
}

/* ---------- TEMA ESCURO ---------- */
[data-theme="dark"] {
  --h2-primary:     #D0BCFF;
  --h2-on-primary:  #381E72;

  --h2-secondary:     #CCC2DC;
  --h2-on-secondary:  #332D41;
  --h2-secondary-container: #4A4458;
  --h2-on-secondary-container: #E8DEF8;

  --h2-tertiary:     #EFB8C8;
  --h2-on-tertiary:  #492532;
  --h2-tertiary-container: #633B48;
  --h2-on-tertiary-container: #FFD8E4;

  --h2-error:        #F2B8B5;
  --h2-on-error:     #601410;
  --h2-error-container: #8C1D18;
  --h2-on-error-container: #F9DEDC;

  --h2-background:   #141218;
  --h2-on-background:#E6E0E9;
  --h2-surface:      #141218;
  --h2-on-surface:   #E6E0E9;
  --h2-surface-variant: #49454F;
  --h2-on-surface-variant: #CAC4D0;
  --h2-surface-container-lowest:  #0F0D13;
  --h2-surface-container-low:     #1D1B20;
  --h2-surface-container:         #211F26;
  --h2-surface-container-high:    #2B2930;
  --h2-surface-container-highest: #36343B;

  --h2-outline:         #938F99;
  --h2-outline-variant: #49454F;

  --h2-inverse-surface:    #E6E0E9;
  --h2-inverse-on-surface: #322F35;
  --h2-inverse-primary:    #6750A4;
}

/* ---------- UTILITÁRIOS GLOBAIS ---------- */
.h2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.h2-no-scroll {
  overflow: hidden !important;
}

/* ---------- ANIMAÇÕES GLOBAIS ---------- */
@keyframes h2-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes h2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes h2-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes h2-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes h2-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes h2-scale-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes h2-press-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   AUTOCOMPLETE / AUTOFILL PROTECTION
   Impede que o navegador sobreponha nossos
   estilos quando preenche campos automaticamente.
   Corrige: fundo azul/amarelo, cor do texto,
   floating label, bordas e ícones injetados.
   ============================================ */

/* --- BASE: Resetar o autofill em TODOS os inputs ---
   O Chrome injeta background-color !important.
   Usamos transition com delay infinito para
   nunca deixar o Chrome aplicar sua cor.
   O background real vem do box-shadow inset
   por plataforma (abaixo).
   ------------------------------------------------ */
.h2-input__native:-webkit-autofill,
.h2-input__native:-webkit-autofill:hover,
.h2-input__native:-webkit-autofill:focus,
.h2-input__native:-webkit-autofill:active {
  -webkit-text-fill-color: var(--h2-on-surface) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
  font-family: inherit !important;
  font-size: inherit !important;
  border: none !important;
  outline: none !important;
}

/* --- ANDROID / DESKTOP (Filled): fundo container-highest ---
   O field tem border-radius só no topo e overflow:hidden
   não funciona no autofill. Clip via border-radius no
   próprio input resolve o vazamento lateral.
   --------------------------------------------------------- */
[data-platform="android"] .h2-input__native:-webkit-autofill,
[data-platform="android"] .h2-input__native:-webkit-autofill:hover,
[data-platform="android"] .h2-input__native:-webkit-autofill:focus,
[data-platform="desktop"] .h2-input__native:-webkit-autofill,
[data-platform="desktop"] .h2-input__native:-webkit-autofill:hover,
[data-platform="desktop"] .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-surface-container-highest) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-surface-container-highest) inset !important;
  border-radius: var(--h2-radius-xs) var(--h2-radius-xs) 0 0 !important;
}

/* --- ANDROID / DESKTOP (Outlined): fundo do background --- */
[data-platform="android"] .h2-input--outlined .h2-input__native:-webkit-autofill,
[data-platform="android"] .h2-input--outlined .h2-input__native:-webkit-autofill:hover,
[data-platform="android"] .h2-input--outlined .h2-input__native:-webkit-autofill:focus,
[data-platform="desktop"] .h2-input--outlined .h2-input__native:-webkit-autofill,
[data-platform="desktop"] .h2-input--outlined .h2-input__native:-webkit-autofill:hover,
[data-platform="desktop"] .h2-input--outlined .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-background) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-background) inset !important;
  border-radius: var(--h2-radius-xs) !important;
}

/* --- iOS: fundo container-lowest (branco/claro) ---
   O iOS usa fundo claro e border-radius 10px.
   ------------------------------------------------- */
[data-platform="ios"] .h2-input__native:-webkit-autofill,
[data-platform="ios"] .h2-input__native:-webkit-autofill:hover,
[data-platform="ios"] .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-surface-container-lowest) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-surface-container-lowest) inset !important;
  border-radius: 10px !important;
}

[data-platform="ios"] .h2-input--outlined .h2-input__native:-webkit-autofill,
[data-platform="ios"] .h2-input--outlined .h2-input__native:-webkit-autofill:hover,
[data-platform="ios"] .h2-input--outlined .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

[data-platform="ios"] .h2-input--plain .h2-input__native:-webkit-autofill,
[data-platform="ios"] .h2-input--plain .h2-input__native:-webkit-autofill:hover,
[data-platform="ios"] .h2-input--plain .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  border-radius: 0 !important;
}

/* --- DARK MODE — todas as plataformas --- */
[data-theme="dark"][data-platform="android"] .h2-input__native:-webkit-autofill,
[data-theme="dark"][data-platform="android"] .h2-input__native:-webkit-autofill:hover,
[data-theme="dark"][data-platform="android"] .h2-input__native:-webkit-autofill:focus,
[data-theme="dark"][data-platform="desktop"] .h2-input__native:-webkit-autofill,
[data-theme="dark"][data-platform="desktop"] .h2-input__native:-webkit-autofill:hover,
[data-theme="dark"][data-platform="desktop"] .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-surface-container-highest) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-surface-container-highest) inset !important;
  -webkit-text-fill-color: var(--h2-on-surface) !important;
}

[data-theme="dark"][data-platform="ios"] .h2-input__native:-webkit-autofill,
[data-theme="dark"][data-platform="ios"] .h2-input__native:-webkit-autofill:hover,
[data-theme="dark"][data-platform="ios"] .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-surface-container-high) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-surface-container-high) inset !important;
  -webkit-text-fill-color: var(--h2-on-surface) !important;
}

[data-theme="dark"] .h2-input--outlined .h2-input__native:-webkit-autofill,
[data-theme="dark"] .h2-input--outlined .h2-input__native:-webkit-autofill:hover,
[data-theme="dark"] .h2-input--outlined .h2-input__native:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-background) inset !important;
  box-shadow: 0 0 0 1000px var(--h2-background) inset !important;
}

/* --- Floating label: forçar subida no autofill ---
   O autofill NÃO dispara :placeholder-shown.
   Usamos :-webkit-autofill para forçar o label.
   ------------------------------------------------ */
.h2-input__native:-webkit-autofill ~ .h2-input__label {
  top: 8px !important;
  transform: translateY(0) !important;
  font-size: var(--h2-label-small) !important;
  color: var(--h2-on-surface-variant) !important;
}

/* Outlined: label sobe para a borda */
.h2-input--outlined .h2-input__native:-webkit-autofill ~ .h2-input__label {
  top: 0 !important;
  transform: translateY(-50%) !important;
  font-size: var(--h2-label-small) !important;
  background: var(--h2-background) !important;
  padding: 0 4px !important;
}

/* iOS: label é estático, não precisa flutuar */
[data-platform="ios"] .h2-input__native:-webkit-autofill ~ .h2-input__label {
  position: static !important;
  transform: none !important;
  font-size: 15px !important;
  top: auto !important;
}

/* --- Firefox --- */
.h2-input__native:autofill {
  background: transparent !important;
  color: var(--h2-on-surface) !important;
}

/* --- Remover ícones injetados pelo navegador --- */
.h2-input__native::-ms-reveal,
.h2-input__native::-ms-clear {
  display: none !important;
}

.h2-input__native::-webkit-credentials-auto-fill-button,
.h2-input__native::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- Select autofill --- */
.h2-select__trigger:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--h2-surface-container-highest) inset !important;
  -webkit-text-fill-color: var(--h2-on-surface) !important;
}

/* --- Animação para detectar autofill via JS --- */
@keyframes h2-autofill-start {
  from { opacity: 1; }
  to   { opacity: 1; }
}

@keyframes h2-autofill-cancel {
  from { opacity: 1; }
  to   { opacity: 1; }
}

.h2-input__native:-webkit-autofill {
  animation-name: h2-autofill-start !important;
}

.h2-input__native:not(:-webkit-autofill) {
  animation-name: h2-autofill-cancel !important;
}