/* KiQHub icons — painting for the duotone glyphs made by core/icons.js:
     <svg class="ico" data-tone="blue"><g class="ic-d">surface</g><g class="ic-s">sheen (≥24px)</g><g class="ic-o">ink</g></svg>
   Small places (small ribbon buttons, menus, status bar, toasts, top bar): flat duotone = a soft tone tint under
   a currentColor outline. Big places (large ribbon buttons, collapsed groups, File screen tiles, new-file cards,
   empty states, or any icon with class .ico-3d): glossy 3D = tone gradient + specular sheen + deep ink + shadow.
   Opt out anywhere with .ico-flat. Glyphs: Phosphor Icons (MIT) + KiQHub glyphs, tools/gen_icons3d.mjs. */

:root {
  --t-blue: #3a76f0;   --t-blue-hi: #8fbaff;   --t-blue-lo: #1f4fcf;
  --t-indigo: #5b5bd6; --t-indigo-hi: #aeb0ff; --t-indigo-lo: #3a33ae;
  --t-violet: #8b5cf6; --t-violet-hi: #cdaeff; --t-violet-lo: #6430d2;
  --t-teal: #0fa3a0;   --t-teal-hi: #64e3d6;   --t-teal-lo: #0a7275;
  --t-green: #14a46b;  --t-green-hi: #74dfab;  --t-green-lo: #0b7348;
  --t-amber: #eda01a;  --t-amber-hi: #ffd97a;  --t-amber-lo: #bf7406;
  --t-orange: #f0703c; --t-orange-hi: #ffb28e; --t-orange-lo: #c4471b;
  --t-rose: #e5486a;   --t-rose-hi: #ff9db3;   --t-rose-lo: #b1234a;
  --t-slate: #64748b;  --t-slate-hi: #b9c4d3;  --t-slate-lo: #3d495c;
  --ic-tint: .3;                       /* duotone surface opacity in flat places */
  --ic-spec: .75;                      /* white sheen on 3D icons (read by the #kiq-g-spec gradient) */
  --ic-edge-y: 1px;                    /* 3D "thickness": a solid edge in the deep tone under the icon */
  --ic-drop: drop-shadow(0 2px 2px rgba(16, 24, 40, .2));
  --ic-drop-hover: drop-shadow(0 3px 3px rgba(16, 24, 40, .26));
}

