/* ==========================================================================
   themes.css — 5 backgrounds × 7 glass tints
   --------------------------------------------------------------------------
   <html data-bg="…" data-glass="…" data-ink="dark|light" data-boost="0|1">
   is set by js/theme.js. Background and glass never depend on each other:
   the background paints the wallpaper, the glass tint paints every surface.
   ========================================================================== */

/* Registered so a theme switch cross-fades the wallpaper instead of jumping */
@property --base1 { syntax: '<color>'; inherits: true; initial-value: #d8cbb6; }
@property --base2 { syntax: '<color>'; inherits: true; initial-value: #efe5d4; }
@property --c1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --c4 { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root {
  transition:
    --base1 1.2s var(--ease),
    --base2 1.2s var(--ease),
    --c1 1.2s var(--ease),
    --c2 1.2s var(--ease),
    --c3 1.2s var(--ease),
    --c4 1.2s var(--ease);
}

/* ------------------------------------------------------------------------
   Backgrounds — base gradient + four slow "liquid" light blobs.
   --accent is the one highlight colour that suits each wallpaper.
   ------------------------------------------------------------------------ */
[data-bg='aurora'] {
  --base1: #060a1c;
  --base2: #0f1a3d;
  --c1: #19d3a2;
  --c2: #6b4dff;
  --c3: #1aa6ff;
  --c4: #ff4fa0;
  --accent: #22c99a;
  --on-accent: #03241a;
}
[data-bg='graphite'] {
  --base1: #111214;
  --base2: #2a2c32;
  --c1: #5d6474;
  --c2: #9aa0ab;
  --c3: #3b4254;
  --c4: #7a6551;
  --accent: #7c9cff;
  --on-accent: #0b1638;
}
[data-bg='sand'] {
  --base1: #cbbba3;
  --base2: #efe5d4;
  --c1: #f7e6c8;
  --c2: #d9b98c;
  --c3: #c79c6b;
  --c4: #f2dcc0;
  --accent: #0e7c6d;
  --on-accent: #ffffff;
}
[data-bg='ocean'] {
  --base1: #021626;
  --base2: #063d62;
  --c1: #00b4d8;
  --c2: #0466a8;
  --c3: #4dd2ea;
  --c4: #2ee6c5;
  --accent: #1fb8e3;
  --on-accent: #02243a;
}
[data-bg='sunset'] {
  --base1: #240c33;
  --base2: #9c3658;
  --c1: #ff7a59;
  --c2: #ffb36b;
  --c3: #c0428a;
  --c4: #6b3fa0;
  --accent: #ff8a6b;
  --on-accent: #3a0f0a;
}

/* The wallpaper layer (markup in index.html) */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(160deg, var(--base1), var(--base2));
}
.bg-blob {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.8;
  will-change: transform;
}
.bg-blob.b1 { --c: var(--c1); top: -28vmax; left: -18vmax; animation: drift1 32s ease-in-out infinite alternate; }
.bg-blob.b2 { --c: var(--c2); top: -10vmax; right: -30vmax; animation: drift2 38s ease-in-out infinite alternate; }
.bg-blob.b3 { --c: var(--c3); bottom: -34vmax; left: 8vmax; animation: drift3 44s ease-in-out infinite alternate; }
.bg-blob.b4 { --c: var(--c4); bottom: -20vmax; right: -12vmax; width: 52vmax; height: 52vmax; opacity: 0.55; animation: drift1 36s ease-in-out -12s infinite alternate-reverse; }

@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-16vmax, 12vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(12vmax, -14vmax) scale(1.08); } }

/* Sand = the warm interior photo from the glassy dashboard, lightly tinted */
.bg-photo {
  position: absolute;
  inset: -3%;
  background: url('../assets/bg/sand.jpg') center / cover no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1.1s var(--ease),
    transform 1.6s var(--ease);
}
[data-bg='sand'] .bg-photo {
  opacity: 1;
  transform: none;
}
[data-bg='sand'] .bg-blob {
  opacity: 0.28;
}
/* the photo has dark shelves and a TV: a milky wash keeps small text readable over them */
[data-bg='sand'] .bg-veil {
  background: linear-gradient(180deg, rgb(255 248 236 / 0.2), rgb(255 248 236 / 0.14));
}
.bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(20 14 8 / 0.04), rgb(20 14 8 / 0.2));
}

