@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=VT323&family=Barlow:wght@400;500;600;700&family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Mukta:wght@400;500;600;700&family=Bricolage+Grotesque:wght@500;600;700;800&display=swap');
/* ================================================================
   SilaiLink theme layer — ONE source of truth for every surface
   Reference: "Sila Link Skin Lab" (Madhav, 3–5 Sep 2026) — Neon noir skin:
   near-black violet, bloomed magenta primary, cyan counter-light, Chakra Petch
   display + Barlow body + IBM Plex Mono labels, 5px radius, LED pills.
   (website, factory portal, Mission Control, catalog editor, CEO portal).
   Default: Neon Noir Pink. Toggle: Warm Workwear (navy + marigold on paper).
   theme.js applies the saved choice before paint and injects the switch.
   Tokens only — every page paints with var(--…), never a literal hex.
   ================================================================ */
:root{
  color-scheme:dark;
  --bg:#07060B; --panel:#100C1B; --card:#100C1B; --soft:#170F26; --panel2:#170F26; --line:#2C1F44; --line2:#231838;
  --txt:#EDE6FA; --txt2:#D9CFF0; --txt3:#BFB2DC; --txt4:#E6DDF5; --mut:#9385B8; --mut2:#6F6390;
  --ink:#FF2E88; --ink2:#FF7AB8; --ink-rgb:255,46,136; --on-ink:#07060B; --on-amber:#07060B;
  --acc2:#00E5FF; --acc2-rgb:0,229,255;
  --violet:#B44BFF; --mag:#B44BFF; --violet2:#C77DFF; --violet-rgb:180,75,255;
  --amber:#FFB43D; --mar:#FFB43D; --mard:#FFB43D; --amber2:#E8A33D; --amber-rgb:255,180,61;
  --good:#3DF5A8; --good-rgb:61,245,168; --bad:#FF4D6D;
  --good-bg:#0B2419; --bad-bg:#2B0F18; --amber-bg:#261C08; --blue-bg:#0B1F2A;
  --good-txt:#BFEFD9; --amber-txt:#FFD98A;
  --disp:'Chakra Petch','Mukta',system-ui,sans-serif; --f-display:'Chakra Petch','Mukta',system-ui,sans-serif;
  --f-body:'Barlow','Mukta',system-ui,sans-serif; --f-mono:'IBM Plex Mono','Mukta',ui-monospace,monospace;
  --radius:5px; --tracking:.02em; --caps-track:.14em;
  --shadow:0 0 0 1px #2C1F44, 0 0 22px rgba(255,46,136,.16);
  --glow:0 0 22px rgba(255,46,136,.22);
  --grid:rgba(255,46,136,.03);
  --overlay:radial-gradient(120% 80% at 78% 0%,rgba(0,229,255,.10),transparent 60%),radial-gradient(90% 70% at 8% 100%,rgba(255,46,136,.12),transparent 62%);
  --bg-rgb:7,6,11; --panel-rgb:16,12,27; --soft-rgb:23,15,38; --txt-rgb:237,230,250; --line-rgb:44,31,68; --line2-rgb:35,24,56;
  /* legacy aliases still referenced by pages */ --goodBg:var(--good-bg); --badBg:var(--bad-bg); --amberBg:var(--amber-bg); --blueBg:var(--blue-bg);
}
:root[data-theme="warm"]{
  color-scheme:light;
  --bg:#F6F4EF; --panel:#FFFFFF; --card:#FFFFFF; --soft:#F0EDE6; --line:#E8E4DB; --line2:#EDE9E0;
  --txt:#1A1D2E; --txt2:#334155; --txt3:#475569; --txt4:#3A3A3A; --mut:#6B6F80; --mut2:#9AA0B0;
  --ink:#1E2761; --ink2:#3D4A8C; --ink-rgb:30,39,97; --on-ink:#FFFFFF; --on-amber:#1A1D2E;
  --violet:#C46686; --mag:#C46686; --violet2:#D48AA6; --violet-rgb:196,102,134;
  --amber:#E8A33D; --mar:#E8A33D; --mard:#B97817; --amber2:#B97817; --amber-rgb:232,163,61;
  --good:#0F6E56; --good-rgb:15,110,86; --bad:#B42318;
  --good-bg:#E7F5EE; --bad-bg:#FBEAE7; --amber-bg:#FBF3E4; --blue-bg:#EDF3FC;
  --good-txt:#0F6E56; --amber-txt:#92400E;
  --disp:'Bricolage Grotesque','Mukta',system-ui,sans-serif; --f-display:'Bricolage Grotesque','Mukta',system-ui,sans-serif;
  --f-body:'Barlow','Mukta',system-ui,sans-serif; --f-mono:'IBM Plex Mono','Mukta',ui-monospace,monospace;
  --acc2:#2A78D6; --acc2-rgb:42,120,214; --panel2:#F0EDE6; --radius:7px; --glow:none;
  --shadow:0 1px 2px rgba(26,29,46,.05), 0 8px 24px rgba(26,29,46,.08);
  --grid:rgba(30,39,97,.04); --overlay:none;
  --bg-rgb:246,244,239; --panel-rgb:255,255,255; --soft-rgb:240,237,230; --txt-rgb:26,29,46; --line-rgb:232,228,219; --line2-rgb:237,233,224;
}
:root[data-theme="brutal"]{
  /* Skin Lab — "Brutalist neon": acid yellow on graphite, electric-blue offset shadows, 2px hard edges, zero radius */
  color-scheme:dark;
  --bg:#0E0E0E; --panel:#151515; --card:#151515; --soft:#1C1C1C; --panel2:#1C1C1C; --line:#F2F2F2; --line2:#2A2A2A;
  --txt:#F2F2F2; --txt2:#E6E6E6; --txt3:#CFCFCF; --txt4:#F2F2F2; --mut:#9A9A9A; --mut2:#6E6E6E;
  --ink:#E8FF00; --ink2:#F4FF7A; --ink-rgb:232,255,0; --on-ink:#0E0E0E; --on-amber:#0E0E0E;
  --acc2:#1B4BFF; --acc2-rgb:27,75,255;
  --violet:#1B4BFF; --mag:#1B4BFF; --violet2:#6B8CFF; --violet-rgb:27,75,255;
  --amber:#FF9E00; --mar:#FF9E00; --mard:#FF9E00; --amber2:#FF9E00; --amber-rgb:255,158,0;
  --good:#E8FF00; --good-rgb:232,255,0; --bad:#FF3B30;
  --good-bg:#1E2200; --bad-bg:#2A0F0D; --amber-bg:#2A1A00; --blue-bg:#0B1433;
  --good-txt:#E8FF00; --amber-txt:#FFB74D;
  --disp:'Archivo Black','Chakra Petch','Mukta',system-ui,sans-serif; --f-display:'Archivo Black','Chakra Petch','Mukta',system-ui,sans-serif;
  --f-body:'Barlow','Mukta',system-ui,sans-serif; --f-mono:'IBM Plex Mono','Mukta',ui-monospace,monospace;
  --radius:0px; --tracking:-.01em; --caps-track:.16em;
  --shadow:none; --glow:5px 5px 0 #1B4BFF;
  --grid:rgba(242,242,242,.05);
  --overlay:repeating-linear-gradient(to right,rgba(242,242,242,.05) 0 1px,transparent 1px 60px);
  --bg-rgb:14,14,14; --panel-rgb:21,21,21; --soft-rgb:28,28,28; --txt-rgb:242,242,242; --line-rgb:242,242,242; --line2-rgb:42,42,42;
}
:root[data-theme="brutal"] *{ text-shadow:none !important; }

