/* Camburi Night — design tokens (provisórios, briefing mestre revisado v1.0 §4.2) */

/* Plus Jakarta Sans: títulos nos pesos cheios, texto nos leves. Subconjunto para
   português — o latim básico já cobre todo acento nosso, então não há segundo
   arquivo por idioma e cada peso é um pedido só. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
/* Story Script é manuscrita: entra em destaque grande, nunca em texto corrido nem
   em rótulo pequeno — traço fino em corpo miúdo não alcança o contraste medido. */
@font-face { font-family: 'Story Script'; src: url('../assets/fonts/StoryScript-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Superfícies noturnas */
  --ink-900: #100d15;
  --ink-850: #130f1a;
  --ink-800: #17121d;
  --ink-750: #160b20;
  --ink-700: #1e1726;
  --ink-600: #2a2133;
  --line: rgba(201, 190, 213, 0.14);
  --line-strong: rgba(201, 190, 213, 0.28);

  /* Marca */
  --purple: #772db7;
  --purple-bright: #9a4fe0;
  --purple-deep: #4c1a78;
  --pink: #dd73dd;
  --pink-soft: #efa8ef;
  --gold: #ffbb27;
  --gold-deep: #c88a05;

  /* Neutros */
  --paper: #faf9fc;
  --mist: #c9bed5;
  --slate: #62606a;

  /* Papéis semânticos */
  --bg: var(--ink-900);
  --surface: rgba(250, 249, 252, 0.035);
  --surface-2: rgba(250, 249, 252, 0.06);
  --fg: var(--paper);
  --fg-muted: var(--mist);
  /* Calibrado com folga sobre 4.5:1 medido, não sobre o valor nominal: texto
     fino de 12px perde até ~1.7 de razão para o antialiasing, então mirar no
     limite na conta deixa o pixel real abaixo dele. */
  --fg-dim: #9f99a7;
  /* Texto de rótulo (.eyebrow, .ph__label). Separado de --pink-soft para que o
     rosa da marca não precise mudar quando a superfície exige mais contraste. */
  --fg-label: var(--pink-soft);
  --focus: var(--gold);

  /* Estrela de favorito. Sobre fundo escuro o ouro da marca se sustenta sozinho
     como traço; sobre as fases claras ele some, e por isso as fases claras
     trocam estes três papéis por um disco de ouro com glifo escuro. */
  --fav-fill: var(--surface-2);
  --fav-ring: var(--gold);
  --fav-glyph: var(--gold);

  /* Categorias do mapa: cinco paradas da rampa violeta→rosa→dourado da marca,
     para que o ponto no mapa e a bolinha do filtro sejam a mesma cor — a legenda
     é o próprio filtro. Em hexadecimal fixo de propósito: o desenho do mapa é o
     mesmo nas quatro fases, então a cor do ponto também não pode mudar com elas. */
  --cat-baladas: #6f5bf5;
  --cat-cultura: #a84fe0;
  --cat-musica-bares: #dd73dd;
  --cat-hospedagem: #ff8a6b;
  --cat-restaurantes: #ffbb27;

  /* Mapa-base (cartografia real do .pmtiles). Família separada dos tons de
     interface de propósito: os --ink-* são superfícies de cartão, empilhados têm
     poucos pontos de diferença entre si e, usados como terra/água/via, entregam
     um mapa preto no preto. Aqui cada papel precisa de separação própria.
     Estes são os valores da fase Noite; as outras fases sobrescrevem em theme.css.
     Noite clareada em relação à primeira versão: o mapa noturno de rua precisa de
     mais degrau entre terra, água e via do que uma superfície de cartão — no
     celular, sob sol, a versão anterior lia como um retângulo preto. O halo
     continua no tom mais escuro, que é o seu papel: separar o texto do fundo.
     Monocromático de propósito: o verde da mata e o azul da água eram as duas
     únicas cores de fora da marca no desenho, e brigavam com as sete cores das
     categorias — que são a informação do mapa. Agora tudo é um só roxo e quem
     tem cor própria é o ponto. A separação entre terra, água e mata é de
     luminância, não de matiz: a água é o tom mais escuro da escala.

     Escala aberta na segunda revisão. A anterior punha terra e água a cinco
     pontos de luminância um do outro: no monitor do estúdio dava para adivinhar
     o contorno, no celular virava uma mancha só e não se achava a costa. Agora
     cada degrau é visível a olho nu, e o roxo ficou saturado em vez de
     acinzentado — foi o pedido. A via forte é o lilás mais claro porque estrada
     é o que se procura num mapa de praia depois da própria praia. */
  --map-terra: #2b2040;
  --map-agua: #150c33;
  --map-verde: #221a39;
  --map-quadra: #3d2d58;
  --map-via: #5a4480;
  --map-via-forte: #b492e8;
  --map-costa: #7e62b8;
  --map-texto: #f1e9ff;
  --map-texto-agua: #c7adf7;
  --map-halo: #0a0616;

  /* Degradês da paleta */
  --grad-brand: linear-gradient(104deg, var(--purple) 0%, var(--pink) 100%);
  --grad-dusk: linear-gradient(126deg, #4c1a78 0%, var(--purple) 38%, var(--pink) 72%, var(--gold) 100%);
  --grad-night: linear-gradient(180deg, rgba(119, 45, 183, 0) 0%, rgba(119, 45, 183, 0.22) 60%, rgba(22, 11, 32, 0.9) 100%);
  --grad-gold: linear-gradient(100deg, var(--gold) 0%, var(--pink) 100%);
  --grad-text: linear-gradient(96deg, var(--paper) 0%, var(--pink-soft) 48%, var(--gold) 100%);
  --grad-line: linear-gradient(90deg, transparent, var(--purple) 20%, var(--pink) 50%, var(--gold) 80%, transparent);

  /* Tipografia */
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Story Script', 'Plus Jakarta Sans', cursive;

  --t-hero: clamp(2.6rem, 8.2vw, 6.5rem);
  --t-d1: clamp(2rem, 5vw, 3.6rem);
  --t-d2: clamp(1.55rem, 3.2vw, 2.4rem);
  --t-d3: clamp(1.18rem, 2vw, 1.5rem);
  --t-body: clamp(0.98rem, 1.05vw, 1.08rem);
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;
  --t-eyebrow: 0.6875rem;

  /* Ritmo */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-card: 0 18px 50px -24px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 0 0 1px rgba(221, 115, 221, 0.3), 0 20px 60px -28px rgba(119, 45, 183, 0.8);

  --nav-h: 68px;
  --wrap: 1360px;

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 680ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}