/* ═══════════════════════════════════════════════════════════════════
   NORDLYS - 21 BUILT-IN THEMES (11 DARK + 10 LIGHT)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   🌙 10 DARK THEMES
   ─────────────────────────────────────────────────────────────────── */

/* ── 1. Aurora Void (Cosmic Deep Navy & Radiant Cyan) ─────────── */
:root, :root[data-theme="aurora-void"], html[data-theme="aurora-void"] {
  --theme-name: "Aurora Void";
  --void: #060a14;
  --void-gradient: radial-gradient(130% 100% at 50% -10%, #0d152a 0%, #080d1a 45%, #050811 100%);
  --glass: rgba(11, 18, 34, 0.52);
  --glass-border: rgba(53, 214, 192, 0.22);
  --frost: rgba(53, 214, 192, 0.25);
  --ink: #e9effb;
  --dim: #8ca0c4;
  --faint: #6f89b5;
  --accent: #35d6c0;
  --accent-glow: rgba(53, 214, 192, 0.45);
  --card-tint: #0f1c32;
  --card-tint-deep: #070d18;
  --shader-1: #35d6c0;
  --shader-2: #5b6cff;
  --shader-3: #9d4edd;
}

/* ── 2. Cyberpunk Neon (Electric Magenta & High-Tech Cyan) ────── */
:root[data-theme="cyberpunk-neon"], html[data-theme="cyberpunk-neon"] {
  --theme-name: "Cyberpunk Neon";
  --void: #08060e;
  --void-gradient:
    radial-gradient(90% 60% at 18% 100%, rgba(255, 0, 127, 0.20) 0%, transparent 60%),
    radial-gradient(70% 50% at 92% 78%, rgba(0, 243, 255, 0.10) 0%, transparent 55%),
    radial-gradient(120% 100% at 75% 15%, #24103a 0%, #0c0618 55%, #050110 100%);
  --glass: rgba(20, 12, 34, 0.62);
  --glass-border: rgba(255, 0, 128, 0.35);
  --frost: rgba(0, 243, 255, 0.28);
  --ink: #ffffff;
  --dim: #00f3ff;
  --faint: #d946ef;
  --accent: #ff007f;
  /* Neon pink fills beautifully and reads at 4.1 to one as a word on the
     menus; the ink is the same pink, lifted. */
  --accent-ink: #fe4d8d;
  --accent-glow: rgba(255, 0, 127, 0.55);
  --card-tint: #180a2a;
  --card-tint-deep: #0a0414;
  --shader-1: #ff007f;
  --shader-2: #00f3ff;
  --shader-3: #9d4edd;
}
/* ── 3. Tokyo Night (Midnight Indigo & Neon Blue-Violet) ──────── */
:root[data-theme="tokyo-night"], html[data-theme="tokyo-night"] {
  --theme-name: "Tokyo Night";
  --void: #13141f;
  --void-gradient:
    radial-gradient(80% 55% at 82% 100%, rgba(122, 162, 247, 0.16) 0%, transparent 60%),
    radial-gradient(60% 40% at 8% 12%, rgba(187, 154, 247, 0.10) 0%, transparent 55%),
    radial-gradient(130% 100% at 50% 0%, #1e2030 0%, #14151f 60%, #0b0c12 100%);
  --glass: rgba(26, 27, 38, 0.65);
  --glass-border: rgba(122, 162, 247, 0.28);
  --frost: rgba(187, 154, 247, 0.24);
  --ink: #c0caf5;
  --dim: #7aa2f7;
  --faint: #838dba;
  --accent: #7aa2f7;
  --accent-glow: rgba(122, 162, 247, 0.45);
  --card-tint: #1f2335;
  --card-tint-deep: #13141f;
  --shader-1: #7aa2f7;
  --shader-2: #bb9af7;
  --shader-3: #2ac3de;
}
/* ── 4. Catppuccin Mocha (Cozy Pastel Slate & Dreamy Lavender) ── */
:root[data-theme="catppuccin-mocha"], html[data-theme="catppuccin-mocha"] {
  --theme-name: "Catppuccin Mocha";
  --void: #11111b;
  --void-gradient:
    radial-gradient(70% 50% at 14% 92%, rgba(250, 179, 135, 0.10) 0%, transparent 60%),
    radial-gradient(60% 45% at 88% 8%, rgba(203, 166, 247, 0.10) 0%, transparent 55%),
    radial-gradient(130% 100% at 50% 10%, #232338 0%, #1a1a28 55%, #101018 100%);
  --glass: rgba(30, 30, 46, 0.68);
  --glass-border: rgba(203, 166, 247, 0.25);
  --frost: rgba(250, 179, 135, 0.20);
  --ink: #cdd6f4;
  --dim: #a6adc8;
  --faint: #8c90a7;
  --accent: #cba6f7;
  --accent-glow: rgba(203, 166, 247, 0.42);
  --card-tint: #242438;
  --card-tint-deep: #181825;
  --shader-1: #cba6f7;
  --shader-2: #fab387;
  --shader-3: #89b4fa;
}

/* ── 5. OLED Obsidian (Pure Pitch Black 0x000000 & Titanium) ──── */
:root[data-theme="oled-obsidian"], html[data-theme="oled-obsidian"] {
  --theme-name: "OLED Obsidian";
  --void: #000000;
  --void-gradient: #000000;
  --glass: rgba(14, 14, 16, 0.88);
  --glass-border: rgba(255, 255, 255, 0.14);
  --frost: rgba(255, 255, 255, 0.16);
  --ink: #ffffff;
  --dim: #b5b5b5;
  --faint: #7f7f7f;
  --accent: #f1f5f9;
  --accent-glow: rgba(255, 255, 255, 0.28);
  --card-tint: #0e0e10;
  --card-tint-deep: #050506;
  --shader-1: #52525b;
  --shader-2: #71717a;
  --shader-3: #3f3f46;
}
html[data-theme="oled-obsidian"] #veil {
  opacity: 0.15;
}

/* ── 6. Nord Frost (Scandinavian Polar Slate & Glacier Blue) ──── */
:root[data-theme="nord-frost"], html[data-theme="nord-frost"] {
  --theme-name: "Nord Frost";
  --void: #242933;
  --void-gradient:
    radial-gradient(90% 50% at 50% -5%, rgba(136, 192, 208, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #2e3440 0%, #272c37 55%, #1e222a 100%);
  --glass: rgba(46, 52, 64, 0.65);
  --glass-border: rgba(136, 192, 208, 0.28);
  --frost: rgba(136, 192, 208, 0.22);
  --ink: #eceff4;
  --dim: #d8dee9;
  --faint: #88c0d0;
  --accent: #88c0d0;
  --accent-glow: rgba(136, 192, 208, 0.4);
  --card-tint: #2e3440;
  --card-tint-deep: #232831;
  --shader-1: #88c0d0;
  --shader-2: #5e81ac;
  --shader-3: #a3be8c;
}

/* ── 7. Gruvbox Dark (Retro Warm Earth Charcoal & Amber Gold) ── */
:root[data-theme="gruvbox-dark"], html[data-theme="gruvbox-dark"] {
  --theme-name: "Gruvbox Dark";
  --void: #1d2021;
  --void-gradient:
    radial-gradient(80% 55% at 50% 102%, rgba(214, 93, 14, 0.16) 0%, transparent 55%),
    radial-gradient(60% 40% at 85% 5%, rgba(250, 189, 47, 0.08) 0%, transparent 50%),
    radial-gradient(130% 100% at 50% 10%, #2c2c2c 0%, #1e2122 65%, #131515 100%);
  --glass: rgba(40, 40, 40, 0.72);
  --glass-border: rgba(250, 189, 47, 0.26);
  --frost: rgba(254, 128, 25, 0.22);
  --ink: #ebdbb2;
  --dim: #d5c4a1;
  --faint: #aa9a8b;
  --accent: #fabd2f;
  --accent-glow: rgba(250, 189, 47, 0.42);
  --card-tint: #32302f;
  --card-tint-deep: #1d2021;
  --shader-1: #fabd2f;
  --shader-2: #fe8019;
  --shader-3: #b8bb26;
}
/* ── 8. Boreal Emerald (Mystic Pine Forest & Mint Aurora) ─────── */
:root[data-theme="boreal-emerald"], html[data-theme="boreal-emerald"] {
  --theme-name: "Boreal Emerald";
  --void: #040f09;
  --void-gradient:
    radial-gradient(90% 60% at 50% 102%, rgba(16, 185, 129, 0.16) 0%, transparent 60%),
    radial-gradient(130% 100% at 50% -10%, #0b2a1a 0%, #071a10 45%, #03110a 100%);
  --glass: rgba(6, 22, 14, 0.58);
  --glass-border: rgba(52, 211, 153, 0.24);
  --frost: rgba(52, 211, 153, 0.18);
  --ink: #ecfdf5;
  --dim: #a7f3d0;
  --faint: #34d399;
  --accent: #10b981;
  --accent-glow: rgba(16, 185, 129, 0.45);
  --card-tint: #0a2014;
  --card-tint-deep: #040e08;
  --shader-1: #10b981;
  --shader-2: #34d399;
  --shader-3: #2dd4bf;
}
/* ── 9. Sunset Amber (Volcanic Molten Ember & Solar Flare) ────── */
:root[data-theme="sunset-amber"], html[data-theme="sunset-amber"] {
  --theme-name: "Sunset Amber";
  --void: #120704;
  --void-gradient:
    radial-gradient(100% 55% at 50% 106%, rgba(249, 115, 22, 0.30) 0%, rgba(190, 50, 20, 0.12) 40%, transparent 65%),
    radial-gradient(120% 100% at 50% 10%, #331109 0%, #170805 70%);
  --glass: rgba(38, 18, 12, 0.60);
  --glass-border: rgba(251, 146, 60, 0.35);
  --frost: rgba(251, 146, 60, 0.25);
  --ink: #fff7ed;
  --dim: #fed7aa;
  --faint: #fb923c;
  --accent: #f97316;
  --accent-glow: rgba(249, 115, 22, 0.5);
  --card-tint: #26120c;
  --card-tint-deep: #140904;
  --shader-1: #f97316;
  --shader-2: #ef4444;
  --shader-3: #facc15;
}
/* ── 10. Dracula Velvet (Gothic Vampire Violet & Neon Pink) ───── */
:root[data-theme="dracula-velvet"], html[data-theme="dracula-velvet"] {
  --theme-name: "Dracula Velvet";
  --void: #191724;
  --void-gradient:
    radial-gradient(80% 55% at 85% 8%, rgba(189, 147, 249, 0.14) 0%, transparent 55%),
    radial-gradient(60% 40% at 10% 95%, rgba(255, 121, 198, 0.10) 0%, transparent 55%),
    radial-gradient(130% 100% at 50% -10%, #2b2d3d 0%, #1f2029 50%, #15161d 100%);
  --glass: rgba(33, 34, 44, 0.65);
  --glass-border: rgba(189, 147, 249, 0.30);
  --frost: rgba(255, 121, 198, 0.22);
  --ink: #f8f8f2;
  /* A step lighter than the accent it was: secondary text on a raised
     surface — a panel, a menu — read at 4.1:1, under the 4.5 floor. */
  --dim: #caa6fa;
  --faint: #8395c9;
  --accent: #bd93f9;
  --accent-glow: rgba(189, 147, 249, 0.45);
  --card-tint: #282a36;
  --card-tint-deep: #191a21;
  --shader-1: #bd93f9;
  --shader-2: #ff79c6;
  --shader-3: #8be9fd;
}
/* ───────────────────────────────────────────────────────────────────
   ☀️ 10 LIGHT THEMES
   ─────────────────────────────────────────────────────────────────── */

/* ── 11. Porcelain Pure (Airy Daylight White & Sky Blue) ──────── */
:root[data-theme="porcelain-light"], html[data-theme="porcelain-light"] {
  --nl-shadow-ink: #1c2a52;
  --nl-shadow-strength: .42;
  --theme-name: "Porcelain Pure";
  --void: #f8fafc;
  --void-gradient:
    radial-gradient(90% 60% at 50% -10%, #ffffff 0%, transparent 55%),
    linear-gradient(180deg, #f6f9ff 0%, #e9f0fb 60%, #dce7f6 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(59, 130, 246, 0.15);
  --frost: rgba(59, 130, 246, 0.12);
  --ink: #0f172a;
  --dim: #334155;
  --faint: #5d6d83;
  --accent: #3b82f6;
  --accent-ink: #1f66d8;
  --accent-glow: rgba(59, 130, 246, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #f1f5f9;
  --shader-1: #3b82f6;
  --shader-2: #93c5fd;
  --shader-3: #a5b4fc;
}

/* ── 12. Warm Ivory (Cashmere Linen & Caramel Gold) ───────────── */
:root[data-theme="warm-ivory"], html[data-theme="warm-ivory"] {
  --nl-shadow-ink: #281d14;
  --nl-shadow-strength: .40;
  --theme-name: "Warm Ivory";
  --void: #faf7f2;
  --void-gradient:
    radial-gradient(85% 55% at 50% 104%, rgba(217, 119, 6, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e7 60%, #eee2ca 100%);
  --glass: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(217, 119, 6, 0.16);
  --frost: rgba(217, 119, 6, 0.12);
  --ink: #2b221a;
  --dim: #574436;
  --faint: #7b6452;
  --accent: #d97706;
  --accent-ink: #9e5505;
  --accent-glow: rgba(217, 119, 6, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #f5eedf;
  --shader-1: #d97706;
  --shader-2: #f59e0b;
  --shader-3: #fbbf24;
}

/* ── 13. Sage Garden (Japanese Matcha & Botanical Green) ──────── */
:root[data-theme="sage-light"], html[data-theme="sage-light"] {
  --nl-shadow-ink: #14291c;
  --nl-shadow-strength: .40;
  --theme-name: "Sage Garden";
  --void: #f2f7f4;
  --void-gradient:
    radial-gradient(85% 55% at 12% 100%, rgba(22, 163, 74, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #eef6f0 55%, #dcecdf 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(22, 163, 74, 0.15);
  --frost: rgba(22, 163, 74, 0.12);
  --ink: #14291c;
  --dim: #2d523b;
  --faint: #456f55;
  --accent: #16a34a;
  --accent-ink: #087733;
  --accent-glow: rgba(22, 163, 74, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #e3efe7;
  --shader-1: #16a34a;
  --shader-2: #4ade80;
  --shader-3: #86efac;
}

/* ── 14. Sakura Blossom (Pastel Cherry Blossom & Rose Plum) ───── */
:root[data-theme="sakura-daylight"], html[data-theme="sakura-daylight"] {
  --nl-shadow-ink: #4a1c33;
  --nl-shadow-strength: .40;
  --theme-name: "Sakura Blossom";
  --void: #fdf2f8;
  --void-gradient:
    radial-gradient(85% 55% at 82% -5%, rgba(236, 72, 153, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #fffafd 0%, #fcecf5 55%, #f8dcEB 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(236, 72, 153, 0.18);
  --frost: rgba(236, 72, 153, 0.14);
  --ink: #4a044e;
  --dim: #831843;
  --faint: #9d174d;
  --accent: #ec4899;
  --accent-ink: #c31677;
  --accent-glow: rgba(236, 72, 153, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #fce7f3;
  --shader-1: #ec4899;
  --shader-2: #f9a8d4;
  --shader-3: #f472b6;
}

/* ── 15. Solarized Light (Warm Sepia Parchment & Cyan Coast) ──── */
:root[data-theme="solarized-light"], html[data-theme="solarized-light"] {
  --nl-shadow-ink: #3a2f14;
  --nl-shadow-strength: .40;
  --theme-name: "Solarized Light";
  --void: #fdf6e3;
  --void-gradient:
    radial-gradient(80% 50% at 50% -8%, rgba(42, 161, 152, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #fefaf0 0%, #fdf6e3 55%, #efe7c8 100%);
  --glass: rgba(253, 246, 227, 0.78);
  --glass-border: rgba(42, 161, 152, 0.20);
  --frost: rgba(42, 161, 152, 0.15);
  --ink: #073642;
  --dim: #445960;
  --faint: #52676f;
  --accent: #2aa198;
  --accent-ink: #037069;
  --accent-glow: rgba(42, 161, 152, 0.28);
  --card-tint: #fffdf5;
  --card-tint-deep: #eee8d5;
  --shader-1: #2aa198;
  --shader-2: #b58900;
  --shader-3: #268bd2;
}

/* ── 16. Nordic Snow (Frosted Polar Ice & Royal Cobalt) ───────── */
:root[data-theme="nordic-snow"], html[data-theme="nordic-snow"] {
  --nl-shadow-ink: #1c2a52;
  --nl-shadow-strength: .42;
  --theme-name: "Nordic Snow";
  --void: #f0f4f8;
  --void-gradient:
    radial-gradient(90% 60% at 50% -10%, #ffffff 0%, transparent 50%),
    linear-gradient(180deg, #f4f8fc 0%, #e4edf7 60%, #d2e2f1 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(2, 132, 199, 0.16);
  --frost: rgba(2, 132, 199, 0.12);
  --ink: #0f172a;
  --dim: #334155;
  --faint: #475569;
  --accent: #0284c7;
  --accent-ink: #09699f;
  --accent-glow: rgba(2, 132, 199, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #e2e8f0;
  --shader-1: #0284c7;
  --shader-2: #38bdf8;
  --shader-3: #818cf8;
}

/* ── 17. Lavender Mist (Dreamy Pastel Lilac & Royal Amethyst) ─── */
:root[data-theme="lavender-mist"], html[data-theme="lavender-mist"] {
  --nl-shadow-ink: #241c52;
  --nl-shadow-strength: .42;
  --theme-name: "Lavender Mist";
  --void: #f5f3ff;
  --void-gradient:
    radial-gradient(85% 55% at 18% -5%, rgba(139, 92, 246, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #fbfaff 0%, #f1edfd 55%, #e2d9fa 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(139, 92, 246, 0.18);
  --frost: rgba(139, 92, 246, 0.14);
  --ink: #2e1065;
  --dim: #5b21b6;
  --faint: #7b39ec;
  --accent: #8b5cf6;
  --accent-ink: #7744de;
  --accent-glow: rgba(139, 92, 246, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #ede9fe;
  --shader-1: #8b5cf6;
  --shader-2: #a78bfa;
  --shader-3: #c4b5fd;
}

/* ── 18. Gruvbox Light (Vintage Book Sepia & Cinnamon Amber) ──── */
:root[data-theme="gruvbox-light"], html[data-theme="gruvbox-light"] {
  --nl-shadow-ink: #3c3020;
  --nl-shadow-strength: .40;
  --theme-name: "Gruvbox Light";
  --void: #fbf1c7;
  --void-gradient:
    radial-gradient(80% 55% at 50% 104%, rgba(214, 93, 14, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #fdf6d8 0%, #fbf1c7 50%, #e9d9ab 100%);
  --glass: rgba(251, 241, 199, 0.78);
  --glass-border: rgba(214, 93, 14, 0.22);
  --frost: rgba(214, 93, 14, 0.15);
  --ink: #282828;
  --dim: #3c3836;
  --faint: #675a50;
  --accent: #d65d0e;
  --accent-ink: #9c4000;
  --accent-glow: rgba(214, 93, 14, 0.28);
  --card-tint: #fffbe6;
  --card-tint-deep: #ebdbb2;
  --shader-1: #d65d0e;
  --shader-2: #b57614;
  --shader-3: #98971a;
}

/* ── 19. Peach Sunset (Golden Apricot Dawn & Coral Glow) ──────── */
:root[data-theme="peach-sunset"], html[data-theme="peach-sunset"] {
  --nl-shadow-ink: #4a2a14;
  --nl-shadow-strength: .40;
  --theme-name: "Peach Sunset";
  --void: #fff7ed;
  --void-gradient:
    radial-gradient(90% 60% at 50% 106%, rgba(244, 63, 94, 0.12) 0%, rgba(251, 146, 60, 0.10) 35%, transparent 65%),
    linear-gradient(180deg, #fffcf7 0%, #fff1e2 55%, #ffe2cc 100%);
  --glass: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(244, 63, 94, 0.18);
  --frost: rgba(244, 63, 94, 0.12);
  --ink: #4c0519;
  --dim: #881337;
  --faint: #9f1239;
  --accent: #f43f5e;
  --accent-ink: #d00a42;
  --accent-glow: rgba(244, 63, 94, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #ffedd5;
  --shader-1: #f43f5e;
  --shader-2: #fb923c;
  --shader-3: #fda4af;
}

/* ── 20. Mint Breeze (Refreshing Aqua Marine & Oceanic Teal) ──── */
:root[data-theme="mint-breeze"], html[data-theme="mint-breeze"] {
  --nl-shadow-ink: #0f3020;
  --nl-shadow-strength: .40;
  --theme-name: "Mint Breeze";
  --void: #f0fdf4;
  --void-gradient:
    radial-gradient(85% 55% at 88% 100%, rgba(13, 148, 136, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #f7fdf9 0%, #e8f9f2 55%, #cdf2e5 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(13, 148, 136, 0.18);
  --frost: rgba(13, 148, 136, 0.12);
  --ink: #042f2e;
  --dim: #134e4a;
  --faint: #296f6a;
  --accent: #0d9488;
  --accent-ink: #06776d;
  --accent-glow: rgba(13, 148, 136, 0.28);
  --card-tint: #ffffff;
  --card-tint-deep: #ccfbf1;
  --shader-1: #0d9488;
  --shader-2: #2dd4bf;
  --shader-3: #34d399;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT-MODE SURFACE & UI CONTRAST CORRECTIONS
   Shared across .light-ui, Porcelain, Sage Garden, and Warm Ivory
   ═══════════════════════════════════════════════════════════════════ */

/* Status colours are text as often as they are tint — "Remove", "Delete", the
   mood editor's error line — and the dark-theme values are pale: rose, amber
   and mint that read at 2.6, 1.7 and 1.9 to one on a light panel. Light themes
   take the deep end of the same three hues, each clearing 4.5:1 on the darkest
   light surface there is, Gruvbox Light's deep card. */
.light-ui {
  --nl-status-success: #065f46;
  --nl-status-danger: #9a050d;
  --nl-status-warning: #92400e;
}

.light-ui #veil {
  background: radial-gradient(120% 92% at 50% 4%, transparent 55%, rgba(0, 0, 0, 0.05) 100%);
}

/* Dark text over a photo needs the photo lighter, not darker: in a light theme
   the dimmer washes the wallpaper towards the page instead of towards night. */
.light-ui #bg-dimmer {
  background: var(--nl-canvas);
}

.light-ui #veil::after {
  opacity: 0.02;
}

.light-ui #dim {
  background: rgba(0, 0, 0, 0.22);
}

/* The clipped-gradient clock and its coloured halo were removed from the shared
   rules but survived here, so ten of the twenty-one themes kept exactly what
   was said to be gone. Three .card selectors were caught in the same list and
   were being given background-clip: text and transparent ink, which is not
   something a card can want. */

/* No weights in here. Light themes used to set their own on the date, the
   greeting, folder titles and tile names; a heavier face is a wider one, so
   switching to a light theme reflowed the board, and in Auto mode it did so
   on its own at dusk. The shared rules already take the right tier. */

.light-ui #clock .ampm {
  color: var(--nl-accent-text);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.8));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: var(--nl-shadow-1);
}



.light-ui #search {
  /* As solid as a wallpaper behind it needs (--search-solid), never less. */
  background: rgb(255 255 255 / max(0.82, var(--search-solid, 0)));
  border-color: var(--glass-border);
}

.light-ui #search:focus-within,
.light-ui body.searching #search {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
  box-shadow: var(--nl-shadow-2);
}

.light-ui #q {
  color: var(--ink);
}

.light-ui #q::placeholder {
  color: var(--nl-text-tertiary);
  opacity: 1;
}

.light-ui #search kbd {
  color: var(--dim);
  border-color: rgba(0, 0, 0, 0.14);
  background: color-mix(in srgb, #000 4%, var(--nl-surface-card));
}

.light-ui #sugg {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: var(--nl-shadow-3);
}

.light-ui #sugg div {
  color: var(--ink);
}

.light-ui #sugg div.sel,
.light-ui #sugg div:hover {
  background: var(--frost);
  color: var(--ink);
}

.light-ui #sugg svg {
  fill: var(--dim);
}

.light-ui #sugg .sugg-calc .calc-val {
  color: var(--nl-accent-text);
  text-shadow: none;
}

.light-ui #sugg .bm-name {
  color: var(--ink);
}

.light-ui #sugg .bm-url,
.light-ui #sugg .sugg-bookmark small {
  color: var(--dim);
}

.light-ui #sugg .hist-text {
  color: var(--ink);
}

.light-ui #sugg .sugg-history svg {
  stroke: var(--dim);
}

.light-ui #sugg .sugg-folder-badge {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--dim);
}

.light-ui #sugg .sugg-calc-badge {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--nl-accent-text);
}

.light-ui #sugg .sugg-del-btn {
  color: var(--dim);
}

.light-ui #sugg .sugg-del-btn:hover {
  background: rgba(239, 68, 68, 0.12);
}

.light-ui .grid[data-cols="1"] .tile {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.light-ui .grid[data-cols="1"] .tile:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

.light-ui .cat:hover {
  background: rgba(0, 0, 0, 0.03);
}


.light-ui .cat:hover b {
  color: var(--ink);
}

.light-ui .cat i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--dim) 25%, transparent), transparent);
}

.light-ui .groupGrip,
.light-ui .foldBtn {
  color: var(--dim);
}

.light-ui .groupGrip:hover,
.light-ui .foldBtn:hover,
.light-ui .cat:hover .groupGrip {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.06);
}

.light-ui .box {
  border-color: var(--glass-border);
  background:
    radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--c, var(--dim)) 14%, transparent), transparent 62%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58));
  box-shadow: var(--nl-shadow-2);
}

.light-ui .tile:hover .box,
.light-ui .tile:focus-visible .box {
  border-color: color-mix(in srgb, var(--c, var(--accent)) 60%, rgba(0, 0, 0, 0.12));
  background:
    radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--c, var(--accent)) 24%, transparent), transparent 66%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78));
  box-shadow: var(--nl-shadow-2);
}

