/* themes.css — dark/light base + accent palettes */

/* ── Canonical palette swatches ──
 * Used by UI that needs to show ALL palette colors at once (e.g. the
 * palette picker dots in classic mode) regardless of which palette is
 * currently active. Each value matches the corresponding dark-mode --accent
 * below; if you tweak an accent here, also tweak the matching swatch.
 * One source of truth lives here so picker code never hardcodes a hex. */
:root {
  --swatch-sky:    #5b8ef0;
  --swatch-forest: #4da86a;
  --swatch-tide:   #3dbdbd;
  --swatch-bloom:  #a87de8;
  --swatch-dusk:   #e8584b;
  --swatch-earth:  #c8845a;
  --swatch-stone:  #d8d8d8;
}

[data-theme="dark"] {
  --bg: #262626;
  --bg-window: rgba(14, 14, 14, 0.68);
  --bg-window-solid: #161616;
  --bg-title: rgba(18, 18, 18, 0.70);
  --bg-input: #141414;
  --bg-card: #1a1a1a;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --text: #ededed;
  --text-secondary: #b8b8b8;
  --text-muted: #909090;
  --shadow-window: 0 12px 42px rgba(0,0,0,0.52), 0 4px 14px rgba(0,0,0,0.28);
  --shadow-window-focus: 0 20px 58px rgba(0,0,0,0.62), 0 6px 20px rgba(0,0,0,0.32);
  /* light catching the rim: bright top-left, dim bottom-right, subtle bounce */
  --window-rim: linear-gradient(
    145deg,
    rgba(255,255,255,0.30)  0%,
    rgba(255,255,255,0.10) 22%,
    rgba(255,255,255,0.03) 48%,
    rgba(255,255,255,0.02) 68%,
    rgba(255,255,255,0.14) 100%
  );
}

[data-theme="light"] {
  --bg: #f2f2f2;
  --bg-window: rgba(255, 255, 255, 0.76);
  --bg-window-solid: #ffffff;
  --bg-title: rgba(248, 248, 248, 0.80);
  --bg-input: #fafafa;
  --bg-card: #f5f5f5;
  --border: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.13);
  --text: #111111;
  --text-secondary: #505050;
  --text-muted: #606060;
  --shadow-window: 0 8px 32px rgba(0,0,0,0.09), 0 3px 10px rgba(0,0,0,0.06);
  --shadow-window-focus: 0 14px 44px rgba(0,0,0,0.14), 0 5px 16px rgba(0,0,0,0.08);
  /* white specular top-left, subtle shadow bottom-right */
  --window-rim: linear-gradient(
    145deg,
    rgba(255,255,255,0.95)  0%,
    rgba(255,255,255,0.50) 20%,
    rgba(0,0,0,0.08)       48%,
    rgba(0,0,0,0.06)       68%,
    rgba(255,255,255,0.75) 100%
  );
}

/* ── Sky (blue) — airy, high composition ── */
[data-palette="sky"] {
  --accent: #5b8ef0;
  --accent-bright: #7aa5f5;
  --accent-dim: #2d4fa8;
  --accent-glow: rgba(91, 142, 240, 0.16);
  --bg: #0c1630;
  --grad-1: #1e3878;
  --grad-2: #1e4898;
  --grad-3: #101a50;
  --grad-4: #34129a;
  --gx1: 15%; --gy1: 18%;
  --gx2: 84%; --gy2: 55%;
  --gx3: 68%; --gy3: 92%;
  --gx4: 82%; --gy4: 8%;
  --texture: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0), radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  --texture-size: 17px 17px, 41px 41px;
}
[data-theme="light"][data-palette="sky"] {
  --bg: #f2f2f2;
  --accent: #3060c8;
  --accent-bright: #4070d8;
  --accent-dim: #90b0e8;
  --accent-glow: rgba(48, 96, 200, 0.10);
  --grad-1: #c0d0f0;
  --grad-2: #d0ddf8;
  --grad-3: #e0e8f8;
  --grad-4: #ddd0f5;
  --texture: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.12) 1px, transparent 0), radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0);
}
[data-palette="sky"] .backdrop { animation-name: drift-sky; animation-duration: 30s; }
@keyframes drift-sky {
  0%, 100% { --gx1: 15%; --gy1: 18%; --gx2: 84%; --gy2: 55%; --gx3: 68%; --gy3: 92%; --gx4: 82%; --gy4: 8%;  }
  50%       { --gx1: 26%; --gy1: 32%; --gx2: 70%; --gy2: 72%; --gx3: 55%; --gy3: 80%; --gx4: 70%; --gy4: 22%; }
}

