/* ITAGIL brand green, identical in every theme -- it is the app's identity colour.
   Sampled from itagil.dk: #4da747 accent, #fcfcfc page, #252525 ink, #666 muted.

   Seven themes: the original dark and light, plus five stylized ones. Each is a
   full set of the variables below, selected by data-theme on <html>. The list,
   the names and which of them are light-ish live in THEMES in
   js/01-assets-brand.js; the picker is ThemeMenu in js/65-canvas.js.

   The second selector on each block is that theme's swatch in the picker
   (.tsw[data-th="<id>"], styled in css/10-toolbar.css): it sets the same
   variables on one little element, so a swatch can never drift away from the
   palette it stands for. */
:root, .tsw[data-th="dark"]{
  --brand:#4da747; --brand-2:#3d8a39; --brand-fg:#ffffff;

  /* dark theme (default) */
  --bg:#050506;
  --bg-dot:#191a1f;
  --chrome:#0b0c0e;
  --surface:#141518;    --surface-hi:#1c1e22;
  --panel:#101114;      --panel-hi:#1b1d21;
  --card-a:#141517;     --card-b:#0c0d0f;
  --stroke:#26282d;     --stroke-hi:#41454d;
  --text:#f2f4f7;       --muted:#878c96;      --faint:#6b7079;
  --edge:#5c616b;
  --card-shadow:0 18px 40px -24px #000;
  --pop-shadow:0 20px 50px -12px #000;
  --sb-thumb:#3a3e46; --sb-thumb-hi:#4e535c;
  /* the wordmark's lettering: white in logo-dark, #565b5a in the original */
  --brand-ink:#ffffff;
  /* tells the browser to draw native scrollbars/controls dark */
  color-scheme:dark;
  --teal:#2dd4bf;   --teal-2:#0d9488;
  --amber:#f59e0b;  --amber-2:#b45309;
  --blue:#3b82f6;   --blue-2:#1d4ed8;
  --violet:#a78bfa; --violet-2:#6d28d9;
}
:root[data-theme="light"], .tsw[data-th="light"]{
  --bg:#fcfcfc;
  --bg-dot:#dde1e5;
  --chrome:#ffffff;
  --surface:#f6f7f9;    --surface-hi:#eaedf1;
  --panel:#ffffff;      --panel-hi:#eff1f4;
  --card-a:#ffffff;     --card-b:#f7f8fa;
  --stroke:#e3e6ea;     --stroke-hi:#bfc6ce;
  --text:#252525;       --muted:#666666;      --faint:#9aa1a9;
  --edge:#b4bbc3;
  --card-shadow:0 6px 18px -10px rgba(17,35,55,.28), 0 1px 3px rgba(17,35,55,.07);
  --pop-shadow:0 16px 40px -14px rgba(17,35,55,.30), 0 2px 6px rgba(17,35,55,.08);
  --sb-thumb:#c7cdd4; --sb-thumb-hi:#aab2bb;
  --brand-ink:#565b5a;          /* sampled straight out of the logo PNG */
  color-scheme:light;
}