.light-ui .box svg,
.light-ui .box img,
.light-ui .box .mono {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}


.light-ui .tile:hover .lbl {
  color: var(--ink);
}

.light-ui .card-resize-handle::after {
  border-color: var(--dim);
}

.light-ui .resize-indicator-pill,
.light-ui .card-resize-pill {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: var(--nl-shadow-2);
}

/* The folded folders' chips, in the gear's own light glass. */
.light-ui .restoreFolder {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.12);
}

.light-ui #hiddenDock .restoreFolder:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
  color: var(--ink);
}

.light-ui #gear {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: var(--nl-shadow-2);
}

.light-ui #gear svg {
  fill: var(--dim);
}

.light-ui #gear:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
}

.light-ui #gear:hover svg {
  fill: var(--ink);
}

/* Only once it has unfolded: at rest the switch is a star, with no glass. */
.light-ui .fit-toggle:is(:hover, :focus-visible, .is-open) {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.12);
}

.light-ui .fit-toggle:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
}

.light-ui .fit-toggle[aria-checked="true"] .fit-toggle-track::after {
  background: #ffffff;
}

/* ── Light-Mode Drawer, Modals & Menus Tuning ─────────────────── */
/* The drawer's ground comes from polish.css, opaque and theme-tinted, as it is
   in every dark theme. This rule used to repaint it 94% white, and six percent
   of a busy board is enough to read the tile names through the settings. */