/* ── Forest (green) — grounded, canopy weighted low ── */
[data-palette="forest"] {
  --accent: #4da86a;
  --accent-bright: #62bf80;
  --accent-dim: #2a6640;
  --accent-glow: rgba(77, 168, 106, 0.16);
  --bg: #0e1810;
  --grad-1: #2a4030;
  --grad-2: #32503a;
  --grad-3: #252d28;
  --grad-4: #2a3e5a;
  --gx1: 10%; --gy1: 72%;
  --gx2: 88%; --gy2: 22%;
  --gx3: 45%; --gy3: 98%;
  --gx4: 20%; --gy4: 12%;
  --texture: repeating-linear-gradient(60deg, transparent 0, transparent 9px, rgba(255,255,255,0.035) 9px, rgba(255,255,255,0.035) 10px),
             repeating-linear-gradient(-60deg, transparent 0, transparent 9px, rgba(255,255,255,0.025) 9px, rgba(255,255,255,0.025) 10px);
  --texture-size: 20px 20px;
}
[data-theme="light"][data-palette="forest"] {
  --bg: #f2f2f2;
  --accent: #2d7a47;
  --accent-bright: #368a54;
  --accent-dim: #8abd9e;
  --accent-glow: rgba(45, 122, 71, 0.10);
  --grad-1: #c0dcc8;
  --grad-2: #d0e8d8;
  --grad-3: #e0f0e5;
  --grad-4: #e8e0c8;
  --texture: repeating-linear-gradient(60deg, transparent 0, transparent 9px, rgba(0,0,0,0.05) 9px, rgba(0,0,0,0.05) 10px),
             repeating-linear-gradient(-60deg, transparent 0, transparent 9px, rgba(0,0,0,0.04) 9px, rgba(0,0,0,0.04) 10px);
}
[data-palette="forest"] .backdrop { animation-name: drift-forest; animation-duration: 34s; }
@keyframes drift-forest {
  0%, 100% { --gx1: 10%; --gy1: 72%; --gx2: 88%; --gy2: 22%; --gx3: 45%; --gy3: 98%; --gx4: 20%; --gy4: 12%; }
  50%       { --gx1: 22%; --gy1: 58%; --gx2: 75%; --gy2: 38%; --gx3: 58%; --gy3: 85%; --gx4: 32%; --gy4: 26%; }
}

