/* Kilumen UI theme: the ONE place for UI colour, pattern, border, radius and motion tokens (UI pass, Oct 22, 2026).
   Gary: "a full ui that feels alive and colourful", "need patterns and colors".
   - Every screen has its own colourway + pattern identity: set on the screen element by [data-scr] below.
   - Patterns are built from hard-stop CSS gradients / tiny SVG tiles (crisp edges, whole-px tiles) so they sit well next to
     64px game art. Text never sits on a pattern directly: it sits on a .plate (solid/near-solid), so contrast stays >= 4.5:1
     (checked by tests/ui_theme.test.mjs on the --ink / --plate pairs below).
   - Sizes per platform are NOT here: they come from src/platform/pc.json / mobile.json "ui" blocks (ui.js sets --ui-* vars).
   - Motion: durations here; prefers-reduced-motion OR body.ui-reduce (Options) turns idle motion and scrolling patterns off. */
:root {
  /* base inks and plates (text pairs: ink on plate, plate-ink on dark) */
  --ink: #1f1633;            /* dark text on light plates */
  --ink-soft: #4a3d66;       /* secondary text on light plates (>= 4.5 on --plate) */
  --plate: #fffaf0;          /* light text plate */
  --plate-2: #f3ecff;        /* alt light plate (selected rows use the screen accent instead) */
  --night: #1a1226;          /* dark plate */
  --night-2: #2a1d40;
  --on-night: #fffaf0;       /* text on dark plates */
  --on-night-soft: #cbbfe0;  /* secondary text on dark plates */
  --outline: #1a1226;        /* thick friendly outline around panels */
  --sun: #ffd23f; --sun-deep: #ffb000;
  --good: #3fd16b; --warn: #ffc93c; --bad: #ff4d5e;  /* HP bar: green > 50%, yellow > 20%, red */
  --xp: #4fc3ff; --xp-deep: #1f8fe0;
  --energy: #b07cff;

  /* shape */
  --r-panel: 18px; --r-plate: 12px; --r-chip: 999px;
  --bw: 4px;                 /* thick border */
  --shadow-drop: 0 5px 0 var(--outline);
  --shadow-soft: 0 10px 28px rgba(16, 8, 32, .35);

  /* motion */
  --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms;
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pat-scroll: 18s;         /* one pattern tile loop for slowly scrolling backgrounds */
  --bob: 1.1s;               /* cursor / arrow bob */
  --pulse: 1.6s;             /* selection pulse */
  --reveal-ms: 14ms;         /* dialogue text reveal per character */

  /* element palette: --el-<name> = colour, --el-<name>-2 = pattern partner. Ink on these = --ink (all are light/mid-light,
     checked >= 4.5:1 in tests/ui_theme.test.mjs). */
  --el-fire: #ff8a3d;    --el-fire-2: #ffc06a;
  --el-magma: #ff6f52;   --el-magma-2: #ffb08f;
  --el-water: #4fb8ff;   --el-water-2: #a3dcff;
  --el-freshwater: #5fd0f0; --el-freshwater-2: #b6eefc;
  --el-sea: #3fa9e8;     --el-sea-2: #92d2ff;
  --el-rain: #7fb6e8;    --el-rain-2: #c4dcf5;
  --el-swamp: #8fbf5a;   --el-swamp-2: #c9e39a;
  --el-earth: #d9a55b;   --el-earth-2: #f0d29a;
  --el-grass: #6fd46a;   --el-grass-2: #b8f0a6;
  --el-bug: #b5d43f;     --el-bug-2: #e0f08c;
  --el-wind: #8fe0c8;    --el-wind-2: #d0f6ea;
  --el-bird: #9fd3ff;    --el-bird-2: #d6ecff;
  --el-light: #ffe066;   --el-light-2: #fff3b0;
  --el-angelic: #ffe9a8; --el-angelic-2: #fff8dc;
  --el-dark: #a58bd6;    --el-dark-2: #cdbdf0;
  --el-ghost: #b9a2ff;   --el-ghost-2: #e0d4ff;
  --el-mystic: #f08ce8;  --el-mystic-2: #fcc8f6;
  --el-spirit: #c9b8ff;  --el-spirit-2: #ebe2ff;
  --el-demon: #ff7a9a;   --el-demon-2: #ffc0cf;
  --el-devil: #ff6b7d;   --el-devil-2: #ffb3bd;
  --el-dragos: #7fd6a8;  --el-dragos-2: #c2f0d6;
  --el-god: #ffd98a;     --el-god-2: #fff0c8;
  --el-legendary: #ffc44d; --el-legendary-2: #ffe7a8;
  --el-normal: #d8d0e8;  --el-normal-2: #f0ecf8;

  /* pattern sizes (whole px so tiles stay crisp) */
  --pat-size: 24px; --pat-size-lg: 48px;
}