:root[data-theme="technoir"]{
  /* Skin Lab — "Clean tech-noir": same bones, one cold blue accent, no bloom — the eight-hours-a-day console */
  color-scheme:dark;
  --bg:#0B0C0E; --panel:#131519; --card:#131519; --soft:#181B20; --panel2:#181B20; --line:#252A31; --line2:#1D2127;
  --txt:#E6E9ED; --txt2:#D3D8DE; --txt3:#B7BEC7; --txt4:#E6E9ED; --mut:#7C848F; --mut2:#5B626C;
  --ink:#7DA2FF; --ink2:#A9C0FF; --ink-rgb:125,162,255; --on-ink:#0B0C0E; --on-amber:#0B0C0E;
  --acc2:#B0C4E8; --acc2-rgb:176,196,232;
  --violet:#B0C4E8; --mag:#B0C4E8; --violet2:#C9D6F2; --violet-rgb:176,196,232;
  --amber:#E0A85C; --mar:#E0A85C; --mard:#E0A85C; --amber2:#E0A85C; --amber-rgb:224,168,92;
  --good:#5FD3A0; --good-rgb:95,211,160; --bad:#E06C75;
  --good-bg:#10261D; --bad-bg:#2A1518; --amber-bg:#2A2013; --blue-bg:#141C2B;
  --good-txt:#BFEBD6; --amber-txt:#F0D3A6;
  --disp:'Chakra Petch','Mukta',system-ui,sans-serif; --f-display:'Chakra Petch','Mukta',system-ui,sans-serif;
  --f-body:'Barlow','Mukta',system-ui,sans-serif; --f-mono:'IBM Plex Mono','Mukta',ui-monospace,monospace;
  --radius:7px; --tracking:.02em; --caps-track:.14em;
  --shadow:0 1px 0 rgba(255,255,255,.03); --glow:none; --grid:rgba(125,162,255,.025); --overlay:none;
  --bg-rgb:11,12,14; --panel-rgb:19,21,25; --soft-rgb:24,27,32; --txt-rgb:230,233,237; --line-rgb:37,42,49; --line2-rgb:29,33,39;
}
:root[data-theme="technoir"] *{ text-shadow:none !important; }