/* ── base: every icon ────────────────────────────────────────────────────────────────────────────────────────── */
.ico {
  flex: none; overflow: visible;
  --ic-ink: color-mix(in oklab, var(--ic-lo) 74%, #0a1020);
  --ic-edge: color-mix(in srgb, var(--ic-lo) 62%, #0a1020);
}
.ico[data-tone="blue"]   { --ic-tone: var(--t-blue);   --ic-hi: var(--t-blue-hi);   --ic-lo: var(--t-blue-lo); }
.ico[data-tone="indigo"] { --ic-tone: var(--t-indigo); --ic-hi: var(--t-indigo-hi); --ic-lo: var(--t-indigo-lo); }
.ico[data-tone="violet"] { --ic-tone: var(--t-violet); --ic-hi: var(--t-violet-hi); --ic-lo: var(--t-violet-lo); }
.ico[data-tone="teal"]   { --ic-tone: var(--t-teal);   --ic-hi: var(--t-teal-hi);   --ic-lo: var(--t-teal-lo); }
.ico[data-tone="green"]  { --ic-tone: var(--t-green);  --ic-hi: var(--t-green-hi);  --ic-lo: var(--t-green-lo); }
.ico[data-tone="amber"]  { --ic-tone: var(--t-amber);  --ic-hi: var(--t-amber-hi);  --ic-lo: var(--t-amber-lo); }
.ico[data-tone="orange"] { --ic-tone: var(--t-orange); --ic-hi: var(--t-orange-hi); --ic-lo: var(--t-orange-lo); }
.ico[data-tone="rose"]   { --ic-tone: var(--t-rose);   --ic-hi: var(--t-rose-hi);   --ic-lo: var(--t-rose-lo); }
.ico[data-tone="slate"]  { --ic-tone: var(--t-slate);  --ic-hi: var(--t-slate-hi);  --ic-lo: var(--t-slate-lo); }

.ico .ic-o { fill: currentColor; }
.ico .ic-d { fill: var(--ic-tone); opacity: var(--ic-tint); }
.ico .ic-s { display: none; }

/* flat places */
.k-menu-icon .ico .ic-d { opacity: calc(var(--ic-tint) + .04); }
.rb-btn.on .ico .ic-d, .sb-btn.on .ico .ic-d { opacity: calc(var(--ic-tint) + .12); }
/* on coloured or glass bars (top bar, File screen nav) and in toasts the icon stays monochrome */
:is(.topbar, .bs-nav, .k-toast) .ico .ic-d { fill: currentColor; opacity: .25; }
:is(.topbar, .bs-nav, .k-toast) .ico .ic-o { fill: currentColor; color: inherit; }
/* tiny glyphs (carets, launchers) read better without the surface */
.ico[width="8"] .ic-d, .ico[width="9"] .ic-d, .ico[width="10"] .ic-d, .ico[width="11"] .ic-d, .ico[width="12"] .ic-d { display: none; }

/* ── 3D: big places ──────────────────────────────────────────────────────────────────────────────────────────── */
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico:not(.ico-flat), .ico.ico-3d {
  filter: drop-shadow(0 var(--ic-edge-y) 0 var(--ic-edge)) var(--ic-drop);
  transition: filter .15s ease;
}
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico:not(.ico-flat) .ic-d, .ico.ico-3d .ic-d { opacity: 1; }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico:not(.ico-flat) .ic-s, .ico.ico-3d .ic-s { display: inline; fill: url(#kiq-g-spec); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico:not(.ico-flat) .ic-o, .ico.ico-3d .ic-o { color: var(--ic-ink); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="blue"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="blue"] .ic-d { fill: url(#kiq-g-blue); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="indigo"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="indigo"] .ic-d { fill: url(#kiq-g-indigo); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="violet"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="violet"] .ic-d { fill: url(#kiq-g-violet); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="teal"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="teal"] .ic-d { fill: url(#kiq-g-teal); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="green"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="green"] .ic-d { fill: url(#kiq-g-green); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="amber"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="amber"] .ic-d { fill: url(#kiq-g-amber); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="orange"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="orange"] .ic-d { fill: url(#kiq-g-orange); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="rose"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="rose"] .ic-d { fill: url(#kiq-g-rose); }
:is(.rb-btn.large .rb-ico, .rb-group-btn .rb-ico, .bs-tile, .new-card, .k-empty) .ico[data-tone="slate"]:not(.ico-flat) .ic-d, .ico.ico-3d[data-tone="slate"] .ic-d { fill: url(#kiq-g-slate); }
.k-empty .ico:not(.ico-flat) { opacity: 1; }
/* a little lift on hover (one :is() so every branch outranks the rule above) */
:is(.rb-btn.large:hover:not(:disabled) .rb-ico, .rb-group-btn:hover .rb-ico, .bs-tile:hover, .new-card:hover) .ico:not(.ico-flat) {
  filter: drop-shadow(0 var(--ic-edge-y) 0 var(--ic-edge)) var(--ic-drop-hover);
}

/* ── skins ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/* soft: a little flatter — weaker sheen, no thickness edge, gentler gradient and shadow */
html[data-skin="soft"] {
  --ic-spec: .32;
  --ic-edge-y: 0px;
  --ic-drop: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .16));
  --ic-drop-hover: drop-shadow(0 2px 2.5px rgba(16, 24, 40, .2));
  --t-blue-hi: #7eaaf8;   --t-indigo-hi: #9da0f2; --t-violet-hi: #bf9ef9; --t-teal-hi: #4fcfc4; --t-green-hi: #5fcf99;
  --t-amber-hi: #fbcd66;  --t-orange-hi: #fba27c; --t-rose-hi: #f68ba2;   --t-slate-hi: #a8b4c4;
}
/* studio (dark graphite chrome) and dark theme: brighter tones, light ink, softer dark shadows */
html[data-skin="studio"], html[data-theme="dark"] {
  --t-blue: #5b93ff;   --t-blue-hi: #8cb6ff;   --t-blue-lo: #2c5fe0;
  --t-indigo: #8285ff; --t-indigo-hi: #adaeff; --t-indigo-lo: #4a45d0;
  --t-violet: #a67cff; --t-violet-hi: #c7a8ff; --t-violet-lo: #7443e6;
  --t-teal: #2cc7c0;   --t-teal-hi: #6ae3da;   --t-teal-lo: #0f8c8c;
  --t-green: #2fc585;  --t-green-hi: #74e2ae;  --t-green-lo: #108a57;
  --t-amber: #f7b83a;  --t-amber-hi: #ffd87e;  --t-amber-lo: #cc8210;
  --t-orange: #ff8a57; --t-orange-hi: #ffb391; --t-orange-lo: #d9592a;
  --t-rose: #ff6b8b;   --t-rose-hi: #ff9fb4;   --t-rose-lo: #cf3a5f;
  --t-slate: #8f9bb0;  --t-slate-hi: #bcc6d6;  --t-slate-lo: #5b6679;
  --ic-spec: .4;
  --ic-tint: .36;
  --ic-edge-y: 1px;
  --ic-drop: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .5));
  --ic-drop-hover: drop-shadow(0 2.5px 3px rgba(0, 0, 0, .6));
}
html[data-skin="studio"] .ico, html[data-theme="dark"] .ico {
  --ic-ink: color-mix(in oklab, var(--ic-hi) 30%, #fff);
  --ic-edge: color-mix(in srgb, var(--ic-lo) 55%, #000);
}

/* ── disabled: greyed and faded everywhere (beats the 3D rules) ──────────────────────────────────────────────── */
:is(.rb-btn:disabled, button:disabled, .disabled, [aria-disabled="true"]) .ico,
:is(.rb-btn:disabled, button:disabled, .disabled, [aria-disabled="true"]) .ico.ico-3d {
  filter: grayscale(1) !important;
  opacity: .42 !important;
}
:is(.rb-btn:disabled, button:disabled, .disabled, [aria-disabled="true"]) .ico .ic-s { display: none !important; }

@media (prefers-reduced-motion: reduce) { .ico { transition: none !important; } }
@media (forced-colors: active) { .ico .ic-d, .ico .ic-s { display: none !important; } .ico .ic-o { fill: CanvasText; color: CanvasText; } }