/* ---------- per-screen colourways: --sc-a (main), --sc-b (pattern partner), --sc-c (deep accent / border glow),
   --sc-sel (selected row plate, ink stays --ink), --sc-pat (pattern name for docs; the real pattern is the background below) */
[data-scr] { --sc-a: #7a5cff; --sc-b: #9f86ff; --sc-c: #3b2a8a; --sc-sel: #ffe07a; }
[data-scr=phone]    { --sc-a: #6c4cf0; --sc-b: #8a6dff; --sc-c: #2c1d7a; --sc-sel: #ffe07a; }   /* crystals, violet */
[data-scr=team]     { --sc-a: #ff7a6b; --sc-b: #ff9d8f; --sc-c: #a8323e; --sc-sel: #fff0a8; }   /* polka dots, coral */
[data-scr=summary]  { --sc-a: #ffb72e; --sc-b: #ffd06e; --sc-c: #a0600a; --sc-sel: #fff3c4; }   /* chevrons, gold */
[data-scr=pack]     { --sc-a: #3fbf6a; --sc-b: #6fdc8c; --sc-c: #17663a; --sc-sel: #fff3a8; }   /* leaves, green */
[data-scr=kilindex] { --sc-a: #2f9bff; --sc-b: #6cbcff; --sc-c: #134f9a; --sc-sel: #ffe9a0; }   /* diamond lattice, sky */
[data-scr=shop]     { --sc-a: #ff8a1f; --sc-b: #ffb35c; --sc-c: #a34800; --sc-sel: #fff0b8; }   /* awning stripes, tangerine */
[data-scr=archive]  { --sc-a: #18b7b0; --sc-b: #4fd8cf; --sc-c: #0b5f5b; --sc-sel: #fff0a8; }   /* checker, teal */
[data-scr=save]     { --sc-a: #9b6cff; --sc-b: #c0a2ff; --sc-c: #4a2a9a; --sc-sel: #ffe9a0; }   /* sparkles, lavender */
[data-scr=options]  { --sc-a: #5a7cff; --sc-b: #8aa2ff; --sc-c: #24338f; --sc-sel: #fff0a8; }   /* wavy bands, periwinkle */
[data-scr=map]      { --sc-a: #47c27a; --sc-b: #8fe0a8; --sc-c: #1d6b3e; --sc-sel: #fff0a8; }
[data-scr=tasks]    { --sc-a: #ff6fa8; --sc-b: #ff9fc6; --sc-c: #9a2a5e; --sc-sel: #fff0a8; }
[data-scr=contacts] { --sc-a: #ff9a3d; --sc-b: #ffc27a; --sc-c: #9a4e0e; --sc-sel: #fff0a8; }
[data-scr=battle]   { --sc-a: #4e5fd9; --sc-b: #7584ff; --sc-c: #1d2470; --sc-sel: #ffe07a; }
[data-scr=title]    { --sc-a: #ff8a3d; --sc-b: #ffd23f; --sc-c: #6c2bd9; --sc-sel: #ffe07a; }
[data-scr=dialogue] { --sc-a: #2a1d40; --sc-b: #3a2a5c; --sc-c: #8a6dff; --sc-sel: #ffe07a; }
[data-scr=hud]      { --sc-a: #2a1d40; --sc-b: #3a2a5c; --sc-c: #ffd23f; --sc-sel: #ffe07a; }

/* ---------- pattern library (applied with [data-pat]); colours come from the nearest --sc-a / --sc-b ---------- */
[data-pat] { background-color: var(--sc-a); }
[data-pat=dots] {      /* polka dots, two offset grids */
  background-image: radial-gradient(circle at 25% 25%, var(--sc-b) 0 18%, transparent 19%),
                    radial-gradient(circle at 75% 75%, var(--sc-b) 0 18%, transparent 19%);
  background-size: var(--pat-size-lg) var(--pat-size-lg); }
[data-pat=stripes] {   /* diagonal stripes */
  background-image: repeating-linear-gradient(135deg, var(--sc-b) 0 12px, transparent 12px 24px); background-size: auto; }
[data-pat=awning] {    /* bold vertical shop stripes */
  background-image: repeating-linear-gradient(90deg, var(--sc-b) 0 24px, transparent 24px 48px); }
[data-pat=chevron] {
  background-image: linear-gradient(135deg, var(--sc-b) 25%, transparent 25%), linear-gradient(225deg, var(--sc-b) 25%, transparent 25%);
  background-size: var(--pat-size-lg) var(--pat-size-lg); background-position: 0 0, 0 0; }
[data-pat=lattice] {   /* diamond lattice */
  background-image: linear-gradient(45deg, transparent 46%, var(--sc-b) 46% 54%, transparent 54%),
                    linear-gradient(-45deg, transparent 46%, var(--sc-b) 46% 54%, transparent 54%);
  background-size: 32px 32px; }
[data-pat=checker] {
  background-image: conic-gradient(var(--sc-b) 25%, transparent 0 50%, var(--sc-b) 0 75%, transparent 0);
  background-size: 40px 40px; }
[data-pat=waves] {     /* wavy bands, crisp scallops */
  background-image: radial-gradient(circle at 50% 100%, transparent 0 9px, var(--sc-b) 10px 15px, transparent 16px);
  background-size: 32px 16px; }
[data-pat=crystal]::before, [data-pat=leaf]::before, [data-pat=sparkle]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-color: var(--sc-b); opacity: .9;
  -webkit-mask-size: 40px 40px; mask-size: 40px 40px; }
/* motif tiles: small crisp SVG shapes used as masks over --sc-b (crystal = Kilumen's crystals, leaf, sparkle) */
[data-pat=crystal]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h2v2h1v4h-1v2H5V8H4V4h1zM14 11h2v2h1v4h-1v2h-2v-2h-1v-4h1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h2v2h1v4h-1v2H5V8H4V4h1zM14 11h2v2h1v4h-1v2h-2v-2h-1v-4h1z'/%3E%3C/svg%3E"); }
[data-pat=leaf]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M3 3h3v1h2v2h1v3H8v1H6V9H5V8H4V6H3zM12 12h3v1h2v2h1v3h-1v1h-2v-1h-1v-1h-1v-2h-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M3 3h3v1h2v2h1v3H8v1H6V9H5V8H4V6H3zM12 12h3v1h2v2h1v3h-1v1h-2v-1h-1v-1h-1v-2h-1z'/%3E%3C/svg%3E"); }
[data-pat=sparkle]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v3h3v1H6v3H5V5H2V4h3zM15 11h1v2h2v1h-2v2h-1v-2h-2v-1h2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v3h3v1H6v3H5V5H2V4h3zM15 11h1v2h2v1h-2v2h-1v-2h-2v-1h2z'/%3E%3C/svg%3E"); }
:where([data-pat=crystal], [data-pat=leaf], [data-pat=sparkle]) { position: relative; } [data-pat=crystal], [data-pat=leaf], [data-pat=sparkle] { isolation: isolate; }

/* slow scroll (only where [data-scroll]); off with reduced motion */
[data-scroll] { animation: ui-pat-scroll var(--pat-scroll) linear infinite; }
[data-scroll]::before { animation: ui-mask-scroll var(--pat-scroll) linear infinite; }
@keyframes ui-pat-scroll { to { background-position: 96px 96px, 96px 96px; } }
@keyframes ui-mask-scroll { to { -webkit-mask-position: 80px 80px; mask-position: 80px 80px; } }

/* element-tinted surfaces: [data-el=fire] etc. set --sc-a/--sc-b from the element palette */
[data-el] { --sc-a: var(--el-normal); --sc-b: var(--el-normal-2); }
[data-el=fire] { --sc-a: var(--el-fire); --sc-b: var(--el-fire-2); }       [data-el=magma] { --sc-a: var(--el-magma); --sc-b: var(--el-magma-2); }
[data-el=water] { --sc-a: var(--el-water); --sc-b: var(--el-water-2); }    [data-el=freshwater] { --sc-a: var(--el-freshwater); --sc-b: var(--el-freshwater-2); }
[data-el=sea] { --sc-a: var(--el-sea); --sc-b: var(--el-sea-2); }          [data-el=rain] { --sc-a: var(--el-rain); --sc-b: var(--el-rain-2); }
[data-el=swamp] { --sc-a: var(--el-swamp); --sc-b: var(--el-swamp-2); }    [data-el=earth] { --sc-a: var(--el-earth); --sc-b: var(--el-earth-2); }
[data-el=grass] { --sc-a: var(--el-grass); --sc-b: var(--el-grass-2); }    [data-el=bug] { --sc-a: var(--el-bug); --sc-b: var(--el-bug-2); }
[data-el=wind] { --sc-a: var(--el-wind); --sc-b: var(--el-wind-2); }       [data-el=bird] { --sc-a: var(--el-bird); --sc-b: var(--el-bird-2); }
[data-el=light] { --sc-a: var(--el-light); --sc-b: var(--el-light-2); }    [data-el=angelic] { --sc-a: var(--el-angelic); --sc-b: var(--el-angelic-2); }
[data-el=dark] { --sc-a: var(--el-dark); --sc-b: var(--el-dark-2); }       [data-el=ghost] { --sc-a: var(--el-ghost); --sc-b: var(--el-ghost-2); }
[data-el=mystic] { --sc-a: var(--el-mystic); --sc-b: var(--el-mystic-2); } [data-el=spirit] { --sc-a: var(--el-spirit); --sc-b: var(--el-spirit-2); }
[data-el=demon] { --sc-a: var(--el-demon); --sc-b: var(--el-demon-2); }    [data-el=devil] { --sc-a: var(--el-devil); --sc-b: var(--el-devil-2); }
[data-el=dragos] { --sc-a: var(--el-dragos); --sc-b: var(--el-dragos-2); } [data-el=god] { --sc-a: var(--el-god); --sc-b: var(--el-god-2); }
[data-el=legendary] { --sc-a: var(--el-legendary); --sc-b: var(--el-legendary-2); }

/* touch controls colourways (visual only; ids, sizes and hit areas untouched) */
:root {
  --tp-a: #ff5a6e; --tp-a-2: #ff8a98; --tp-a-ink: #fff;  --tp-a-rim: #8a1328;
  --tp-b: #3f8cff; --tp-b-2: #78afff; --tp-b-ink: #fff;  --tp-b-rim: #123f8f;
  --tp-pad: #7a5cff; --tp-pad-2: #9f86ff; --tp-pad-ink: #fff; --tp-pad-rim: #2c1d7a;
  --tp-small: #ffd23f; --tp-small-2: #ffe58a; --tp-small-ink: #1f1633; --tp-small-rim: #8a6200;
}

/* reduced motion: system setting or Options (body.ui-reduce) */
@media (prefers-reduced-motion: reduce) {
  [data-scroll], [data-scroll]::before { animation: none !important; }
}
body.ui-reduce [data-scroll], body.ui-reduce [data-scroll]::before { animation: none !important; }