/* ---- Slate: cool graphite dark ---- */
:root[data-theme="slate"], .tsw[data-th="slate"]{
  --bg:#0a0d12;
  --bg-dot:#1d222c;
  --chrome:#0e1218;
  --surface:#161b23;    --surface-hi:#1f2630;
  --panel:#121620;      --panel-hi:#1c222e;
  --card-a:#161b24;     --card-b:#0e121a;
  --stroke:#242b36;     --stroke-hi:#3b4553;
  --text:#eef1f5;       --muted:#8a94a3;      --faint:#6b7483;
  --edge:#5d6878;
  --card-shadow:0 18px 40px -24px #000;
  --pop-shadow:0 20px 50px -12px #000;
  --sb-thumb:#39424f; --sb-thumb-hi:#4d5868;
  --brand-ink:#ffffff;
  color-scheme:dark;
}
/* ---- Midnight: deep indigo dark ---- */
:root[data-theme="midnight"], .tsw[data-th="midnight"]{
  --bg:#06040f;
  --bg-dot:#201b38;
  --chrome:#0b0818;
  --surface:#17132b;    --surface-hi:#211c3a;
  --panel:#120f24;      --panel-hi:#1d1836;
  --card-a:#161229;     --card-b:#0d0a1c;
  --stroke:#272142;     --stroke-hi:#423a66;
  --text:#f1eefc;       --muted:#938cb3;      --faint:#766f96;
  --edge:#6a6192;
  --card-shadow:0 18px 40px -24px #000;
  --pop-shadow:0 20px 50px -12px #000;
  --sb-thumb:#3b3463; --sb-thumb-hi:#4e4680;
  --brand-ink:#ffffff;
  color-scheme:dark;
}
/* ---- Sand: warm beige light ---- */
:root[data-theme="sand"], .tsw[data-th="sand"]{
  --bg:#faf6ef;
  --bg-dot:#e4d9c3;
  --chrome:#fffdf8;
  --surface:#f1ead9;    --surface-hi:#e8dfc9;
  --panel:#fffdf8;      --panel-hi:#f0e8d6;
  --card-a:#fffdf9;     --card-b:#f7f1e4;
  --stroke:#e9ddc8;     --stroke-hi:#cdbb9c;
  --text:#2b2318;       --muted:#6f6350;      --faint:#9c8e78;
  --edge:#bdae94;
  --card-shadow:0 6px 18px -10px rgba(74,56,28,.30), 0 1px 3px rgba(74,56,28,.08);
  --pop-shadow:0 16px 40px -14px rgba(74,56,28,.32), 0 2px 6px rgba(74,56,28,.09);
  --sb-thumb:#d2c3a7; --sb-thumb-hi:#b9a788;
  --brand-ink:#565b5a;
  color-scheme:light;
}
/* ---- Mist: cool blue-grey light ---- */
:root[data-theme="mist"], .tsw[data-th="mist"]{
  --bg:#f5f8fb;
  --bg-dot:#d6dee7;
  --chrome:#ffffff;
  --surface:#e9eef4;    --surface-hi:#dde5ee;
  --panel:#ffffff;      --panel-hi:#eaeff5;
  --card-a:#ffffff;     --card-b:#f3f6fa;
  --stroke:#dde4ea;     --stroke-hi:#b6c2cf;
  --text:#1f2733;       --muted:#5d6a7a;      --faint:#909cab;
  --edge:#a9b6c4;
  --card-shadow:0 6px 18px -10px rgba(17,35,55,.28), 0 1px 3px rgba(17,35,55,.07);
  --pop-shadow:0 16px 40px -14px rgba(17,35,55,.30), 0 2px 6px rgba(17,35,55,.08);
  --sb-thumb:#c2cdd9; --sb-thumb-hi:#a6b3c1;
  --brand-ink:#565b5a;
  color-scheme:light;
}
/* ---- Rose: warm pink-tinted light ---- */
:root[data-theme="rose"], .tsw[data-th="rose"]{
  --bg:#fdf5f6;
  --bg-dot:#f0d8dd;
  --chrome:#fffafb;
  --surface:#f7e9ec;    --surface-hi:#f0dbe0;
  --panel:#fffafb;      --panel-hi:#f8ebee;
  --card-a:#fffbfc;     --card-b:#faf0f2;
  --stroke:#f0dde1;     --stroke-hi:#d9b7bf;
  --text:#2a1c1f;       --muted:#6f5a5f;      --faint:#a08b90;
  --edge:#c6a6ad;
  --card-shadow:0 6px 18px -10px rgba(74,28,38,.26), 0 1px 3px rgba(74,28,38,.07);
  --pop-shadow:0 16px 40px -14px rgba(74,28,38,.28), 0 2px 6px rgba(74,28,38,.08);
  --sb-thumb:#e0c3ca; --sb-thumb-hi:#c9a6af;
  --brand-ink:#565b5a;
  color-scheme:light;
}

/* Scrollbars follow the theme. Colours come from --sb-*, which the simulated
   Windows overrides locally so it stays dark even under the light themes. */
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hi);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* Accent palette per node type. A new node type needs a class here plus an entry in
   NODE_TYPES. --accent/--accent-2 are the icon-tile gradient (the same in every theme);
   --accent-ink is the readable text/border shade, darkened for the light-ish themes. */
.a-teal  {--accent:var(--teal);  --accent-2:var(--teal-2);  --accent-ink:var(--teal);  --tile-fg:#03211d; --panel-bg:rgba(13,148,136,.12); --panel-bd:rgba(45,212,191,.26)}
.a-amber {--accent:var(--amber); --accent-2:var(--amber-2); --accent-ink:var(--amber); --tile-fg:#2a1a02; --panel-bg:rgba(180,83,9,.14);  --panel-bd:rgba(245,158,11,.28)}
.a-blue  {--accent:var(--blue);  --accent-2:var(--blue-2);  --accent-ink:var(--blue);  --tile-fg:#f8fbff; --panel-bg:rgba(29,78,216,.16);  --panel-bd:rgba(59,130,246,.30)}
.a-violet{--accent:var(--violet);--accent-2:var(--violet-2);--accent-ink:var(--violet);--tile-fg:#f6f3ff; --panel-bg:rgba(109,40,217,.16); --panel-bd:rgba(167,139,250,.28)}
/* The light-ish themes (light, sand, mist, rose) all want the darkened accents. */
:root[data-theme="light"] .a-teal,
:root[data-theme="sand"] .a-teal,
:root[data-theme="mist"] .a-teal,
:root[data-theme="rose"] .a-teal  {--accent-ink:#0e7c72; --panel-bg:rgba(13,148,136,.08); --panel-bd:rgba(13,148,136,.30)}
:root[data-theme="light"] .a-amber,
:root[data-theme="sand"] .a-amber,
:root[data-theme="mist"] .a-amber,
:root[data-theme="rose"] .a-amber {--accent-ink:#a35c07; --panel-bg:rgba(217,119,6,.09);  --panel-bd:rgba(217,119,6,.32)}
:root[data-theme="light"] .a-blue,
:root[data-theme="sand"] .a-blue,
:root[data-theme="mist"] .a-blue,
:root[data-theme="rose"] .a-blue  {--accent-ink:#1d4ed8; --panel-bg:rgba(37,99,235,.08);  --panel-bd:rgba(37,99,235,.30)}
:root[data-theme="light"] .a-violet,
:root[data-theme="sand"] .a-violet,
:root[data-theme="mist"] .a-violet,
:root[data-theme="rose"] .a-violet{--accent-ink:#6d28d9; --panel-bg:rgba(109,40,217,.08); --panel-bd:rgba(109,40,217,.28)}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);overflow:hidden;
  font:14px/1.45 'Montserrat',ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#root{height:100%}
.app{height:100%;display:flex;flex-direction:column}