/* ==========================================================================
   Isolinha — sistema de design do XVII Colóquio Internacional de Geocrítica
   Camada 1: tokens. Primitivos (escala) -> semânticos (uso). Componentes
   consomem apenas os semânticos.
   ========================================================================== */

:root {
  /* ---- Primitivos: Carmim (herdado do #A40000 do site original) ---- */
  --carmim-50:  #fbf2f0;
  --carmim-100: #f7e0dc;
  --carmim-200: #f0bfb7;   /* eco do rosa #FAAEAE */
  --carmim-300: #e3928a;
  --carmim-400: #cf5f52;
  --carmim-500: #b8342a;
  --carmim-600: #a01c14;   /* cor de marca */
  --carmim-700: #80150f;
  --carmim-800: #5e100c;
  --carmim-900: #3c0a08;

  /* ---- Primitivos: Papel & Tinta (neutros quentes, cartográficos) ---- */
  --papel-0:   #ffffff;
  --papel-50:  #faf8f4;
  --papel-100: #f3efe8;
  --papel-200: #e8e1d7;
  --papel-300: #d6ccbe;
  --tinta-400: #9a9086;
  --tinta-500: #736a61;
  --tinta-600: #554e47;
  --tinta-700: #3b3631;
  --tinta-800: #26221f;
  --tinta-900: #171412;

  /* ---- Primitivos: Oceano (acento secundário, uso pontual) ---- */
  --oceano-100: #dcebee;
  --oceano-500: #2c6a78;
  --oceano-700: #1c4a55;

  /* ---- Semânticos ---- */
  --cor-fundo:           var(--papel-50);
  --cor-superficie:      var(--papel-0);
  --cor-superficie-alt:  var(--papel-100);
  --cor-borda:           var(--papel-200);
  --cor-borda-forte:     var(--papel-300);
  --cor-texto:           var(--tinta-900);
  --cor-texto-2:         var(--tinta-600);
  --cor-texto-3:         var(--tinta-500);
  --cor-marca:           var(--carmim-600);
  --cor-marca-forte:     var(--carmim-700);
  --cor-marca-suave:     var(--carmim-50);
  --cor-marca-borda:     var(--carmim-200);
  --cor-sobre-marca:     #fff7f5;
  --cor-link:            var(--carmim-600);
  --cor-link-hover:      var(--carmim-800);
  --cor-acento:          var(--oceano-500);
  --cor-acento-suave:    var(--oceano-100);
  --cor-foco:            var(--oceano-500);
  --cor-capa:            var(--carmim-600);   /* fundo de capas/heros */
  --cor-capa-escura:     var(--carmim-800);
  --isolinha-traco:      rgba(255, 240, 236, 0.22);

  /* ---- Tipografia ---- */
  --fonte-titulo: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fonte-texto:  "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-dado:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 0.6875rem;  /* 11 — anotações de mapa */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.875rem;   /* 14 */
  --fs-base: 1.0625rem; /* 17 — corpo */
  --fs-md:  1.25rem;    /* 20 */
  --fs-lg:  1.5rem;     /* 24 */
  --fs-xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 1.8rem + 4.4vw, 5rem);
  --fs-display: clamp(3.25rem, 1.6rem + 7.5vw, 8rem);

  --lh-tight: 1.05;
  --lh-titulo: 1.15;
  --lh-texto: 1.65;
  --tracking-rotulo: 0.12em;

  /* ---- Espaço (base 4px) ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;
  --secao: clamp(3.5rem, 2rem + 6vw, 7rem);   /* respiro vertical entre seções */

  /* ---- Layout ---- */
  --largura-max: 76rem;
  --largura-texto: 42rem;
  --margem-lateral: clamp(1rem, 0.5rem + 3vw, 3rem);

  /* ---- Forma ---- */
  --raio-1: 2px;      /* precisão cartográfica */
  --raio-2: 6px;
  --raio-3: 12px;
  --raio-pilula: 999px;
  --borda: 1px solid var(--cor-borda);

  --sombra-1: 0 1px 2px rgba(23, 20, 18, 0.06), 0 1px 1px rgba(23, 20, 18, 0.04);
  --sombra-2: 0 6px 24px -8px rgba(23, 20, 18, 0.18), 0 2px 6px rgba(23, 20, 18, 0.05);

  /* ---- Movimento ---- */
  --dur-rapida: 140ms;
  --dur-media: 260ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light dark;
}

/* ---- Tema escuro ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo:          #141110;
    --cor-superficie:     #1d1917;
    --cor-superficie-alt: #26211e;
    --cor-borda:          #332c28;
    --cor-borda-forte:    #463d37;
    --cor-texto:          #f1ebe4;
    --cor-texto-2:        #c3b8ad;
    --cor-texto-3:        #9a8f85;
    --cor-marca:          #e0705f;
    --cor-marca-forte:    #f09384;
    --cor-marca-suave:    #2c1714;
    --cor-marca-borda:    #5e2a23;
    --cor-sobre-marca:    #1a0d0b;
    --cor-link:           #ec8a7b;
    --cor-link-hover:     #f6b3a8;
    --cor-acento:         #7fb5c2;
    --cor-acento-suave:   #1b2c30;
    --cor-foco:           #7fb5c2;
    --cor-capa:           #5e100c;
    --cor-capa-escura:    #3c0a08;
    --isolinha-traco:     rgba(255, 210, 200, 0.16);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 8px 28px -10px rgba(0, 0, 0, 0.7);
  }
}
:root[data-tema="escuro"] {
  --cor-fundo:          #141110;
  --cor-superficie:     #1d1917;
  --cor-superficie-alt: #26211e;
  --cor-borda:          #332c28;
  --cor-borda-forte:    #463d37;
  --cor-texto:          #f1ebe4;
  --cor-texto-2:        #c3b8ad;
  --cor-texto-3:        #9a8f85;
  --cor-marca:          #e0705f;
  --cor-marca-forte:    #f09384;
  --cor-marca-suave:    #2c1714;
  --cor-marca-borda:    #5e2a23;
  --cor-sobre-marca:    #1a0d0b;
  --cor-link:           #ec8a7b;
  --cor-link-hover:     #f6b3a8;
  --cor-acento:         #7fb5c2;
  --cor-acento-suave:   #1b2c30;
  --cor-foco:           #7fb5c2;
  --cor-capa:           #5e100c;
  --cor-capa-escura:    #3c0a08;
  --isolinha-traco:     rgba(255, 210, 200, 0.16);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 8px 28px -10px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; }
}