.light-ui #cfg {
  border-left: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: var(--nl-shadow-3);
}

.light-ui #cfg-resizer::after {
  background: rgba(0, 0, 0, 0.18);
}

.light-ui .chead {
  background: rgba(248, 250, 253, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.light-ui #cfgx {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: var(--dim);
}

.light-ui #cfgx:hover {
  color: #ffffff;
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 1);
}

.light-ui .ctabs {
  background: rgba(240, 243, 249, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.light-ui .ctab {
  color: #475569;
}

.light-ui .ctab:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

.light-ui .ctab.active {
  background: var(--accent);
  color: #071018;
  box-shadow: var(--nl-shadow-1);
}

.light-ui .cbody::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
}

.light-ui .csec h3 {
  color: #1e293b;
}

.light-ui .csec h3::after {
  background: rgba(0, 0, 0, 0.08);
}

.light-ui .ipt {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f172a;
}

.light-ui .ipt:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: var(--nl-ring);
}

.light-ui input[type="range"].ipt {
  background: rgba(0, 0, 0, 0.12);
}

.light-ui .glass-context-menu {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--nl-shadow-3);
}

.light-ui .ctx-header {
  color: var(--nl-accent-text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.light-ui .ctx-item {
  color: #0f172a;
}

.light-ui .ctx-item svg {
  color: var(--dim);
}

.light-ui .ctx-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: #0f172a;
}

.light-ui .ctx-item:hover svg {
  color: var(--accent);
}

.light-ui .ctx-divider {
  background: rgba(0, 0, 0, 0.08);
}

.light-ui .quick-modal-backdrop,
.light-ui .confirm-backdrop,
.light-ui #icon-modal,
.light-ui #css-docs-modal {
  background: rgba(15, 25, 45, 0.35);
}

