/* ==========================================================================
   Faunaria — Design Tokens
   Estética: "atlas de campo / guia naturalista" — papel quente + verde-mata
   profundo + acento ocre/terracota. Sem gradientes-clichê. Premium, sóbrio.

   Filosofia CWV: ZERO web fonts pesadas. Display = pilha serif web-safe
   (caráter de atlas científico, o contraponto ao sans-serif da Wikipedia).
   Corpo = system-ui. Tudo carrega instantâneo.

   Camadas: primitivos (--c-*, escalas cruas) → semânticos (--surface, --ink…)
   Tema claro é o default; .theme-dark / prefers-color-scheme sobrescreve.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     PRIMITIVOS — paleta crua (não usar direto em componentes)
     --------------------------------------------------------------------- */

  /* Verdes mata (do musgo claro ao dossel noturno) */
  --c-green-50:  #f1f5ec;
  --c-green-100: #dde7d1;
  --c-green-200: #bccfa6;
  --c-green-300: #94b277;
  --c-green-400: #6d9450;
  --c-green-500: #4e7637;   /* verde-folha de assinatura */
  --c-green-600: #3c5d2c;
  --c-green-700: #2f4a24;
  --c-green-800: #21341a;
  --c-green-900: #16240f;
  --c-green-950: #0d1709;

  /* Ocre / terracota — o acento "capa de atlas antigo" */
  --c-ochre-300: #e7b96a;
  --c-ochre-400: #d8a043;
  --c-ochre-500: #c4862a;   /* acento de assinatura (claro) */
  --c-ochre-600: #a66c1d;
  --c-terra-500: #b65a35;   /* terracota p/ destaques quentes */

  /* Papel / pergaminho (superfícies tema claro) */
  --c-paper-0:   #ffffff;
  --c-paper-50:  #fbf8f2;   /* fundo principal — papel quente */
  --c-paper-100: #f4efe4;
  --c-paper-200: #ebe3d3;
  --c-paper-300: #ddd2bd;

  /* Carvão / noite-mata (superfícies tema escuro) */
  --c-night-0:   #0d100a;
  --c-night-50:  #12150f;   /* fundo principal — mata noturna */
  --c-night-100: #1a1e15;
  --c-night-200: #232820;
  --c-night-300: #2f352a;
  --c-night-400: #3c4336;

  /* Tinta (texto) */
  --c-ink-900: #1c2118;     /* texto principal claro */
  --c-ink-700: #3a4232;
  --c-ink-500: #5f6855;
  --c-ink-400: #7a8470;

  /* Tinta clara (texto sobre escuro) */
  --c-mist-100: #eef1e8;    /* texto principal escuro */
  --c-mist-300: #c3cab6;
  --c-mist-500: #909a82;

  /* Cores funcionais IUCN (universais, fixas nos dois temas) */
  --c-iucn-lc: #4e9d4e;     /* Pouco Preocupante */
  --c-iucn-nt: #8fae34;     /* Quase Ameaçada */
  --c-iucn-vu: #e0b324;     /* Vulnerável */
  --c-iucn-en: #e07f24;     /* Em Perigo */
  --c-iucn-cr: #d6442e;     /* Criticamente em Perigo */
  --c-iucn-ew: #6b3fa0;     /* Extinta na Natureza */
  --c-iucn-ex: #3a3a3a;     /* Extinta */
  --c-iucn-dd: #9a9a8c;     /* Dados Insuficientes */

  /* Nível de perigo */
  --c-danger-0: #4e9d4e;    /* inofensivo */
  --c-danger-1: #c8951f;    /* peçonhento */
  --c-danger-2: #d6442e;    /* agressivo/perigoso/letal */

  /* ---------------------------------------------------------------------
     TIPOGRAFIA — pilhas web-safe, zero requisição de rede
     --------------------------------------------------------------------- */

  /* Display: serif transicional — caráter de atlas/enciclopédia científica.
     Charter/Georgia são web-safe e elegantes; ótimo contraste com o sans. */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Charter",
                  "Georgia", "Times New Roman", serif;

  /* Corpo: system-ui nativo — rápido, neutro, legível em LatAm */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;

  /* Mono: para nomes científicos / dados (caráter "ficha de espécime") */
  --font-mono: "SFMono-Regular", "Cascadia Code", "Consolas",
               "Liberation Mono", "Menlo", monospace;

  /* Escala tipográfica — proporção ~1.2 (minor third), fluida via clamp */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.06rem, 1rem + 0.3vw, 1.15rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  --fs-xl:   clamp(1.55rem, 1.3rem + 1.1vw, 1.95rem);
  --fs-2xl:  clamp(1.95rem, 1.5rem + 2vw, 2.7rem);
  --fs-3xl:  clamp(2.4rem, 1.7rem + 3.4vw, 3.6rem);

  --lh-tight:  1.15;
  --lh-snug:   1.32;
  --lh-normal: 1.62;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.09em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---------------------------------------------------------------------
     ESPAÇAMENTO — escala 4px base
     --------------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------------
     RAIOS, BORDAS, SOMBRAS
     --------------------------------------------------------------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --bw: 1px;

  /* Sombras — tema claro (suaves, terrosas, não pretas puras) */
  --sh-sm:  0 1px 2px rgba(28, 33, 24, 0.06);
  --sh-md:  0 4px 14px rgba(28, 33, 24, 0.08), 0 1px 3px rgba(28, 33, 24, 0.05);
  --sh-lg:  0 14px 40px rgba(28, 33, 24, 0.12), 0 4px 10px rgba(28, 33, 24, 0.06);
  --sh-focus: 0 0 0 3px var(--focus-ring);

  /* ---------------------------------------------------------------------
     CONTÊINERES / LAYOUT
     --------------------------------------------------------------------- */
  --container:      72rem;   /* 1152px */
  --container-wide: 84rem;
  --container-prose: 42rem;  /* largura ideal de leitura */
  --header-h: 4rem;

  /* ---------------------------------------------------------------------
     TRANSIÇÕES
     --------------------------------------------------------------------- */
  --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --t-base: 200ms cubic-bezier(0.2, 0, 0, 1);
  --t-slow: 360ms cubic-bezier(0.2, 0, 0, 1);

  /* =====================================================================
     SEMÂNTICOS — TEMA CLARO (default)
     ===================================================================== */
  --surface:        var(--c-paper-50);   /* fundo da página */
  --surface-raised: var(--c-paper-0);    /* cards, painéis */
  --surface-sunken: var(--c-paper-100);  /* zonas recuadas, tabelas zebra */
  --surface-inset:  var(--c-paper-200);

  --ink:        var(--c-ink-900);        /* texto principal */
  --ink-muted:  var(--c-ink-500);        /* secundário */
  --ink-subtle: var(--c-ink-400);        /* legendas, meta */
  --ink-invert: var(--c-mist-100);

  --brand:        var(--c-green-600);
  --brand-strong: var(--c-green-700);
  --brand-soft:   var(--c-green-100);
  --on-brand:     var(--c-paper-0);

  --accent:       var(--c-ochre-500);
  --accent-strong: var(--c-ochre-600);
  --accent-soft:  #f6ead2;

  --border:        var(--c-paper-300);
  --border-strong: #cbbfa6;
  --border-faint:  var(--c-paper-200);

  --link:       var(--c-green-700);
  --link-hover: var(--c-ochre-600);

  --focus-ring: rgba(196, 134, 42, 0.55);

  --winner-bg:   #eef4e6;       /* destaque "vencedor" na linha de comparação */
  --winner-mark: var(--c-green-600);

  /* Textura sutil de fundo (grão de papel) — definida em styles.css */
  --grain-opacity: 0.025;

  color-scheme: light;
}