:root[data-theme="crt"]{
  /* Skin Lab — "Terminal / CRT": phosphor green, VT323 throughout, scanlines, zero radius */
  color-scheme:dark;
  --bg:#03100A; --panel:#061A0F; --card:#061A0F; --soft:#08210F; --panel2:#08210F; --line:#155C33; --line2:#0E3D22;
  --txt:#63F58B; --txt2:#63F58B; --txt3:#4FCF74; --txt4:#8CFFB0; --mut:#2F8A52; --mut2:#256B40;
  --ink:#8CFFB0; --ink2:#B8FFCF; --ink-rgb:140,255,176; --on-ink:#03100A; --on-amber:#03100A;
  --acc2:#FFB000; --acc2-rgb:255,176,0;
  --violet:#FFB000; --mag:#FFB000; --violet2:#FFC94D; --violet-rgb:255,176,0;
  --amber:#FFB000; --mar:#FFB000; --mard:#FFB000; --amber2:#FFB000; --amber-rgb:255,176,0;
  --good:#63F58B; --good-rgb:99,245,139; --bad:#FF5C4D;
  --good-bg:#0A2A14; --bad-bg:#2A0F0C; --amber-bg:#2A2000; --blue-bg:#0A2A14;
  --good-txt:#8CFFB0; --amber-txt:#FFD27A;
  --disp:'VT323','IBM Plex Mono',monospace; --f-display:'VT323','IBM Plex Mono',monospace;
  --f-body:'VT323','Mukta',monospace; --f-mono:'VT323','IBM Plex Mono',monospace;
  --radius:0px; --tracking:.04em; --caps-track:.2em;
  --shadow:none; --glow:none; --grid:rgba(99,245,139,.04);
  --overlay:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.34) 2px 4px);
  --bg-rgb:3,16,10; --panel-rgb:6,26,15; --soft-rgb:8,33,15; --txt-rgb:99,245,139; --line-rgb:21,92,51; --line2-rgb:14,61,34;
}
:root[data-theme="crt"] *{ text-shadow:none !important; }

/* warm paper has no neon glow — text-shadows and glowing borders soften to depth */
:root[data-theme="warm"] *{ text-shadow:none !important; }

/* ---- the switch: ☀ Warm (primary) · 🌙 Noir · 🔷 Tech-noir · 🟩 CRT · ⚡ Brutal — fixed, same on every surface ---- */
.sl-theme{position:fixed;right:14px;bottom:14px;z-index:99999;display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);user-select:none;font-size:12px;line-height:1;color:var(--mut);
  font-family:'IBM Plex Mono','Mukta',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;}
.sl-theme .seg{cursor:pointer;padding:6px 9px;border-radius:var(--radius);border:1px solid transparent;color:var(--mut);display:inline-flex;align-items:center;gap:5px;}
.sl-theme .seg:hover{color:var(--txt);}
.sl-theme .seg.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.sl-theme .seg .lbl{font-size:10.5px;}
@media (max-width:560px){ .sl-theme{bottom:auto;top:10px;right:10px;} .sl-theme .seg .lbl{display:none;} }
@media print{ .sl-theme{display:none;} }