/* ------------------------------------------------------------------------
   Glass tints. Each sets:
     --tint      rgb channels of the glass
     --card-a    opacity of cards        --panel-a  opacity of the big panel
     --chrome    the darker glass of the top bar, rail and tab bar (white text)
     --edge      the bright rim of every pane
   ------------------------------------------------------------------------ */
:root {
  --tint: 255 255 255;
  --card-a: 0.5;
  --panel-a: 0.2;
  --chrome-rgb: 66 60 54;
  --chrome-a: 0.66;
  --edge: rgb(255 255 255 / 0.55);
  --boost: 0;

  --glass: rgb(var(--tint) / calc(var(--card-a) + var(--boost) * 0.24));
  --glass-strong: rgb(var(--tint) / calc(var(--card-a) + 0.36 + var(--boost) * 0.1));
  --panel: rgb(var(--tint) / calc(var(--panel-a) + var(--boost) * 0.34));
  --chrome: rgb(var(--chrome-rgb) / var(--chrome-a));
}
[data-boost='1'] {
  --boost: 1;
}

[data-glass='clear'] {
  --tint: 255 255 255;
  --card-a: 0.07;
  --panel-a: 0.04;
  --chrome-rgb: 40 38 36;
  --chrome-a: 0.6;
  --edge: rgb(255 255 255 / 0.4);
}
[data-glass='white'] {
  --tint: 255 255 255;
  --card-a: 0.5;
  --panel-a: 0.2;
  --chrome-rgb: 66 60 54;
  --chrome-a: 0.66;
  --edge: rgb(255 255 255 / 0.55);
}
[data-glass='grey'] {
  --tint: 228 228 233;
  --card-a: 0.52;
  --panel-a: 0.22;
  --chrome-rgb: 52 52 58;
  --chrome-a: 0.66;
  --edge: rgb(255 255 255 / 0.42);
}
[data-glass='smoke'] {
  --tint: 16 16 20;
  --card-a: 0.52;
  --panel-a: 0.34;
  --chrome-rgb: 8 8 10;
  --chrome-a: 0.62;
  --edge: rgb(255 255 255 / 0.16);
}
[data-glass='champagne'] {
  --tint: 252 236 206;
  --card-a: 0.52;
  --panel-a: 0.2;
  --chrome-rgb: 84 64 40;
  --chrome-a: 0.66;
  --edge: rgb(255 246 228 / 0.6);
}
[data-glass='ice'] {
  --tint: 222 238 255;
  --card-a: 0.52;
  --panel-a: 0.2;
  --chrome-rgb: 34 56 84;
  --chrome-a: 0.66;
  --edge: rgb(236 246 255 / 0.6);
}
[data-glass='rose'] {
  --tint: 255 220 231;
  --card-a: 0.52;
  --panel-a: 0.2;
  --chrome-rgb: 88 44 62;
  --chrome-a: 0.66;
  --edge: rgb(255 236 242 / 0.6);
}

/* Clear glass over a busy wallpaper needs a veil, or small text gets lost:
   a milky one under dark text, a smoky one under white text. It still looks clear. */
[data-bg='sand'][data-glass='smoke'] {
  --card-a: 0.66;
  --panel-a: 0.56;
}
[data-glass='clear'][data-ink='dark'] {
  --card-a: 0.3;
  --panel-a: 0.3;
}
[data-glass='clear'][data-ink='light'] {
  --tint: 6 8 14;
  --card-a: 0.42;
  --panel-a: 0.32;
}

/* ------------------------------------------------------------------------
   Ink — text and line colours that sit on the glass.
   ------------------------------------------------------------------------ */
