/* Three alternate colour stages. Sunset reproduces the source template gradient. */
body.jarvis-softform[data-palette],
.softform-connections[data-palette] {
  --j-fg:#fff;
  --j-muted:#fffffff0;
  --j-soft-fg:#3d4441;
  --j-soft-muted:#626e66;
  --j-accent:#f8d5e8;
  --j-soft-accent:#a58bd0;
  --j-well-fill:linear-gradient(140deg,#c35a5426,#ffffff05 65%);
  --j-well-shadow:#a5424952;
  --j-well-light:#ffeacb83;
  --j-lens-fill:linear-gradient(155deg,#ffffff14,#b1405e05 52%,#ffffff1b);
  --j-lens-shadow:#9039481c;
  --j-edge:linear-gradient(133deg,#ffffffed 0%,#fff8eb80 20%,#ffffff00 43%,#ffffff08 57%,#ffe7e1b8 83%,#ffffff14 100%);
  --j-rule:#ffffff38;
  --j-track:#ffffff29;
  --j-selected:#ffffff26;
  --j-button-fill:var(--j-lens-fill);
  --j-surface-shadow:0 8px 24px #a5424905;
  --j-text-highlight:#65304d18;
  --j-soft-well-fill:linear-gradient(140deg,#dbe4df29,#ffffff1f 65%);
  --j-soft-well-shadow:#738a7f20;
  --j-soft-well-light:#ffffffd9;
  --j-soft-lens-fill:linear-gradient(155deg,#ffffff77,#ffffff34);
  --j-soft-lens-shadow:#758a7f14;
  --j-soft-edge:linear-gradient(133deg,#fffffff0 0%,#ffffff80 20%,#ffffff00 43%,#ffffff08 57%,#ffffffad 82%,#ffffff18 100%);
  --j-soft-rule:#a4b4aa25;
  --j-soft-track:#c9d5cd3b;
  --j-soft-selected:#ffffffa3;
  --j-soft-button-fill:linear-gradient(145deg,#ffffffb8,#ffffff58);
  --j-soft-text-highlight:#ffffff80;
}

/* Orange, peach and pink: the exact background from Softform's warm surface. */
body.jarvis-softform[data-palette="sunset"],
.softform-connections[data-palette="sunset"] {
  --j-gradient:
    radial-gradient(ellipse at 0 0,#ffddba 0,transparent 37%),
    radial-gradient(ellipse at 100% 0,#ffc68a 0,transparent 45%),
    radial-gradient(ellipse at 56% 116%,#e335dc 0,transparent 63%),
    linear-gradient(165deg,#ffac67 10%,#fa965e 48%,#ee72c6 82%,#fd8e70);
  --j-kpi-1:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#fff9f2,#f9eee6);
  --j-kpi-2:radial-gradient(ellipse at 6% 0,#a9d9f870,transparent 63%),linear-gradient(145deg,#66b9f0,#47a0e7 67%,#4c98e5);
  --j-kpi-3:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#fbf9ff,#eee9f7);
  --j-kpi-4:radial-gradient(ellipse at 0 0,#ffd39b55,transparent 65%),radial-gradient(ellipse at 100% 100%,#ec73cf70,transparent 75%),linear-gradient(145deg,#f2a66d,#ed859f 75%);
  --j-dashboard-gradient:var(--j-kpi-2);
}

/* Citrus light, jade and turquoise. */
body.jarvis-softform[data-palette="lagoon"],
.softform-connections[data-palette="lagoon"] {
  --j-gradient:
    radial-gradient(ellipse at 0 0,#e4f39b 0,transparent 43%),
    radial-gradient(ellipse at 100% 0,#a9ead9 0,transparent 49%),
    radial-gradient(ellipse at 61% 118%,#38a6d5 0,transparent 65%),
    linear-gradient(155deg,#92d8a7 0%,#45bfae 50%,#40aac7 83%,#6ccab9);
  --j-kpi-1:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#f8fcf0,#eaf6e9);
  --j-kpi-2:radial-gradient(ellipse at 0 0,#c4eaa857,transparent 66%),linear-gradient(145deg,#5ac9a9,#30b5aa 77%);
  --j-kpi-3:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#f6fcff,#e4f2f5);
  --j-kpi-4:radial-gradient(ellipse at 0 0,#bbeced57,transparent 66%),linear-gradient(145deg,#5abbd8,#3c9fd0 77%);
  --j-dashboard-gradient:var(--j-kpi-2);
  --j-accent:#d9f8d8;
  --j-soft-accent:#81b49b;
  --j-well-fill:linear-gradient(140deg,#237c7726,#ffffff05 65%);
  --j-well-shadow:#277b7952;
  --j-well-light:#eeffd783;
  --j-lens-fill:linear-gradient(155deg,#ffffff17,#126d7a05 52%,#ffffff1b);
  --j-lens-shadow:#266a711c;
  --j-text-highlight:#246d7518;
}

/* Iris, periwinkle and warm coral light. */
body.jarvis-softform[data-palette="aurora"],
.softform-connections[data-palette="aurora"] {
  --j-gradient:
    radial-gradient(ellipse at 0 0,#a9d5ff 0,transparent 43%),
    radial-gradient(ellipse at 100% 0,#f6b4ad 0,transparent 48%),
    radial-gradient(ellipse at 60% 118%,#a263da 0,transparent 67%),
    linear-gradient(155deg,#92a5e7 0%,#9b83db 49%,#d77fb6 83%,#ee9cbb);
  --j-kpi-1:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#fcfaff,#eeeafa);
  --j-kpi-2:radial-gradient(ellipse at 0 0,#c7c9ff66,transparent 66%),linear-gradient(145deg,#a18ee6,#8973d9 77%);
  --j-kpi-3:radial-gradient(ellipse at 8% 0,#fff 0,transparent 72%),linear-gradient(145deg,#fffaf5,#f9eee6);
  --j-kpi-4:radial-gradient(ellipse at 0 0,#ffd9b566,transparent 66%),linear-gradient(145deg,#f0a18b,#e983a7 77%);
  --j-dashboard-gradient:var(--j-kpi-2);
  --j-accent:#ebd5ff;
  --j-soft-accent:#b098d0;
  --j-well-fill:linear-gradient(140deg,#6d4b9d26,#ffffff05 65%);
  --j-well-shadow:#7454984a;
  --j-well-light:#ffe9e083;
  --j-lens-fill:linear-gradient(155deg,#ffffff17,#6b3b8d05 52%,#ffffff1b);
  --j-lens-shadow:#72517f1c;
  --j-text-highlight:#63467518;
}

/* Local material contexts keep controls, shadows and text on the same surface. */
body.jarvis-softform .softform-connections[data-palette] :is(.connections-metric,.connections-palette-surface) {
  --sf-ink:var(--j-fg);
  --sf-muted:var(--j-muted);
  --sf-faint:var(--j-muted);
  --sf-fg:var(--j-fg);
  --sf-text-muted:var(--j-muted);
  --sf-accent:var(--j-accent);
  --sf-accent-strong:var(--j-fg);
  --sf-surface-fill:var(--j-gradient);
  --sf-surface-shadow:var(--j-surface-shadow);
  --sf-well-fill:var(--j-well-fill);
  --sf-well-shadow:var(--j-well-shadow);
  --sf-well-light:var(--j-well-light);
  --sf-lens-fill:var(--j-lens-fill);
  --sf-lens-shadow:var(--j-lens-shadow);
  --sf-edge-gradient:var(--j-edge);
  --sf-rule:var(--j-rule);
  --sf-track:var(--j-track);
  --sf-selected-fill:var(--j-selected);
  --sf-button-fill:var(--j-button-fill);
  --sf-glow-rgb:255 255 255;
  --text:var(--sf-fg);
  --muted:var(--sf-text-muted);
  --muted2:var(--sf-text-muted);
  --accent-text:var(--sf-fg);
  --line:var(--sf-rule);
  --edge:transparent;
  --panel:var(--sf-lens-fill);
  --panel-solid:var(--sf-canvas);
  color:var(--sf-fg);
  background:var(--sf-surface-fill);
  border:0;
  box-shadow:var(--sf-surface-shadow);
}
body.jarvis-softform .softform-connections[data-palette] :is(.connections-kpi--1,.connections-kpi--3) {
  --sf-ink:var(--j-soft-fg);
  --sf-muted:var(--j-soft-muted);
  --sf-faint:var(--j-soft-muted);
  --sf-fg:var(--j-soft-fg);
  --sf-text-muted:var(--j-soft-muted);
  --sf-accent:var(--j-soft-accent);
  --sf-accent-strong:var(--j-soft-fg);
  --sf-well-fill:var(--j-soft-well-fill);
  --sf-well-shadow:var(--j-soft-well-shadow);
  --sf-well-light:var(--j-soft-well-light);
  --sf-lens-fill:var(--j-soft-lens-fill);
  --sf-lens-shadow:var(--j-soft-lens-shadow);
  --sf-edge-gradient:var(--j-soft-edge);
  --sf-rule:var(--j-soft-rule);
  --sf-track:var(--j-soft-track);
  --sf-selected-fill:var(--j-soft-selected);
  --sf-button-fill:var(--j-soft-button-fill);
  --sf-glow-rgb:165 143 212;
  --j-text-highlight:var(--j-soft-text-highlight);
  color:var(--sf-fg);
}
body.jarvis-softform .softform-connections[data-palette] .connections-kpi--1 {--sf-surface-fill:var(--j-kpi-1)}
body.jarvis-softform .softform-connections[data-palette] .connections-kpi--2 {--sf-surface-fill:var(--j-kpi-2)}
body.jarvis-softform .softform-connections[data-palette] .connections-kpi--3 {--sf-surface-fill:var(--j-kpi-3)}
body.jarvis-softform .softform-connections[data-palette] .connections-kpi--4 {--sf-surface-fill:var(--j-kpi-4)}
body.jarvis-softform .softform-connections[data-palette] .dashboard-assignment {--sf-surface-fill:var(--j-dashboard-gradient)}
body.jarvis-softform .softform-connections[data-palette="sunset"] :is(.connections-kpi--2,.dashboard-assignment) {
  --sf-well-fill:linear-gradient(145deg,#2e8bd71a,#a1d8ff09 64%);
  --sf-well-shadow:#0c66aa4d;
  --sf-well-light:#bce8ff76;
  --sf-lens-shadow:#1a69ab1c;
  --sf-lens-fill:linear-gradient(155deg,#ffffff18,#0c66aa04 52%,#ffffff1b);
}
body.jarvis-softform .softform-connections[data-palette] :is(.connections-metric,.connections-palette-surface) .sf-button--glass {color:var(--sf-fg);text-shadow:0 1px 1px var(--j-text-highlight)}

/* Colour stages are shared by light and dark mode. */