@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   IDENTIDADE — Rosa Tulipa 🌷 (tokens ÚNICOS do produto; as áreas só dão apelidos a estes, nunca cores próprias)
   Branco quente é a base; o rosa é assinatura (botão principal, ativo, foco, seleção, detalhes) — nunca blocos inteiros.
   Semânticas continuam semânticas (sucesso verde, alerta âmbar, erro vermelho). Cores das FRENTES são dados
   (src/jogo/cores.js) e não passam por aqui: organização acadêmica ≠ marca.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* base */
  --color-bg: #FFFDFC;            /* branco quente — fundo de todas as telas */
  --color-bg-secondary: #FFF4F6;  /* rosado quase branco — áreas secundárias, hover de superfícies */
  --color-surface: #FFFFFF;       /* cartões, modais, popovers */
  --color-surface-soft: #FFF9FA;  /* superfície levemente quente (cartões internos) */
  /* rosa (assinatura) */
  --color-primary: #F58FA3;
  --color-primary-strong: #E96F89; /* botão principal, ativo forte */
  --color-primary-deep: #D65C77;   /* hover do botão principal */
  --color-primary-soft: #F9C2CC;   /* anéis, bordas especiais */
  --color-primary-tint: #FDE8ED;   /* selecionado (fundo) */
  --color-primary-ink: #C2536E;    /* texto/ícone rosa sobre branco (contraste AA) */
  --color-primary-rgb: 245 143 163; /* para transparências: rgb(var(--color-primary-rgb) / .1) */
  /* texto */
  --color-text: #292528;
  --color-text-secondary: #756B70;
  --color-text-disabled: #B7AEB2;
  --color-text-rgb: 41 37 40;       /* para transparências neutras (hover, trilhos, divisórias) */
  /* bordas */
  --color-border: #F0E3E6;
  --color-border-strong: #E3D0D5;
  /* semânticas (não viram rosa) */
  --color-success: #5F8A57;
  --color-success-soft: #EEF4EA;
  --color-warning: #B98A2E;
  --color-warning-soft: #FBF3DF;
  --color-danger: #B8433C;
  --color-danger-soft: #FBEAE8;
  /* tipografia: TÍTULOS → serifada; interface/botões/labels/dados → sans */
  /* EB Garamond: o delicado clássico pedido (Cormorant Garamond foi a 1ª opção, mas desenha os acentos soltos e altos —
     "você" parecia quebrado em português). Trocar a serifada = só esta linha e o @import. */
  --font-serif: "EB Garamond", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  /* forma */
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgb(var(--color-text-rgb) / .04), 0 4px 18px rgb(var(--color-text-rgb) / .05);
  --shadow-lg: 0 2px 6px rgb(var(--color-text-rgb) / .05), 0 18px 44px rgb(var(--color-text-rgb) / .10);
  /* apelidos antigos (páginas mais antigas) → os tokens novos */
  --ink: var(--color-text); --paper: var(--color-bg); --accent: var(--color-primary-ink);
  /* reservado para a tulipa como elemento futuro (divisores, estados especiais, cartas, conquistas) */
  --tulipa: "🌷";
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
main { max-width: 1440px; margin: auto; padding: 28px 5vw 0; }
nav { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em; }
a { color: inherit; text-decoration: none; }
.brand { font-size: .85rem; font-weight: 500; }
.menu span { color: var(--accent); }
.links { display: flex; gap: 2rem; }
.panel-link { opacity: .5; }
.panel-link:hover, .panel-link:focus-visible { opacity: 1; }
.hero { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 8vh 0; }
.eyebrow { margin: 0 0 2.5rem; font: .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
h1, h2 { font: 400 clamp(4rem, 10vw, 10rem)/.84 var(--font-serif); letter-spacing: -.045em; margin: 0; }
.intro { max-width: 23rem; margin: 3rem 0; font-size: 1rem; line-height: 1.55; }
.scroll { align-self: flex-start; border-bottom: 1px solid var(--ink); padding-bottom: .4rem; font: .7rem var(--font-mono); }
.scroll span { margin-left: .75rem; color: var(--accent); }
.more { display: inline-block; margin-top: 3rem; }
.explore { border-top: 1px solid var(--color-border-strong); padding: 10rem 0 8rem; }
h2 { font-size: clamp(3.5rem, 7vw, 7rem); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 5rem; background: var(--color-border-strong); border: 1px solid var(--color-border-strong); }
article { min-height: 16rem; padding: 1.5rem; background: var(--paper); display: flex; flex-direction: column; }
article span { font: .68rem var(--font-mono); color: var(--accent); }
h3 { margin: auto 0 0; font: 400 2.4rem var(--font-serif); }
article p { margin: .4rem 0 0; font-size: .83rem; }
@media (max-width: 640px) { main { padding: 22px 7vw 0; } .hero { min-height: 76vh; } .cards { grid-template-columns: 1fr; margin-top: 3rem; } .explore { padding-top: 6rem; } article { min-height: 12rem; } }

/* Guarda de login (src/backend/guarda.js): página protegida fica invisível até a verificação terminar
   (modo local libera na hora). Sem JavaScript o produto já não funciona — nada a mostrar sem verificar. */
html:not([data-auth]) body[data-protegida] { visibility: hidden; }
.auth-aviso { max-width: 30rem; margin: 18vh auto 0; padding: 0 20px; text-align: center; }
.auth-aviso-titulo { font: 400 clamp(1.9rem, 5vw, 2.4rem)/1.1 var(--font-serif); letter-spacing: -.01em; }
.auth-aviso-texto { margin: 12px 0 0; font: 400 .95rem/1.5 var(--font-sans); color: var(--color-text-secondary); }
.auth-aviso-acoes { margin: 26px 0 0; }
.auth-aviso-link { display: inline-block; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--color-primary-strong); color: #fff; font: 500 .92rem var(--font-sans); text-decoration: none; cursor: pointer; }
.auth-aviso-link:hover { background: var(--color-primary-deep); }
.auth-aviso-link:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: 3px; }