/* =====================================================================
   ARBITRALIS · TOKENS DE MARCA
   Cole o conteúdo COMPLETO deste arquivo no <style> de toda peça gerada.
   Fonte de verdade: Guia de Estilo Arbitralis (cores neutras, primárias
   e secundárias + tipografia Inter + espaçamentos, raios e sombras).
   ===================================================================== */

/* Fontes: vêm de assets/fonts.css (Inter + Instrument Serif embutidas, base64).
   NÃO usar @import/CDN nem nenhuma outra família — ver references/rules.md. */


:root{
  /* ---- BASE ---- */
  --white:#FFFFFF;
  --black:#000000;

  /* ---- NEUTRAS (hierarquia: fundos, bordas, textos) ---- */
  --neutral-50:#F9F9F9;
  --neutral-100:#F5F5F5;
  --neutral-200:#E9EAEB;
  --neutral-300:#D5D7DA;
  --neutral-400:#A4A7AE;
  --neutral-500:#717680;
  --neutral-600:#535862;
  --neutral-700:#414651;
  --neutral-800:#252B37;
  --neutral-900:#181D27;

  /* ---- PRIMÁRIA (identidade · índigo profundo · base = 500) ---- */
  --primary-50:#E6E5EB;
  --primary-100:#CDCBD7;
  --primary-200:#9C97AF;
  --primary-300:#6A6388;
  --primary-400:#524974;
  --primary-500:#20154C;   /* PRIMARY BASE */
  --primary-600:#1C1344;
  --primary-700:#19103B;
  --primary-800:#150E33;
  --primary-900:#120C2A;

  /* ---- SECUNDÁRIA (acento · vermelho · base = 500) ---- */
  --secondary-50:#F9E6E6;
  --secondary-100:#F3CDCD;
  --secondary-200:#E79B9B;
  --secondary-300:#DA6969;
  --secondary-400:#D45050;
  --secondary-500:#C81E1E;  /* SECONDARY BASE */
  --secondary-600:#B21B1B;
  --secondary-700:#9C1717;
  --secondary-800:#851414;
  --secondary-900:#6F1111;

  /* ---- TIPOGRAFIA ---- */
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:'Instrument Serif', Georgia, 'Times New Roman', serif; /* títulos/capas */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Escala (px no canvas de design). Display p/ títulos, Text p/ corpo. */
  --display-2xl:72px;
  --display-xl:60px;
  --display-lg:48px;
  --display-md:36px;
  --display-sm:30px;
  --text-2xl:24px;
  --text-xl:18px;
  --text-lg:16px;
  --text-md:14px;
  --text-sm:12px;
  --lh-tight:1.05;
  --lh-snug:1.2;
  --lh-normal:1.5;

  /* ---- ESPAÇAMENTO ---- */
  --space-none:0px;  --space-xxs:2px;  --space-xs:4px;  --space-sm:8px;
  --space-md:12px;   --space-lg:16px;  --space-xl:20px; --space-2xl:24px;
  --space-3xl:32px;  --space-4xl:40px; --space-5xl:48px;--space-6xl:64px;
  --space-7xl:80px;  --space-8xl:96px; --space-9xl:128px;

  /* ---- RAIOS ---- */
  --radius-none:0px; --radius-xs:4px; --radius-sm:8px;
  --radius-md:12px;  --radius-lg:20px; --radius-full:999px;

  /* ---- SOMBRAS ---- */
  --shadow-xs:0 1px 2px 0 rgba(24,29,39,.08);
  --shadow-sm:0 2px 4px 0 rgba(24,29,39,.10);
  --shadow-md:0 4px 8px 0 rgba(24,29,39,.10);
  --shadow-lg:0 8px 16px 0 rgba(24,29,39,.10);
}

/* =====================================================================
   MODOS — Dark e Light
   Aplique a classe .mode-dark ou .mode-light no contêiner (slide/canvas).
   As variáveis semânticas abaixo é que mudam; o resto do CSS usa --ink,
   --bg, --accent etc. e se adapta sozinho. O "branco" do dark vira a cor
   da marca (índigo) no light — inclusive no logo (via currentColor).
   Padrão de deck: CAPA e fechamento em dark; slides de conteúdo em light.
   ===================================================================== */
.mode-dark{
  --bg: var(--primary-500);                  /* fundo dominante (índigo) */
  --bg-deep: var(--primary-900);             /* p/ degradê/atmosfera */
  --ink: var(--neutral-50);                  /* "o branco": texto/logo */
  --ink-dim: var(--primary-200);             /* subtítulo itálico opaco */
  --ink-mute: var(--neutral-400);            /* corpo secundário */
  --hairline: var(--primary-400);            /* bordas/réguas neutras */
  --chip-bg: rgba(255,255,255,.06);          /* fundo da sobrancelha */
  --chip-border: rgba(255,255,255,.18);
  --accent: var(--secondary-500);            /* vermelho (1 por peça) */
  --logo: dark;                              /* usar logo-dark.svg */
}
.mode-light{
  --bg: var(--white);
  --bg-deep: var(--neutral-50);
  --ink: var(--primary-500);                 /* branco → cor da marca */
  --ink-dim: var(--primary-400);
  --ink-mute: var(--neutral-600);
  --hairline: var(--neutral-200);
  --chip-bg: var(--primary-50);
  --chip-border: var(--primary-100);
  --accent: var(--secondary-500);
  --logo: light;                             /* usar logo-light.svg */
}

/* =====================================================================
   COMPONENTES COMPARTILHADOS — sobrancelha (chip), título de capa
   ===================================================================== */
/* Sobrancelha em pílula, com fundinho sutil (ver referência da marca) */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start; width:fit-content; max-width:100%;  /* fit no texto, nunca estica */
  padding:8px 16px; border-radius:var(--radius-full);
  background:var(--chip-bg); border:1px solid var(--chip-border);
  color:var(--ink-dim);
  font-family:var(--font-sans); font-weight:500; font-size:15px; line-height:1;
}
.eyebrow svg{ width:16px; height:16px; opacity:.85; }

/* Rodapé de site — presente em TODA página/peça (ver brand.md) */
.sitefoot{
  font-family:var(--font-sans); font-weight:500; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}

/* Título de capa: Instrument Serif regular + subtítulo itálico opaco */
.cover-title{ font-family:var(--font-serif); font-weight:400; color:var(--ink);
  line-height:1.02; letter-spacing:.005em; }
.cover-title .dash{ color:var(--accent); }            /* o "—" em vermelho */
.cover-title .sub{ display:block; font-style:italic; color:var(--ink-dim); }