/* ════════════════════════════════════════════════════════════════════
   FireSysDiagram — modo dia (22/09/2026)

   O app nasceu só na noite. O style.css já é quase todo em tokens (--bg-*,
   --text-*, --border, --gold-*), então o dia é, na maior parte, redefinir
   esses tokens em html[data-theme="light"]. O resto deste arquivo é a lista
   do que ficou com cor fixa: o fundo e a grade do canvas (desenhados em SVG
   pelo app.js), a tinta do modo técnico e um punhado de regras da casca.

   Padrão do ecossistema SWM (ver a memória do modo dia):
     • html[data-theme="light"] escrito ANTES do primeiro paint, por um
       trecho síncrono no <head> que lê localStorage['swm_theme'];
     • noite = ausência da chave; dia = 'light';
     • botão quadrado 36×36 com lua/sol, id #btnTheme, na barra lateral.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Tons de texto da casca (a noite escreve em branco translúcido) ── */
:root {
  --sb-tx-1: rgba(255,255,255,.92);   /* título, item ativo */
  --sb-tx-2: rgba(255,255,255,.72);   /* item de menu */
  --sb-tx-3: rgba(255,255,255,.55);   /* apoio */
  --sb-tx-4: rgba(255,255,255,.32);   /* apagado */
  --sb-hover: rgba(255,255,255,.05);  /* realce de linha */
}
html[data-theme="light"] {
  --sb-tx-1: rgba(15,23,42,.92);
  --sb-tx-2: rgba(15,23,42,.74);
  --sb-tx-3: rgba(15,23,42,.56);
  --sb-tx-4: rgba(15,23,42,.36);
  --sb-hover: rgba(15,23,42,.05);
}

/* ── 1. Tokens do dia ────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg-0: #e9edf4;          /* canvas */
  --bg-1: #ffffff;          /* fim do gradiente da barra lateral */
  --bg-2: #f7f9fc;          /* barras e painéis */
  --bg-3: #eef2f8;          /* início do gradiente / hover */
  --bg-4: #e3e9f3;
  --bg-5: #d8e0ee;

  --sidebar-grad: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  --topbar-grad:  linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);

  --border:        rgba(15,23,42,.12);
  --border-2:      rgba(15,23,42,.18);
  --border-strong: rgba(15,23,42,.28);

  /* dourado legível sobre claro (o mesmo raciocínio do --gold-txt do núcleo) */
  --gold-1:      #a8500a;
  --gold-2:      #b45309;
  --gold-3:      #c2680a;
  --gold-bg:     rgba(180,83,9,.10);
  --gold-bg-2:   rgba(180,83,9,.16);
  --gold-border: rgba(180,83,9,.38);

  --blue:        #1d4ed8;
  --blue-2:      #2563eb;
  --blue-bg:     rgba(37,99,235,.10);
  --blue-bg-2:   rgba(37,99,235,.18);
  --blue-border: rgba(37,99,235,.38);

  --green:        #15803d;
  --green-2:      #166534;
  --green-bg:     rgba(21,128,61,.10);
  --green-border: rgba(21,128,61,.35);

  --red:        #b91c1c;
  --red-2:      #991b1b;
  --red-bg:     rgba(185,28,28,.10);
  --red-border: rgba(185,28,28,.38);

  --purple:        #6d28d9;
  --purple-2:      #5b21b6;
  --purple-bg:     rgba(109,40,217,.10);
  --purple-border: rgba(109,40,217,.38);

  --text-1: rgba(15,23,42,.92);
  --text-2: rgba(15,23,42,.62);
  --text-3: rgba(15,23,42,.54);   /* .42 dava 2,6:1 no claro */
  --text-4: rgba(15,23,42,.26);

  --sh-1:     0 2px 8px rgba(15,23,42,.10);
  --sh-2:     0 4px 12px rgba(15,23,42,.08);
  --sh-3:     0 8px 32px rgba(15,23,42,.14);
  --sh-modal: 0 24px 80px rgba(15,23,42,.28);
  --sh-glow:  0 0 0 1px rgba(180,83,9,.25), 0 4px 14px rgba(180,83,9,.15);

  --fsd-blue: #1d4ed8;
  --fsd-blue-bg: rgba(37,99,235,.10);
  --fsd-blue-border: rgba(37,99,235,.38);

  color-scheme: light;
}

/* ── 2. Canvas: fundo e grade vêm do SVG, com cor fixa no app.js ─────── */
html[data-theme="light"] #canvas rect[data-bg] { fill: var(--bg-0); }
html[data-theme="light"] #gl path { stroke: rgba(15,23,42,.13); }
html[data-theme="light"] #gs path { stroke: rgba(15,23,42,.07); }
/* tinta do desenho técnico (currentColor): clara na noite, preta no dia */
html[data-theme="light"] #canvas[data-desenho="tecnico"] { color: #111827; }
html[data-theme="light"] #status-msg { background: #ffffff; color: var(--text-1); border-color: var(--border-2); }