.light-ui .quick-modal-card,
.light-ui .confirm-card,
.light-ui .modal-box,
.light-ui .css-docs-box {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--nl-shadow-3);
}

.light-ui .quick-modal-head,
.light-ui .modal-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.light-ui .quick-icon-box {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.light-ui .quick-icon-box:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

.light-ui .toast {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--nl-shadow-2);
  color: #0f172a;
}

.light-ui .glass-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

.light-ui .glass-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: #0f172a;
}

.light-ui .glass-btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--nl-on-accent);
}

.light-ui .theme-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: var(--nl-shadow-1);
  color: #0f172a;
}

.light-ui .theme-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: #ffffff;
  box-shadow: var(--nl-shadow-1);
}

.light-ui .theme-card.active {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: var(--nl-ring-tight), var(--nl-shadow-1);
}

.light-ui .theme-card b {
  color: #0f172a;
}

.light-ui .custom-theme-tuning-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
}

.light-ui .color-picker-wrap {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
}

.light-ui .hex-text {
  color: #0f172a;
}

.light-ui .bm-group-card,
.light-ui .group-editor-card {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-ui .bm-item-row,
.light-ui .link-editor-row {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--nl-shadow-1);
}

.light-ui .group-label-input,
.light-ui .link-name-ipt,
.light-ui .link-url-ipt,
.light-ui .cols-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

