/* Identidade nosso.art: tons quentes do pau-brasil. Tudo que tem cor passa por estas variáveis. */
:root {
  --bg: #fdf0e7;            /* pêssego claro, fundo da página */
  --card: #ffffff;
  --soft: #fbe5d6;          /* fundos de apoio dentro dos cartões */
  --soft-2: #fff7f1;
  --line: #f0d3c0;          /* bordas suaves */
  --ink: #3b0909;           /* marrom-avermelhado escuro, texto principal */
  --ink-2: #7d2a17;         /* texto secundário */
  --ink-3: #9b5a45;         /* texto terciário e rótulos */
  --primary: #f57b20;       /* laranja vibrante: botões e destaques */
  --primary-ink: #3b0909;   /* texto sobre o laranja (branco não tem contraste suficiente) */
  --crimson: #bd3315;       /* carmesim: hover e acentos */
  --crimson-ink: #ffffff;
  --chip: #fde1d6;          /* pílulas de área */
  --chip-ink: #9a2a12;
  --ok: #2f6b3a;
  --warn: #8a5300;
  --danger: #b3261e;
  --field: #ffffff;
  --focus: #bd3315;
  /* Ícone do Boost marcado: setas no carmesim e barras no laranja do tema (claro e escuro herdam daqui) */
  --boost-arrows: var(--crimson);
  --boost-bars: var(--primary);

  /* Madeira do pau-brasil no cabeçalho */
  --wood-1: #8e2a14;
  --wood-2: #a83c1b;
  --wood-3: #7c2210;
  --wood-ink: #fff3ea;
  --canvas: #f4ebe1;         /* fundo bege do workspace */
  --canvas-dot: rgba(125, 42, 23, 0.16);

  --shadow-sm: 0 1px 2px rgba(59, 9, 9, 0.06), 0 2px 8px rgba(59, 9, 9, 0.04);
  --shadow-md: 0 2px 4px rgba(59, 9, 9, 0.07), 0 10px 24px rgba(59, 9, 9, 0.07);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --s-2: 0.75rem;
  --s-1: 0.8125rem;
  --s0: 0.9375rem;
  --s1: 1.125rem;
  --s2: 1.25rem;
  --s3: 1.5rem;
  --s4: 1.875rem;

  --radius-lg: 16px;
  --radius: 10px;
  --radius-sm: 6px;
  --measure: 46rem;
  color-scheme: light;
}

/* Escuro: madeira escura e brasas, sem perder o calor da paleta */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1b100d; --card: #26160f; --soft: #331d14; --soft-2: #2b1912; --line: #45281c;
    --ink: #f9e8dc; --ink-2: #e6b49a; --ink-3: #c08b72;
    --primary: #f7893a; --primary-ink: #2a0b05; --crimson: #e2583a; --crimson-ink: #1b0703;
    --chip: #4a2015; --chip-ink: #ffc4a8; --ok: #8fd19c; --warn: #f0b860; --danger: #ff8f84;
    --field: #1f120c; --focus: #f7893a;
    --wood-1: #4f170b; --wood-2: #64200f; --wood-3: #3f1208;
    --canvas: #20130e; --canvas-dot: rgba(249, 232, 220, 0.10);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1b100d; --card: #26160f; --soft: #331d14; --soft-2: #2b1912; --line: #45281c;
  --ink: #f9e8dc; --ink-2: #e6b49a; --ink-3: #c08b72;
  --primary: #f7893a; --primary-ink: #2a0b05; --crimson: #e2583a; --crimson-ink: #1b0703;
  --chip: #4a2015; --chip-ink: #ffc4a8; --ok: #8fd19c; --warn: #f0b860; --danger: #ff8f84;
  --field: #1f120c; --focus: #f7893a;
  --wood-1: #4f170b; --wood-2: #64200f; --wood-3: #3f1208;
  --canvas: #20130e; --canvas-dot: rgba(249, 232, 220, 0.10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* nível do modo escuro (Ajustes → Nível do modo escuro): Médio e Claro clareiam fundos, cartões e linhas */
