/* =============================================================
   THE RIVERLAND — tokens de design
   Direção C · "Meia-Noite no Rio"  ·  Tipografia: Par 3 cinematográfico

   REGRA DE OURO DESTA PALETA
   O ouro é o único acento decorativo. O azul-rio é reservado ao que é
   clicável e ao que informa — nunca decorativo. No dia em que o azul
   aparecer numa moldura ou o ouro num link, a paleta deixa de funcionar.

   Todos os tons de texto abaixo foram medidos contra as três superfícies
   (chão, superfície, superfície elevada) e passam WCAG AA no pior caso.
   Os rácios em comentário são esse pior caso.
   ============================================================= */

:root {
  /* ---------- superfícies ---------- */
  --ground:      #0A0F0D;  /* fundo da página — quase-preto de viés verde */
  --surface:     #121815;  /* cartões, painéis */
  --surface-2:   #18201C;  /* elevação: hover, cartão dentro de cartão */
  --edge:        #1E2825;  /* molduras e divisórias */
  --edge-strong: #2C3934;  /* molduras que precisam de se ver */

  /* ---------- texto ---------- */
  --ink:      #EDE7DA;  /* texto principal        · 13.50 AAA */
  --ink-dim:  #8D9490;  /* texto secundário       ·  5.36 AA  */
  /* NÃO usar para texto: falha AA. Só divisórias, ícones inativos, ornamentos. */
  /* 3.46 sobre o chão — NÃO CHEGA para texto normal, que precisa de 4.5. Era o
     único dos três sem número anotado, e por isso foi parar a sete sítios do
     painel onde havia texto para ler, incluindo células de tabela com dados.
     Serve para texto grande (≥24px, que se basta com 3.0) e para o que não é
     texto. Para o resto, --ink-dim. */
  --ink-mute: #626A66;

  /* ---------- ouro: acento, ações, ênfase ---------- */
  --gold:      #E8C26A;  /*  9.79 AAA */
  --gold-deep: #C9A24A;  /*  6.93 AA — estados premidos e hover de superfícies douradas */

  /* ---------- rio: só o que é clicável e o que informa ---------- */
  --river:        #5695B0;  /*  5.01 AA  — links em texto corrido */
  --river-bright: #79B0C6;  /*  7.00 AAA — hover e foco */

  /* ---------- semântica (independente do acento) ---------- */
  --good: #7BA37E;  /* 5.85 AA — online, concluído, natureza */
  --warn: #D9A441;  /* 7.40 AAA */
  --bad:  #D2685C;  /* 4.65 AA */

  /* texto que assenta sobre fundos de acento */
  --on-accent: var(--ground);  /* 11.37 sobre ouro · 5.82 sobre rio */

  /* ---------- tipografia ---------- */
  /* Cinzel Decorative é uma display com ornamentos: só h1 e h2, e nunca em
     texto corrido nem a tamanhos pequenos. Dos h3 para baixo usa-se Lora 600,
     que mantém o tom sem o ruído. */
  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-util:    'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* escala de tipo — razão 1.2 (terceira menor) */
  --text-xs:   0.833rem;
  --text-sm:   0.917rem;
  --text-base: 1rem;
  --text-md:   1.2rem;
  --text-lg:   1.44rem;
  --text-xl:   1.728rem;
  --text-2xl:  2.074rem;
  --text-3xl:  2.488rem;
  --text-hero: clamp(2.4rem, 6vw, 4.2rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.65;

  /* largura de leitura confortável */
  --measure: 66ch;
  --measure-narrow: 46ch;

  /* ---------- espaçamento — base 4px ---------- */
  --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:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---------- layout ---------- */
  --header-h:    4.25rem;
  --maxw:        1180px;
  /* Largura intermédia, para listas de componentes: acordeões de regras e de
     perguntas. Não são artigos — 680px deixa-os apertados — mas também não
     aguentam os 1180px, onde uma lista de uma coluna vira uma barra fina. */
  --maxw-mid:    900px;
  --maxw-prose:  680px;
  --gutter:      var(--sp-5);

  /* ---------- forma e movimento ---------- */
  /* Escala de raio, a crescer com o tamanho do objeto. Chegou a ser 2px em
     painéis, com o argumento de que o velho oeste é madeira serrada e não
     plástico. O argumento era bom e a página ficava datada na mesma: a 2px
     tudo lê como caixas, e a repetição de retângulos é o que mais pesa na
     sensação de monotonia. A textura do faroeste vem das fotografias, das
     fontes e da paleta — não das arestas. */
  --radius-sm:  8px;   /* distintivos, chips, botões pequenos */
  --radius:    14px;   /* cartões, painéis, acordeão */
  --radius-lg: 22px;   /* bandas, superfícies grandes, media */
  --radius-btn: 12px;

  /* Wordmark: a Crock, herdada da v1. Reservada ao nome The Riverland — os
     títulos correntes são Cinzel Decorative. */
  --font-wordmark: 'Crock', 'Cinzel Decorative', Georgia, serif;

  --ring: 2px solid var(--gold);

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* saída suave, para revelações */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 420ms;

  /* ---------- profundidade ----------
     Num fundo quase preto, a elevação lê-se por sombra *e* por um fio de luz
     na aresta de cima — só a sombra desaparece. */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-deep: 0 2px 4px rgba(0, 0, 0, .6), 0 18px 48px rgba(0, 0, 0, .55);
  --edge-light:  inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Brilhos: usados com parcimónia, e só no ouro e no rio. */
  --glow-gold:  0 0 32px color-mix(in srgb, var(--gold) 22%, transparent);
  --glow-river: 0 0 28px color-mix(in srgb, var(--river) 25%, transparent);

  /* Vinheta do hero: escurece os cantos para o texto assentar sem véu chapado. */
  --vignette: radial-gradient(120% 90% at 50% 30%,
              transparent 30%, color-mix(in srgb, var(--ground) 85%, transparent) 100%);
}

/* A página é escura por desenho — é um servidor de velho oeste ao anoitecer,
   não um documento. Declaramo-lo para o browser acertar nos controlos nativos
   (barras de scroll, campos de formulário) em vez de assumir claro. */
:root { color-scheme: dark; }