/* ── 3. Casca: o que ficou com cor fixa no fsd-shell.css ─────────────── */
html[data-theme="light"] .fsd-sidebar { background: var(--sidebar-grad); }
html[data-theme="light"] .fsd-sidebar .sidebar__logo-text { color: var(--text-1); }
html[data-theme="light"] .fsd-sidebar .sidebar__logo-subtext { color: var(--gold-1); }
html[data-theme="light"] .fsd-sidebar .sb-group__hd:hover,
html[data-theme="light"] .fsd-sidebar .sb-group.open > .sb-group__hd,
html[data-theme="light"] .fsd-sidebar .fs-sys__hd:hover,
html[data-theme="light"] .fsd-sidebar .fs-sys.open > .fs-sys__hd { background: rgba(15,23,42,.05); color: var(--text-1); }
html[data-theme="light"] .fsd-sidebar .sidebar__item:hover { background: var(--gold-bg); color: var(--gold-1); border-left-color: var(--gold-border); }
html[data-theme="light"] .fsd-sidebar .sidebar__item.active { background: var(--gold-bg-2); color: var(--gold-1); border-left-color: var(--gold-1); }
html[data-theme="light"] .fsd-sidebar .sidebar__item.on,
html[data-theme="light"] .fsd-sidebar .sb-fav:hover,
html[data-theme="light"] .fsd-sidebar .sb-fav.on { color: var(--gold-1); }
html[data-theme="light"] .fsd-sidebar .sidebar__item.danger:hover { background: var(--red-bg); color: var(--red); }
html[data-theme="light"] .fsd-sidebar .sidebar__nbr { color: var(--gold-1); }
html[data-theme="light"] .fsd-sidebar #cat-tabs button.fs-cat-btn:hover { color: var(--text-1); border-color: var(--border-2); }
html[data-theme="light"] .fsd-sidebar #cat-tabs button.fs-cat-btn.active { color: var(--gold-1); background: var(--gold-bg); border-color: var(--gold-border); }
html[data-theme="light"] .fsd-sidebar .pal-item:hover span { color: var(--gold-1); }
html[data-theme="light"] .fsd-sidebar #pf-ctrl button:hover { color: var(--gold-1); border-color: var(--gold-border); }
html[data-theme="light"] .fsd-sidebar .fsd-user-pop { background: #ffffff; border-color: var(--border-2); }
html[data-theme="light"] .fsd-sidebar .sidebar__logout:hover { background: var(--red-bg); color: var(--red); }
html[data-theme="light"] .fsd-sidebar .sidebar__ts__b:hover { background: var(--gold-bg); color: var(--gold-1); }
html[data-theme="light"] .fsd-shell #toolbar2 button:hover { background: var(--fsd-blue-bg); color: var(--blue); }
html[data-theme="light"] .fsd-shell #toolbar2 button.active { background: var(--blue-bg-2); color: var(--blue); }
html[data-theme="light"] .fsd-sidebar .sb-dot { background: var(--text-3); box-shadow: 0 0 0 3px rgba(15,23,42,.10); }

/* As cores de grupo vêm do JS (--sec-color, --sys-color, --grp) na paleta da
   noite: verde #34d399, âmbar #f59e0b e azul #60a5fa dão menos de 2,2:1 sobre
   o claro. No dia elas são escurecidas contra o texto, mantendo a família. */
html[data-theme="light"] .fsd-sidebar .sb-section__lbl { color: color-mix(in srgb, var(--sec-color, #f59e0b) 62%, #0f172a); }
html[data-theme="light"] .fsd-sidebar .fs-sys__lbl,
html[data-theme="light"] .fsd-sidebar .sb-group__lbl { color: var(--sb-tx-2); }
html[data-theme="light"] .fsd-sidebar .fs-sys__hd { color: color-mix(in srgb, var(--sys-color, #60a5fa) 62%, #0f172a); }
html[data-theme="light"] .fsd-sidebar .sb-favs__hd,
html[data-theme="light"] .fsd-sidebar .sb-favs__ico { color: var(--gold-1); }

/* ── 4. Botão do tema (36×36, lua na noite, sol no dia) ──────────────── */
.sidebar__theme {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 8px; background: transparent;
  color: var(--text-2); cursor: pointer; transition: background var(--dur, .2s), color var(--dur, .2s);
}
.sidebar__theme:hover { background: var(--gold-bg); color: var(--gold-1); border-color: var(--gold-border); }
.sidebar__theme:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.sidebar__theme svg { width: 18px; height: 18px; display: block; }
.sidebar__theme .ic-sun { display: none; }
html[data-theme="light"] .sidebar__theme .ic-sun { display: block; }
html[data-theme="light"] .sidebar__theme .ic-moon { display: none; }

/* ── 5. Impressão: a folha é sempre branca, com ou sem modo dia ──────── */
@media print {
  html[data-theme="light"] #_print_layer,
  #_print_layer { color: #111; background: #fff; }
}