:root[data-theme="dark"][data-dark="medio"] {
  --bg: #2a1e19; --card: #35261f; --soft: #433027; --soft-2: #3a2a22; --line: #5a3c2e; --field: #2e2119;
  --canvas: #2f221c; --canvas-dot: rgba(249, 232, 220, 0.12); --chip: #573026;
}
:root[data-theme="dark"][data-dark="claro"] {
  --bg: #3b2f29; --card: #463831; --soft: #554439; --soft-2: #4c3c33; --line: #6d4f40; --field: #3f322b;
  --canvas: #41332c; --canvas-dot: rgba(249, 232, 220, 0.14); --chip: #64392d; --ink-3: #d5a68f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-dark="medio"] {
    --bg: #2a1e19; --card: #35261f; --soft: #433027; --soft-2: #3a2a22; --line: #5a3c2e; --field: #2e2119;
    --canvas: #2f221c; --canvas-dot: rgba(249, 232, 220, 0.12); --chip: #573026;
  }
  :root:not([data-theme])[data-dark="claro"] {
    --bg: #3b2f29; --card: #463831; --soft: #554439; --soft-2: #4c3c33; --line: #6d4f40; --field: #3f322b;
    --canvas: #41332c; --canvas-dot: rgba(249, 232, 220, 0.14); --chip: #64392d; --ink-3: #d5a68f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
  }
}

:root[data-theme="contrast"] {
  --bg: #ffffff; --card: #ffffff; --soft: #f4f4f4; --soft-2: #ffffff; --line: #000000;
  --ink: #000000; --ink-2: #000000; --ink-3: #2a2a2a;
  --primary: #f57b20; --primary-ink: #000000; --crimson: #8a1a05; --crimson-ink: #ffffff;
  --chip: #ffe1d1; --chip-ink: #5a1405; --field: #ffffff; --focus: #000000;
  --boost-arrows: #000000; --boost-bars: #8a1a05;
  --canvas: #ffffff; --canvas-dot: rgba(0, 0, 0, 0.25);
  --shadow-sm: none; --shadow-md: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s0);
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";   /* Inter: "a" de um andar e dígitos mais legíveis */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
a { color: var(--crimson); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* Toque e clique não desenham o retângulo azul do navegador (realce de toque no celular e no tablet, anel de
   foco padrão): o foco continua visível para quem navega pelo teclado, pela regra :focus-visible acima. */
a, button, summary, label, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }

.muted { color: var(--ink-2); }
.small { font-size: var(--s-1); }
.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 60; background: var(--card); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); }
.skip-link:focus { left: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================= Opções de acessibilidade (Ajustes → Acessibilidade) ================= */
/* Tamanho do texto: quase tudo é medido em rem, então mudar a base escala a interface inteira. */
:root[data-text="lg"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }
:root[data-text="xxl"] { font-size: 140%; }
/* Fonte de alta legibilidade, com letras bem distintas (I, l, 1; O, 0) */
:root[data-font="legible"] { --sans: "Atkinson Hyperlegible", "Inter", system-ui, sans-serif; }
:root[data-font="legible"] body { font-feature-settings: normal; }
/* Espaçamento ampliado, nos valores do critério 1.4.12 da WCAG */
:root[data-spacing="on"] body { line-height: 1.8; letter-spacing: 0.06em; word-spacing: 0.16em; }
:root[data-spacing="on"] p { margin-bottom: 1.4em; }
:root[data-spacing="on"] h1, :root[data-spacing="on"] h2, :root[data-spacing="on"] h3 { line-height: 1.4; letter-spacing: 0.02em; }
/* Links sempre sublinhados, para não depender só da cor */
:root[data-underline="on"] a:not(.btn):not(.brand):not(.login-btn):not(.np-back) { text-decoration: underline !important; text-decoration-thickness: 1.5px; }
/* Reduzir animações mesmo que o sistema não peça */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
/* Foco reforçado: contorno grosso com halo, visível sobre qualquer fundo */
:root[data-focus="strong"] :focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--focus) 28%, transparent) !important;
}

/* Cursor das caixas de texto comuns (notebooks, buscas, formulários) piscando devagar, no mesmo ritmo dos editores
   (CURSOR_BLINK em pages/editor.js: ciclo de 3 s). caret-animation: manual desliga o piscar do sistema e a animação
   abaixo faz o piscar; navegadores sem caret-animation ficam com o piscar do sistema (sem misturar os dois). */
@supports (caret-animation: manual) {
  input:focus, textarea:focus, [contenteditable="true"]:not(.cm-content):focus {
    caret-animation: manual;
    animation: nart-caret 3s steps(1) infinite;
  }
  @keyframes nart-caret {
    0% { caret-color: auto; }
    50% { caret-color: transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    input:focus, textarea:focus, [contenteditable="true"]:not(.cm-content):focus { animation: none; }
  }
}

/* Interruptores de diagnóstico (Moderação > Desempenho; classes postas por js/switches.js) */
:root.sw-no-animations *, :root.sw-no-animations *::before, :root.sw-no-animations *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root.sw-no-webfonts, :root.sw-no-webfonts[data-font] { --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: Georgia, "Times New Roman", serif; }
:root.sw-no-webfonts .art-doc { font-family: Georgia, "Times New Roman", serif !important; }
.notice.sw-off { border-style: dashed; }