/* ============================================================
   ORDO · DESIGN TOKENS
   Fonte única de verdade — cores, tipografia, espaçamento,
   raios, sombras, z-index, safe areas, alturas de navegação.
   (Spec §26 — corrigir o sistema, não os sintomas.)
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Cores: fundos (MEDIDAS das imagens de referência) ---- */
  --c-abs: #000808;          /* fundo geral — medido #000808 */
  --c-bg: #071111;           /* nav/superfície — medido #071111 */
  --c-bg-2: #101917;         /* card — medido #101917 */
  --c-premium: #141C1A;      /* card destaque topo — medido #141C1A */

  /* ---- Cores: verde-petróleo (identidade, medido) ---- */
  --c-petroleo: #141C1A;
  --c-floresta: #17211F;

  /* ---- Cores: dourado ---- */
  --c-ouro: #C8A36A;
  --c-ouro-claro: #D9B47C;
  --c-bronze: #9A7850;

  /* ---- Cores: texto (neutros quentes, escolhidos) ---- */
  --c-txt: #F3EBDD;
  --c-txt-2: #CFC6B7;
  --c-txt-3: #8D8A84;

  /* ---- Cores: semânticas (separadas do accent) ---- */
  --c-ok: #6FA678;
  --c-alerta: #C9A24B;
  --c-erro: #B4685E;

  /* ---- Bordas / superfícies ---- */
  --borda: rgba(200, 163, 106, 0.14);
  --borda-ouro: rgba(200, 163, 106, 0.38);
  --overlay: rgba(5, 8, 9, 0.72);

  /* ---- GLASSMORPHISM (cores MEDIDAS das imagens) ----
     Verde-petróleo escuro e profundo (#10..#17), translúcido e sutil.
     O efeito de vidro vem do blur + brilho de borda, não de verde vivo. */
  --glass-1: rgba(16, 25, 23, 0.62);         /* card — #101917 translúcido */
  --glass-2-topo: rgba(23, 33, 31, 0.72);    /* topo do card destaque #17211F */
  --glass-2-base: rgba(14, 22, 20, 0.66);    /* base do card destaque */
  --glass-3: rgba(13, 23, 22, 0.60);         /* input/busca #0D1716 */
  --glass-nav: rgba(7, 17, 17, 0.66);        /* nav #071111 */
  --glass-brilho: rgba(200, 163, 106, 0.07); /* reflexo dourado sutil do vidro */
  --blur: 22px;
  --blur-forte: 30px;
  --brilho-borda: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- Gradientes ---- */
  --grad-destaque: linear-gradient(150deg, var(--c-floresta), var(--c-bg-2));
  --grad-ouro: linear-gradient(90deg, var(--c-bronze), var(--c-ouro), var(--c-ouro-claro));
  --grad-splash: linear-gradient(180deg, var(--c-premium), var(--c-bg-2) 45%, var(--c-abs));

  /* ---- Tipografia ---- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* type scale responsiva (clamp — spec §21) */
  --fs-display: clamp(28px, 8vw, 38px);
  --fs-h1: clamp(22px, 6vw, 28px);
  --fs-h2: clamp(18px, 5vw, 22px);
  --fs-h3: 16px;
  --fs-corpo: 15px;
  --fs-peq: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- Espaçamento (escala 4pt) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Raios ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Sombras ---- */
  --sombra-card: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --sombra-flutuante: 0 12px 32px -8px rgba(0, 0, 0, 0.7);

  /* ---- Áreas de toque (spec §9 touch-first) ---- */
  --toque-min: 44px;

  /* ---- Alturas de navegação ---- */
  --h-header: 56px;
  --h-bottomnav: 62px;

  /* ---- Safe areas (spec §15) ---- */
  --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);

  /* ---- z-index (centralizado — spec §26) ---- */
  --z-base: 1;
  --z-header: 100;
  --z-bottomnav: 100;
  --z-sheet: 200;
  --z-overlay: 190;
  --z-toast: 300;
  --z-cmd: 400;

  /* ---- Larguras de conteúdo (mobile-first; centraliza em telas largas) ---- */
  --largura-conteudo: 560px;
  --largura-leitura: 62ch;
}

/* Tablet grande / desktop: o app permanece uma coluna centralizada,
   nunca uma versão desktop espremida (spec §1, §6). */
@media (min-width: 900px) {
  :root {
    --fs-display: 44px;
  }
}