.light-ui .move-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--dim);
}

.light-ui .move-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

.light-ui .folder-transfer-select {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

.light-ui #css-editor {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f172a;
}

.light-ui .icon-modal-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.light-ui .icon-tab-btn {
  color: #475569;
}

.light-ui .icon-tab-btn:hover {
  color: #0f172a;
}

/* The tint and the underline say which tab is chosen; the words stay ink.
   Accent words on the accent tint fell under 4.5:1 in three light themes. */
.light-ui .icon-tab-btn.active {
  color: var(--nl-text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.light-ui .glass-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

.light-ui .glass-input:focus {
  background: #ffffff;
  border-color: var(--accent);
}

.light-ui .icon-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

.light-ui .icon-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

/* White on a light theme's own accent was 3.2–4.2:1. The accent made to be
   read on a light page is dark enough to carry white words as well. */
.light-ui .icon-chip.active {
  background: var(--nl-accent-text);
  color: #ffffff;
}

.light-ui .icon-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-ui .icon-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

.light-ui .icon-item svg {
  color: #0f172a;
}

.light-ui .icon-item span {
  color: #475569;
}

.light-ui .file-drop-zone {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.14);
}

.light-ui .file-drop-zone:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
}

.light-ui .cropper-preview-card,
.light-ui .cropper-slider-block {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-ui .cropper-top-bar,
.light-ui .cropper-actions-footer {
  border-color: rgba(0, 0, 0, 0.08);
}

.light-ui .crop-tool-btn,
.light-ui .crop-pill-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

/* ── Specific Fine-Tuned Light Theme Ambient Profiles ────────── */
html[data-theme="porcelain-light"] #veil {
  background: radial-gradient(120% 92% at 50% 4%, transparent 55%, rgba(28, 42, 82, 0.10) 100%);
}
html[data-theme="sage-light"] #veil {
  background: radial-gradient(120% 92% at 50% 4%, transparent 55%, rgba(20, 41, 28, 0.09) 100%);
}
html[data-theme="warm-ivory"] #veil {
  background: radial-gradient(120% 92% at 50% 4%, transparent 55%, rgba(40, 29, 20, 0.09) 100%);
}
html[data-theme="warm-ivory"] .card {
  box-shadow: var(--nl-shadow-3);
}
html[data-theme="warm-ivory"] #search {
  box-shadow: var(--nl-shadow-3);
}