/* ── Tide (ocean teal) — flowing diagonal ── */
[data-palette="tide"] {
  --accent: #3dbdbd;
  --accent-bright: #52d0d0;
  --accent-dim: #1e7878;
  --accent-glow: rgba(61, 189, 189, 0.16);
  --bg: #0e1a1e;
  --grad-1: #2a3e42;
  --grad-2: #2f4c54;
  --grad-3: #252f32;
  --grad-4: #282e48;
  --gx1: 18%; --gy1: 42%;
  --gx2: 82%; --gy2: 55%;
  --gx3: 32%; --gy3: 88%;
  --gx4: 74%; --gy4: 10%;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100'%3E%3Cpath d='M0 50 C30 10 90 90 120 50' stroke='white' stroke-opacity='0.038' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --texture-size: 120px 100px;
}
[data-theme="light"][data-palette="tide"] {
  --bg: #f2f2f2;
  --accent: #2a8f90;
  --accent-bright: #34a8a8;
  --accent-dim: #80c4c4;
  --accent-glow: rgba(42, 143, 144, 0.10);
  --grad-1: #bedede;
  --grad-2: #cce8e8;
  --grad-3: #daf0f0;
  --grad-4: #c8d8f0;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100'%3E%3Cpath d='M0 50 C30 10 90 90 120 50' stroke='black' stroke-opacity='0.045' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
[data-palette="tide"] .backdrop { animation-name: drift-tide; animation-duration: 26s; }
@keyframes drift-tide {
  0%, 100% { --gx1: 18%; --gy1: 42%; --gx2: 82%; --gy2: 55%; --gx3: 32%; --gy3: 88%; --gx4: 74%; --gy4: 10%; }
  50%       { --gx1: 30%; --gy1: 28%; --gx2: 68%; --gy2: 70%; --gx3: 48%; --gy3: 75%; --gx4: 62%; --gy4: 25%; }
}

/* ── Bloom (violet/purple) — dreamy, centered ── */
[data-palette="bloom"] {
  --accent: #a87de8;
  --accent-bright: #bc96f2;
  --accent-dim: #5e3aab;
  --accent-glow: rgba(168, 125, 232, 0.16);
  --bg: #160e24;
  --grad-1: #3a2f4e;
  --grad-2: #463565;
  --grad-3: #2d2638;
  --grad-4: #45253a;
  --gx1: 30%; --gy1: 28%;
  --gx2: 70%; --gy2: 68%;
  --gx3: 52%; --gy3: 95%;
  --gx4: 12%; --gy4: 20%;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='120' cy='180' r='220' stroke='white' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='480' cy='160' r='180' stroke='white' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='310' cy='520' r='240' stroke='white' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='560' cy='480' r='150' stroke='white' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --texture-size: 600px 600px;
}
[data-theme="light"][data-palette="bloom"] {
  --bg: #f2f2f2;
  --accent: #7048c0;
  --accent-bright: #8058d0;
  --accent-dim: #b094de;
  --accent-glow: rgba(112, 72, 192, 0.10);
  --grad-1: #d8ccf0;
  --grad-2: #e4d8f8;
  --grad-3: #ede5fa;
  --grad-4: #f0d0e8;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='120' cy='180' r='220' stroke='black' stroke-opacity='0.07' stroke-width='1' fill='none'/%3E%3Ccircle cx='480' cy='160' r='180' stroke='black' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='310' cy='520' r='240' stroke='black' stroke-opacity='0.07' stroke-width='1' fill='none'/%3E%3Ccircle cx='560' cy='480' r='150' stroke='black' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
[data-palette="bloom"] .backdrop { animation-name: drift-bloom; animation-duration: 32s; }
@keyframes drift-bloom {
  0%, 100% { --gx1: 30%; --gy1: 28%; --gx2: 70%; --gy2: 68%; --gx3: 52%; --gy3: 95%; --gx4: 12%; --gy4: 20%; }
  50%       { --gx1: 42%; --gy1: 42%; --gx2: 58%; --gy2: 55%; --gx3: 65%; --gy3: 82%; --gx4: 25%; --gy4: 35%; }
}

/* ── Dusk (warm red) — dramatic, weighted ── */
[data-palette="dusk"] {
  --accent: #e8584b;
  --accent-bright: #f06b5e;
  --accent-dim: #8c2e25;
  --accent-glow: rgba(232, 88, 75, 0.16);
  --bg: #1e1010;
  --grad-1: #6a3a3a;
  --grad-2: #9a4e4e;
  --grad-3: #4e2a34;
  --grad-4: #252e3a;
  --gx1: 12%; --gy1: 58%;
  --gx2: 85%; --gy2: 28%;
  --gx3: 72%; --gy3: 92%;
  --gx4: 8%;  --gy4: 25%;
  --texture: repeating-linear-gradient(30deg, transparent 0, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px);
  --texture-size: auto;
}
[data-theme="light"][data-palette="dusk"] {
  --bg: #f2f2f2;
  --accent: #c83a2c;
  --accent-bright: #d44637;
  --accent-dim: #d99589;
  --accent-glow: rgba(200, 58, 44, 0.10);
  --grad-1: #f0d4cf;
  --grad-2: #f5e0d8;
  --grad-3: #f8e8e3;
  --grad-4: #f0d0e8;
  --texture: repeating-linear-gradient(30deg, transparent 0, transparent 28px, rgba(0,0,0,0.05) 28px, rgba(0,0,0,0.05) 29px);
}
[data-palette="dusk"] .backdrop { animation-name: drift-dusk; animation-duration: 25s; }
@keyframes drift-dusk {
  0%, 100% { --gx1: 12%; --gy1: 58%; --gx2: 85%; --gy2: 28%; --gx3: 72%; --gy3: 92%; --gx4: 8%;  --gy4: 25%; }
  50%       { --gx1: 25%; --gy1: 45%; --gx2: 72%; --gy2: 42%; --gx3: 58%; --gy3: 80%; --gx4: 20%; --gy4: 40%; }
}

/* ── Earth (warm brown) — warm, low-weighted ── */
[data-palette="earth"] {
  --accent: #c8845a;
  --accent-bright: #d99466;
  --accent-dim: #7a4d2e;
  --accent-glow: rgba(200, 132, 90, 0.16);
  --bg: #1c1208;
  --grad-1: #5a4437;
  --grad-2: #7c5a46;
  --grad-3: #3f342a;
  --grad-4: #2a3830;
  --gx1: 22%; --gy1: 52%;
  --gx2: 78%; --gy2: 30%;
  --gx3: 58%; --gy3: 92%;
  --gx4: 14%; --gy4: 78%;
  --texture: repeating-linear-gradient(30deg,
    rgba(255,255,255,0.018) 0,    rgba(255,255,255,0.018) 1px,
    transparent 1px,              transparent 22px,
    rgba(255,255,255,0.028) 23px, rgba(255,255,255,0.028) 24px,
    transparent 24px,             transparent 80px
  );
  --texture-size: auto;
}
[data-theme="light"][data-palette="earth"] {
  --bg: #f2f2f2;
  --accent: #9c5e34;
  --accent-bright: #ad6c3d;
  --accent-dim: #c9a288;
  --accent-glow: rgba(156, 94, 52, 0.10);
  --grad-1: #ead7c2;
  --grad-2: #f0e0cc;
  --grad-3: #f5e8d8;
  --grad-4: #d8e8d0;
  --texture: repeating-linear-gradient(30deg,
    rgba(0,0,0,0.025) 0,   rgba(0,0,0,0.025) 1px,
    transparent 1px,       transparent 22px,
    rgba(0,0,0,0.035) 23px, rgba(0,0,0,0.035) 24px,
    transparent 24px,      transparent 80px
  );
}
[data-palette="earth"] .backdrop { animation-name: drift-earth; animation-duration: 36s; }
@keyframes drift-earth {
  0%, 100% { --gx1: 22%; --gy1: 52%; --gx2: 78%; --gy2: 30%; --gx3: 58%; --gy3: 92%; --gx4: 14%; --gy4: 78%; }
  50%       { --gx1: 35%; --gy1: 38%; --gx2: 65%; --gy2: 45%; --gx3: 45%; --gy3: 80%; --gx4: 26%; --gy4: 65%; }
}

/* ── Stone (monochrome) — minimal, slow ── */
[data-palette="stone"] {
  --accent: #d8d8d8;
  --accent-bright: #ffffff;
  --accent-dim: #555555;
  --accent-glow: rgba(255, 255, 255, 0.06);
  --bg: #1e1e1e;
  --grad-1: #383838;
  --grad-2: #464646;
  --grad-3: #2e2e2e;
  --grad-4: #292d3c;
  --gx1: 25%; --gy1: 22%;
  --gx2: 75%; --gy2: 75%;
  --gx3: 48%; --gy3: 98%;
  --gx4: 88%; --gy4: 32%;
  --texture: repeating-linear-gradient(90deg, transparent 0, transparent 30px, rgba(255,255,255,0.02) 30px, rgba(255,255,255,0.02) 31px),
             repeating-linear-gradient(0deg,  transparent 0, transparent 30px, rgba(255,255,255,0.02) 30px, rgba(255,255,255,0.02) 31px);
  --texture-size: 31px 31px;
}
[data-theme="light"][data-palette="stone"] {
  --bg: #f2f2f2;
  --accent: #1a1a1a;
  --accent-bright: #000000;
  --accent-dim: #909090;
  --accent-glow: rgba(0, 0, 0, 0.05);
  --grad-1: #e8e8e8;
  --grad-2: #f0f0f0;
  --grad-3: #f7f7f7;
  --grad-4: #e6e6e6;
  --texture: repeating-linear-gradient(90deg, transparent 0, transparent 30px, rgba(0,0,0,0.03) 30px, rgba(0,0,0,0.03) 31px),
             repeating-linear-gradient(0deg,  transparent 0, transparent 30px, rgba(0,0,0,0.03) 30px, rgba(0,0,0,0.03) 31px);
}
[data-palette="stone"] .backdrop { animation-name: drift-stone; animation-duration: 40s; }
@keyframes drift-stone {
  0%, 100% { --gx1: 25%; --gy1: 22%; --gx2: 75%; --gy2: 75%; --gx3: 48%; --gy3: 98%; --gx4: 88%; --gy4: 32%; }
  50%       { --gx1: 35%; --gy1: 35%; --gx2: 65%; --gy2: 62%; --gx3: 58%; --gy3: 88%; --gx4: 76%; --gy4: 48%; }
}