/* =======================================================================
   TEMA ESCURO — via classe manual (.theme-dark no <html>)
   ======================================================================= */
.theme-dark {
  --surface:        var(--c-night-50);
  --surface-raised: var(--c-night-100);
  --surface-sunken: var(--c-night-0);
  --surface-inset:  var(--c-night-200);

  --ink:        var(--c-mist-100);
  --ink-muted:  var(--c-mist-300);
  --ink-subtle: var(--c-mist-500);
  --ink-invert: var(--c-ink-900);

  --brand:        var(--c-green-300);
  --brand-strong: var(--c-green-200);
  --brand-soft:   var(--c-night-300);
  --on-brand:     var(--c-night-50);

  --accent:       var(--c-ochre-400);
  --accent-strong: var(--c-ochre-300);
  --accent-soft:  #2c2417;

  --border:        var(--c-night-300);
  --border-strong: var(--c-night-400);
  --border-faint:  var(--c-night-200);

  --link:       var(--c-green-300);
  --link-hover: var(--c-ochre-300);

  --focus-ring: rgba(216, 160, 67, 0.6);

  --winner-bg:   #1f2b18;
  --winner-mark: var(--c-green-300);

  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:  0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --sh-lg:  0 14px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

  --grain-opacity: 0.04;

  color-scheme: dark;
}

/* =======================================================================
   TEMA ESCURO automático — só quando o usuário NÃO escolheu manualmente.
   .theme-light no <html> trava o claro; ausência = segue o sistema.
   ======================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    --surface:        var(--c-night-50);
    --surface-raised: var(--c-night-100);
    --surface-sunken: var(--c-night-0);
    --surface-inset:  var(--c-night-200);

    --ink:        var(--c-mist-100);
    --ink-muted:  var(--c-mist-300);
    --ink-subtle: var(--c-mist-500);
    --ink-invert: var(--c-ink-900);

    --brand:        var(--c-green-300);
    --brand-strong: var(--c-green-200);
    --brand-soft:   var(--c-night-300);
    --on-brand:     var(--c-night-50);

    --accent:       var(--c-ochre-400);
    --accent-strong: var(--c-ochre-300);
    --accent-soft:  #2c2417;

    --border:        var(--c-night-300);
    --border-strong: var(--c-night-400);
    --border-faint:  var(--c-night-200);

    --link:       var(--c-green-300);
    --link-hover: var(--c-ochre-300);

    --focus-ring: rgba(216, 160, 67, 0.6);

    --winner-bg:   #1f2b18;
    --winner-mark: var(--c-green-300);

    --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-md:  0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --sh-lg:  0 14px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

    --grain-opacity: 0.04;

    color-scheme: dark;
  }
}