/* ══════════════════════════════════════════════════════════════
   Colour tokens of the IoT UI: app shell and home (.iot) and the control modules (.htr — heater, climate).
   Light / dark follows data-bs-theme. Spacing, type, radius, motion and elevation come from
   dcc-tokens.css (--dcc-*); the surface look (glass, soft shadows, glows) is defined here too, so every
   page that uses these tokens picks up the same visual language.
   ══════════════════════════════════════════════════════════════ */

:is(.htr, .iot) {
    --bg: #eef1f7;
    --s-1: #ffffff;
    --s-2: #f4f6fa;
    --s-3: #e7ebf2;
    --line: rgba(15, 23, 42, .08);
    --line-2: rgba(15, 23, 42, .14);
    --txt: #0f172a;
    --muted: #5b6b82;
    --faint: #94a3b8;
    --acc: #10b981;
    --acc-2: #84cc16;
    --warm: #f97316;
    --warm-2: #ef4444;
    --cool: #0ea5e9;
    --vio: #7c6cf0;
    --ok: #10b981;
    --err: #e11d48;
    --pend: #d97706;
    /* glass surfaces (panels over drawings, tab bar, top bar) */
    --glass: rgba(255, 255, 255, .7);
    --glass-2: rgba(15, 23, 42, .035);
    --glass-line: rgba(255, 255, 255, .92);
    /* soft depth: a hairline highlight and a long, faint drop shadow */
    --sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .2);
    --sh-2: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 50px -26px rgba(15, 23, 42, .3);
    --glow-a: rgba(16, 185, 129, .1);
    --glow-b: rgba(124, 108, 240, .08);
    --sky-a: #cfe7f3;
    --sky-b: #e3f1f4;
    --sky-c: #f1f7f2;
    --tint-acc: color-mix(in srgb, var(--acc) 12%, transparent);
    --tint-acc-2: color-mix(in srgb, var(--acc) 24%, transparent);
    --tint-warm: color-mix(in srgb, var(--warm) 12%, transparent);
    --tint-warm-2: color-mix(in srgb, var(--warm) 24%, transparent);
    --tint-cool: color-mix(in srgb, var(--cool) 12%, transparent);
    --tint-err: color-mix(in srgb, var(--err) 12%, transparent);
    --tint-pend: color-mix(in srgb, var(--pend) 16%, transparent);
    --tint-vio: color-mix(in srgb, var(--vio) 14%, transparent);
    /* frosted glass: one surface for every card of the app (home, climate, heater, the other pages) */
    --frost: rgba(255, 255, 255, .74);
    --frost-line: rgba(255, 255, 255, .9);
    --frost-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 44px -26px rgba(15, 35, 60, .35);
    --frost-hi: rgba(255, 255, 255, .6);
    --ink-soft: color-mix(in srgb, var(--txt) 8%, transparent);
    --sun: #b45309;
    /* text in a tone colour: darker in daylight so it reads on light glass and tints; the base colours stay for fills */
    --acc-t: #047857;
    --ok-t: #047857;
    --warm-t: #c2410c;
    --cool-t: #0369a1;
    --pend-t: #b45309;
    --err-t: #be123c;
    --ease-soft: cubic-bezier(.2, .8, .2, 1);
}

[data-bs-theme="dark"] :is(.htr, .iot) {
    --bg: #080c18;
    --s-1: #11182b;
    --s-2: #172038;
    --s-3: #202b47;
    --line: rgba(148, 163, 209, .1);
    --line-2: rgba(148, 163, 209, .18);
    --txt: #eaeef8;
    --muted: #8a94b0;
    --faint: #5b6583;
    --acc: #34d399;
    --acc-2: #a3e635;
    --warm: #fb923c;
    --cool: #38bdf8;
    --vio: #8b7cf6;
    --ok: #34d399;
    --err: #fb7185;
    --pend: #fbbf24;
    --glass: rgba(17, 24, 43, .62);
    --glass-2: rgba(255, 255, 255, .05);
    --glass-line: rgba(255, 255, 255, .1);
    --sh-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -24px rgba(0, 0, 0, .75);
    --sh-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .85);
    --glow-a: rgba(52, 211, 153, .09);
    --glow-b: rgba(139, 124, 246, .1);
    --sky-a: #0b1530;
    --sky-b: #122243;
    --sky-c: #1b3550;
    --tint-acc: color-mix(in srgb, var(--acc) 14%, transparent);
    --tint-acc-2: color-mix(in srgb, var(--acc) 28%, transparent);
    --tint-warm: color-mix(in srgb, var(--warm) 15%, transparent);
    --tint-warm-2: color-mix(in srgb, var(--warm) 30%, transparent);
    --tint-cool: color-mix(in srgb, var(--cool) 15%, transparent);
    --tint-err: color-mix(in srgb, var(--err) 16%, transparent);
    --tint-pend: color-mix(in srgb, var(--pend) 20%, transparent);
    --frost: rgba(18, 26, 46, .62);
    --frost-line: rgba(255, 255, 255, .1);
    --frost-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 24px 48px -28px rgba(0, 0, 0, .85);
    --frost-hi: rgba(255, 255, 255, .07);
    --ink-soft: color-mix(in srgb, var(--txt) 10%, transparent);
    --sun: #fcd34d;
    --acc-t: var(--acc);
    --ok-t: var(--ok);
    --warm-t: var(--warm);
    --cool-t: var(--cool);
    --pend-t: var(--pend);
    --err-t: var(--err);
    --tint-vio: color-mix(in srgb, var(--vio) 18%, transparent);
}

:is(.htr, .iot) .ltr { direction: ltr; unicode-bidi: isolate; }
:is(.htr, .iot) .muted { color: var(--muted); }
:is(.htr, .iot) .num { font-variant-numeric: tabular-nums; }