[data-ink='dark'] {
  --ink: #121417;
  --ink-2: #2b2e34;
  /* small grey text: dark enough for AA contrast on every background × glass */
  --muted: rgb(18 20 23 / 0.86);
  --faint: rgb(18 20 23 / 0.64);
  --line: rgb(18 20 23 / 0.09);
  --line-2: rgb(18 20 23 / 0.14);
  --soft: rgb(255 255 255 / 0.42);
  --soft-2: rgb(255 255 255 / 0.66);
  --solid: #121417;
  --on-solid: #ffffff;
  --text-glow: 0 1px .875rem rgb(255 255 255 / 0.25);
  /* status colours are used as small text on mid-tone glass, so they run deep */
  --green: #07592f;
  --red: #8c1a20;
  --amber: #6b4400;
  --blue: #173a99;
  --violet: #47278f;
  /* pills carry their own light base, so their text holds up on any glass */
  --green-bg: rgb(222 245 231 / 0.78);
  --red-bg: rgb(252 230 230 / 0.78);
  --amber-bg: rgb(252 239 208 / 0.78);
  --blue-bg: rgb(226 234 252 / 0.78);
  --violet-bg: rgb(236 230 252 / 0.78);
  --shadow-card: 0 1.125rem 2.5rem -1.875rem rgb(40 28 16 / 0.55);
  color-scheme: light;
}
[data-ink='light'] {
  --ink: #ffffff;
  --ink-2: rgb(255 255 255 / 0.86);
  --muted: rgb(255 255 255 / 0.88);
  --faint: rgb(255 255 255 / 0.66);
  --line: rgb(255 255 255 / 0.12);
  --line-2: rgb(255 255 255 / 0.2);
  --soft: rgb(255 255 255 / 0.07);
  --soft-2: rgb(255 255 255 / 0.12);
  --solid: #ffffff;
  --on-solid: #121417;
  --text-glow: 0 1px .75rem rgb(0 0 0 / 0.22);
  --green: #86efac;
  --red: #ffb1b5;
  --amber: #fde08a;
  --blue: #bcd3ff;
  --violet: #d6caff;
  --green-bg: rgb(74 222 128 / 0.16);
  --red-bg: rgb(255 128 134 / 0.16);
  --amber-bg: rgb(252 197 74 / 0.16);
  --blue-bg: rgb(143 182 255 / 0.16);
  --violet-bg: rgb(214 202 255 / 0.16);
  --shadow-card: 0 1.125rem 2.5rem -1.75rem rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ------------------------------------------------------------------------
   Swatch previews in «Вигляд»
   ------------------------------------------------------------------------ */
.sw-aurora { background: radial-gradient(60% 70% at 20% 20%, #19d3a2, transparent), radial-gradient(60% 70% at 85% 30%, #6b4dff, transparent), radial-gradient(70% 70% at 50% 100%, #1aa6ff, transparent), #0b1230; }
.sw-graphite { background: radial-gradient(60% 70% at 25% 20%, #8d939f, transparent), radial-gradient(60% 60% at 80% 85%, #6e5d4d, transparent), linear-gradient(160deg, #141518, #2a2c32); }
.sw-sand { background: url('../assets/bg/sand.jpg') center / cover, #d6cdc1; }
.sw-ocean { background: radial-gradient(60% 70% at 20% 25%, #00b4d8, transparent), radial-gradient(60% 60% at 85% 80%, #2ee6c5, transparent), linear-gradient(160deg, #021626, #063d62); }
.sw-sunset { background: radial-gradient(60% 70% at 25% 20%, #ffb36b, transparent), radial-gradient(70% 70% at 80% 75%, #c0428a, transparent), linear-gradient(160deg, #ff7a59, #6b3fa0); }

/* the glass swatches float a pane of each tint over the current wallpaper */
.sw-scene { background: linear-gradient(160deg, var(--base1), var(--base2)); position: relative; overflow: hidden; }
.sw-scene::before,
.sw-scene::after { content: ''; position: absolute; border-radius: 50%; }
.sw-scene::before { width: 70%; height: 70%; left: -10%; top: -12%; background: var(--c1); }
.sw-scene::after { width: 60%; height: 60%; right: -12%; bottom: -14%; background: var(--c2); }
[data-bg='sand'] .sw-scene { background: url('../assets/bg/sand.jpg') center / cover; }
[data-bg='sand'] .sw-scene::before,
[data-bg='sand'] .sw-scene::after { display: none; }

.tint-clear { --tp: rgb(255 255 255 / 0.1); }
.tint-white { --tp: rgb(255 255 255 / 0.55); }
.tint-grey { --tp: rgb(214 214 220 / 0.55); }
.tint-smoke { --tp: rgb(16 16 20 / 0.5); }
.tint-champagne { --tp: rgb(252 236 206 / 0.6); }
.tint-ice { --tp: rgb(222 238 255 / 0.58); }
.tint-rose { --tp: rgb(255 220 231 / 0.58); }