/* ===================================================================
   AURA THEME — Tokens e estilos globais
   Versão 1.0 — 31/07/2026

   Este arquivo define a base visual de todas as páginas da Aura.
   Ele NÃO modifica JavaScript, Supabase, rotas, textos ou regras
   de acesso. Apenas substitui valores repetidos por variáveis CSS
   e aplica a identidade oficial da marca.

   Proporção: ~80% preto/branco, ~20% cores de acento.
   =================================================================== */

/* -------------------------------------------------------------------
   FONTES DA MARCA

   Os arquivos ficam hospedados no próprio projeto, em midia/fontes/.

   A versão anterior declarava apenas local(), sem arquivo nenhum: quem
   não tivesse Fraunces instalada — praticamente todo mundo, sobretudo
   no celular — via Georgia no lugar. A tipografia da identidade não
   chegava à tela. Medido em navegador: document.fonts.check('16px
   Fraunces') devolvia false.

   local() vem primeiro: se a pessoa já tem a fonte no sistema, nada é
   baixado. O arquivo é o segundo recurso.

   Ambas são variáveis (um arquivo cobre toda a faixa de peso), o que
   atende os pesos usados no projeto — inclusive os 760 dos títulos —
   sem baixar um arquivo por peso. Subconjunto latino apenas: 67 KB +
   47 KB.

   Servidas de 'self', o que o CSP da Aura já permite (font-src 'self').
   Nenhuma requisição a servidor externo, nenhum dado de quem usa o
   aplicativo enviado ao Google.

   Licença: SIL Open Font License 1.1 (ambas). Uso e redistribuição
   permitidos, inclusive comercial.

   Larken permanece como queda intermediária: era a fonte original do
   projeto e quem a tem instalada continua vendo-a.
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src:
    local("Fraunces"),
    url("../midia/fontes/fraunces-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    local("Inter"),
    url("../midia/fontes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Larken";
  src: local("Larken"), local("Larken Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------
   TOKENS DE DESIGN (variáveis CSS)
   ------------------------------------------------------------------- */
:root {
  /* === Cores base === */
  --aura-black: #000000;
  --aura-white: #FFFFFF;

  /* === Cores de acento (20% da interface) === */
  --aura-summer-green: #B1E4E3;
  --aura-soft-lavender: #EBDEFC;
  --aura-limoncelo: #FED141;

  /* === Alias semânticos === */
  --aura-success: var(--aura-summer-green);
  --aura-accent-cosmos: var(--aura-soft-lavender);
  --aura-accent-romance: var(--aura-soft-lavender);
  --aura-cta: var(--aura-limoncelo);

  /* === Tons neutros === */
  --aura-muted: #5F5F5F;
  --aura-soft: #F2F2F2;

  /* === Bordas === */
  --aura-border: 1px solid var(--aura-black);
  --aura-border-light: 1px solid rgba(255, 255, 255, 0.5);

  /* === Tipografia === */
  --font-display: "Fraunces", "Larken", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* === Layout === */
  --app-max-width: 440px;
  --app-wide-max-width: 520px;
  --bottom-menu-height: 104px;
  --topbar-height: 64px;

  /* === Transições === */
  --transition-fast: 160ms ease;
  --transition-base: 260ms cubic-bezier(.22, 1, .36, 1);

  /* === Safe areas === */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* -------------------------------------------------------------------
   RESET GLOBAL
   ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  background: var(--aura-white);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--aura-white);
  color: var(--aura-black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Elementos de formulário === */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

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

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

/* === Scrollbars ocultas (padrão mobile) === */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Scrollbar para Firefox */
html {
  scrollbar-width: none;
}

/* === Foco visível para acessibilidade === */
:focus-visible {
  outline: 2px solid var(--aura-black);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   UTILITÁRIOS
   ------------------------------------------------------------------- */

/* Leitor de tela apenas */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Toast / snackbar base */
.aura-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-menu-height) + 16px + var(--safe-bottom));
  z-index: 120;
  width: calc(min(100%, var(--app-max-width)) - 36px);
  max-width: 404px;
  padding: 14px 16px;
  transform: translate(-50%, 16px);
  background: var(--aura-black);
  color: var(--aura-white);
  border: var(--aura-border-light);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.aura-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Badge de notificação */
.aura-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aura-cta);
}

/* Estados de acento sutil — fundos coloridos em ~10% de opacidade */
.aura-bg-success {
  background: color-mix(in srgb, var(--aura-summer-green) 12%, transparent);
}

.aura-bg-cosmos {
  background: color-mix(in srgb, var(--aura-soft-lavender) 15%, transparent);
}

.aura-bg-romance {
  background: color-mix(in srgb, var(--aura-soft-lavender) 15%, transparent);
}

.aura-bg-cta {
  background: color-mix(in srgb, var(--aura-limoncelo) 20%, transparent);
}

/* Bordas coloridas sutis */
.aura-border-success {
  border-color: var(--aura-summer-green);
}

.aura-border-cosmos {
  border-color: var(--aura-soft-lavender);
}

.aura-border-cta {
  border-color: var(--aura-limoncelo);
}

/* Texto colorido para highlights */
.aura-text-success {
  color: var(--aura-success);
}

.aura-text-cosmos {
  color: var(--aura-accent-cosmos);
}

.aura-text-cta {
  color: var(--aura-cta);
}

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