/*! ═══════════════════════════════════════════════════════════════════════════
   GEMSTONE GRADIENT LIBRARY — Evident Technologies LLC
   Copyright © 2024–2026 Evident Technologies LLC. All rights reserved.
   PROPRIETARY AND CONFIDENTIAL — Source-Available Proprietary License.
   Unauthorized copying, redistribution, or derivative use is prohibited.
   See LICENSE in the repository root for full terms.
   ═══════════════════════════════════════════════════════════════════════════
   83 natural gemstones & crystals as CSS gradients, surfaces, and glows.
   Each stone is encoded as:
     --gem-{name}          linear gradient (primary)
     --gem-{name}-radial   radial gradient (glow / spotlight)
     --gem-{name}-flat     single base color (for borders, badges, chips)
     --gem-{name}-text     readable text color on that surface
   ─────────────────────────────────────────────────────────────────────────
   Design-context guide lives in GEMSTONE-DESIGN-GUIDE.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* stylelint-disable value-keyword-case */

:root {
  /* ─── FAVORITES ──────────────────────────────────────────────────────── */

  /* AMETHYST — violet-purple with silver flash */
  --gem-amethyst: linear-gradient(135deg, #6b2fa0 0%, #9b59b6 35%, #c39bd3 60%, #7d3c98 100%);
  --gem-amethyst-radial: radial-gradient(ellipse at 35% 30%, #c39bd3 0%, #9b59b6 40%, #4a235a 100%);
  --gem-amethyst-flat: #7d3c98;
  --gem-amethyst-text: #f3e9ff;

  /* MALACHITE — concentric deep-emerald + lime green bands */
  --gem-malachite: linear-gradient(135deg, #004d2f 0%, #1b7a4a 25%, #3aaf6f 50%, #1b7a4a 75%, #004d2f 100%);
  --gem-malachite-radial: radial-gradient(ellipse at 40% 40%, #3aaf6f 0%, #1b7a4a 45%, #003320 100%);
  --gem-malachite-flat: #1b7a4a;
  --gem-malachite-text: #d4f7e7;

  /* LABRADORITE — midnight blue with electric teal/gold schiller */
  --gem-labradorite: linear-gradient(135deg, #1a1f2e 0%, #2d3f6e 30%, #4a90c4 50%, #2eb5b0 65%, #1a1f2e 100%);
  --gem-labradorite-radial: radial-gradient(ellipse at 45% 35%, #4a90c4 0%, #2d3f6e 40%, #0d1118 100%);
  --gem-labradorite-flat: #2d3f6e;
  --gem-labradorite-text: #c8e6f9;

  /* ─── BLUES & TEALS ──────────────────────────────────────────────────── */

  /* AQUAMARINE — pale sea blue */
  --gem-aquamarine: linear-gradient(135deg, #9dd8e0 0%, #5bbac5 40%, #2e8fa3 70%, #1a6978 100%);
  --gem-aquamarine-radial: radial-gradient(ellipse at 35% 30%, #c8edf1 0%, #5bbac5 50%, #1a5f70 100%);
  --gem-aquamarine-flat: #3d9fb5;
  --gem-aquamarine-text: #012d38;

  /* SAPPHIRE — deep royal blue */
  --gem-sapphire: linear-gradient(135deg, #0a1a6e 0%, #1f3a99 35%, #3d64cc 60%, #128 100%);
  --gem-sapphire-radial: radial-gradient(ellipse at 40% 30%, #4d78e0 0%, #1f3a99 50%, #080f4a 100%);
  --gem-sapphire-flat: #1f3a99;
  --gem-sapphire-text: #d0dcff;

  /* BLUE TOPAZ — ice-bright electric blue */
  --gem-blue-topaz: linear-gradient(135deg, #b3e5fc 0%, #29b6f6 35%, #0277bd 65%, #01579b 100%);
  --gem-blue-topaz-radial: radial-gradient(ellipse at 30% 25%, #e1f5fe 0%, #29b6f6 40%, #01579b 100%);
  --gem-blue-topaz-flat: #0288d1;
  --gem-blue-topaz-text: #002540;

  /* TANZANITE — blue-violet with depth */
  --gem-tanzanite: linear-gradient(135deg, #1a1040 0%, #3d1f8a 35%, #6a4bcf 55%, #9b7de8 75%, #3d1f8a 100%);
  --gem-tanzanite-radial: radial-gradient(ellipse at 40% 35%, #8568d8 0%, #3d1f8a 50%, #0d0820 100%);
  --gem-tanzanite-flat: #4a2db5;
  --gem-tanzanite-text: #e8e0ff;

  /* BLUE KYANITE — striated cornflower to ice */
  --gem-blue-kyanite: linear-gradient(115deg, #89afd4 0%, #4878b0 30%, #6fa3d3 55%, #b8d4ed 80%, #4878b0 100%);
  --gem-blue-kyanite-radial: radial-gradient(ellipse at 40% 35%, #c2ddf0 0%, #4878b0 55%, #1b3f66 100%);
  --gem-blue-kyanite-flat: #4d82bc;
  --gem-blue-kyanite-text: #0d1f33;

  /* LARIMAR — caribbean sky-sea blue */
  --gem-larimar: linear-gradient(135deg, #e0f4f8 0%, #7ec8d8 30%, #3aaec4 55%, #2180a0 80%, #1a6070 100%);
  --gem-larimar-radial: radial-gradient(ellipse at 30% 25%, #f0fafc 0%, #7ec8d8 45%, #1a6070 100%);
  --gem-larimar-flat: #3aaec4;
  --gem-larimar-text: #08303c;

  /* APATITE — electric ocean teal-green */
  --gem-apatite: linear-gradient(135deg, #006270 0%, #00a896 35%, #02c39a 60%, #00858a 100%);
  --gem-apatite-radial: radial-gradient(ellipse at 40% 30%, #02d4bc 0%, #00a896 45%, #004048 100%);
  --gem-apatite-flat: #00a896;
  --gem-apatite-text: #d0fff8;

  /* ─── PURPLES & VIOLETS ──────────────────────────────────────────────── */

  /* SUGILITE — deep magenta-purple */
  --gem-sugilite: linear-gradient(135deg, #3d0040 0%, #7b1fa2 35%, #ab47bc 60%, #6a0080 100%);
  --gem-sugilite-radial: radial-gradient(ellipse at 40% 30%, #ce93d8 0%, #9c27b0 45%, #1a0020 100%);
  --gem-sugilite-flat: #7b1fa2;
  --gem-sugilite-text: #fce4ff;

  /* CHAROITE — swirling violet with black and white */
  --gem-charoite: linear-gradient(115deg, #2e0050 0%, #7b2d9e 20%, #c084e0 40%, #1a0030 60%, #a855c8 80%, #3a0060 100%);
  --gem-charoite-radial: radial-gradient(ellipse at 50% 40%, #c084e0 0%, #7b2d9e 50%, #0f0020 100%);
  --gem-charoite-flat: #8b2fc0;
  --gem-charoite-text: #f5e0ff;

  /* IOLITE — deep blue-violet, pleochroic */
  --gem-iolite: linear-gradient(135deg, #1a1050 0%, #3f2b8f 35%, #6a4fcf 55%, #8f75e0 75%, #3f2b8f 100%);
  --gem-iolite-radial: radial-gradient(ellipse at 35% 30%, #9080e0 0%, #4030a0 50%, #0a0830 100%);
  --gem-iolite-flat: #503fa0;
  --gem-iolite-text: #e8e0ff;

  /* FLUORITE — rainbow banding, using purple-green axis */
  --gem-fluorite: linear-gradient(135deg, #8b4fc8 0%, #c084e0 25%, #80d8c0 50%, #4ac8a0 75%, #8b4fc8 100%);
  --gem-fluorite-radial: radial-gradient(ellipse at 40% 35%, #d8b4f0 0%, #9060c8 35%, #40b8a0 65%, #1a4030 100%);
  --gem-fluorite-flat: #7a50c0;
  --gem-fluorite-text: #f0e8ff;

  /* LEPIDOLITE — lavender-lilac mica shimmer */
  --gem-lepidolite: linear-gradient(135deg, #c8a8d8 0%, #a87ec0 35%, #c8a8d8 60%, #8f60a8 100%);
  --gem-lepidolite-radial: radial-gradient(ellipse at 35% 30%, #e8d8f0 0%, #b090c8 50%, #5a3878 100%);
  --gem-lepidolite-flat: #a87ec0;
  --gem-lepidolite-text: #2a0840;

  /* ─── GREENS ─────────────────────────────────────────────────────────── */

  /* EMERALD — vivid deep-green */
  --gem-emerald: linear-gradient(135deg, #013220 0%, #0a5c36 30%, #1a8a50 55%, #0d6b40 80%, #013220 100%);
  --gem-emerald-radial: radial-gradient(ellipse at 35% 30%, #24b870 0%, #0a6840 50%, #002010 100%);
  --gem-emerald-flat: #0a6840;
  --gem-emerald-text: #c8ffe0;

  /* JADE — cool milky green */
  --gem-jade: linear-gradient(135deg, #4d7c5f 0%, #7fb38a 35%, #a8d5b0 60%, #5e9870 100%);
  --gem-jade-radial: radial-gradient(ellipse at 40% 30%, #c8ecd0 0%, #7fb38a 50%, #2d5038 100%);
  --gem-jade-flat: #6a9e78;
  --gem-jade-text: #0f2018;

  /* PERIDOT — electric lime green */
  --gem-peridot: linear-gradient(135deg, #4a6a00 0%, #8ab800 35%, #c8e800 55%, #7aaa00 80%, #4a6a00 100%);
  --gem-peridot-radial: radial-gradient(ellipse at 38% 30%, #d4f000 0%, #8ab800 45%, #2a3c00 100%);
  --gem-peridot-flat: #7aaa00;
  --gem-peridot-text: #1a2400;

  /* MOLDAVITE — bottle-green tektite */
  --gem-moldavite: linear-gradient(135deg, #0a2010 0%, #1a5030 30%, #2a7840 55%, #3a9850 75%, #1a5030 100%);
  --gem-moldavite-radial: radial-gradient(ellipse at 40% 35%, #3ab860 0%, #1a5830 50%, #051208 100%);
  --gem-moldavite-flat: #1e6035;
  --gem-moldavite-text: #c4f0d0;

  /* PREHNITE — pale sage-green translucent */
  --gem-prehnite: linear-gradient(135deg, #c8dcb0 0%, #a0c888 35%, #78b060 60%, #a0c888 100%);
  --gem-prehnite-radial: radial-gradient(ellipse at 35% 30%, #e4f0d0 0%, #a0c888 50%, #3c5830 100%);
  --gem-prehnite-flat: #8cbf70;
  --gem-prehnite-text: #1a280e;

  /* SERPENTINE — olive-green with golden veins */
  --gem-serpentine: linear-gradient(115deg, #3d5000 0%, #687800 25%, #c8a030 45%, #687800 65%, #3d5000 100%);
  --gem-serpentine-radial: radial-gradient(ellipse at 40% 30%, #d4b040 0%, #687800 50%, #1e2800 100%);
  --gem-serpentine-flat: #5a6800;
  --gem-serpentine-text: #f0eab0;

  /* GREEN TOURMALINE — vivid forest to chrome green */
  --gem-green-tourmaline: linear-gradient(135deg, #003818 0%, #007840 30%, #00b860 55%, #005030 80%, #003818 100%);
  --gem-green-tourmaline-radial: radial-gradient(ellipse at 38% 30%, #00d870 0%, #007840 50%, #001808 100%);
  --gem-green-tourmaline-flat: #008048;
  --gem-green-tourmaline-text: #c0ffe0;

  /* ─── REDS & PINKS ───────────────────────────────────────────────────── */

  /* RUBY — deep pigeon-blood red */
  --gem-ruby: linear-gradient(135deg, #4a0010 0%, #9b0020 30%, #cc1033 55%, #8b0018 80%, #4a0010 100%);
  --gem-ruby-radial: radial-gradient(ellipse at 38% 30%, #e8203c 0%, #a00020 50%, #200008 100%);
  --gem-ruby-flat: #9b0020;
  --gem-ruby-text: #ffe0e8;

  /* GARNET — dark oxblood red */
  --gem-garnet: linear-gradient(135deg, #3a0808 0%, #6b1010 30%, #a02828 55%, #6b1010 80%, #3a0808 100%);
  --gem-garnet-radial: radial-gradient(ellipse at 38% 30%, #c84040 0%, #7a1818 50%, #180404 100%);
  --gem-garnet-flat: #7a1818;
  --gem-garnet-text: #ffe8e8;

  /* RHODONITE — dusty rose with black matrix */
  --gem-rhodonite: linear-gradient(115deg, #1a0808 0%, #8b3048 30%, #d86888 55%, #8b3048 80%, #1a0808 100%);
  --gem-rhodonite-radial: radial-gradient(ellipse at 40% 35%, #e8809a 0%, #9b3858 50%, #0f0408 100%);
  --gem-rhodonite-flat: #9b3858;
  --gem-rhodonite-text: #ffe0e8;

  /* RHODOCHROSITE — bright banded rose-pink */
  --gem-rhodochrosite: linear-gradient(135deg, #c84070 0%, #e8789c 35%, #f8a8c0 60%, #d05880 100%);
  --gem-rhodochrosite-radial: radial-gradient(ellipse at 35% 30%, #ffc8d8 0%, #e0607f 50%, #801030 100%);
  --gem-rhodochrosite-flat: #d85880;
  --gem-rhodochrosite-text: #2c0010;

  /* SPINEL — red to hot-pink spectrum */
  --gem-spinel: linear-gradient(135deg, #7a0038 0%, #c00060 35%, #e83888 60%, #a00050 100%);
  --gem-spinel-radial: radial-gradient(ellipse at 38% 30%, #f060a0 0%, #c00060 50%, #300018 100%);
  --gem-spinel-flat: #c00060;
  --gem-spinel-text: #ffe0f0;

  /* KUNZITE — pale lilac-pink */
  --gem-kunzite: linear-gradient(135deg, #e8c0d8 0%, #d090b8 35%, #e8c0d8 65%, #b870a0 100%);
  --gem-kunzite-radial: radial-gradient(ellipse at 35% 30%, #f8e0f0 0%, #d090b8 55%, #784068 100%);
  --gem-kunzite-flat: #c878a8;
  --gem-kunzite-text: #280818;

  /* MORGANITE — peach-rose beryl */
  --gem-morganite: linear-gradient(135deg, #f8d8c8 0%, #e8a898 35%, #f8d8c8 65%, #d88878 100%);
  --gem-morganite-radial: radial-gradient(ellipse at 35% 30%, #fff0e8 0%, #e8a898 55%, #985858 100%);
  --gem-morganite-flat: #e09888;
  --gem-morganite-text: #2c1010;

  /* ROSE QUARTZ — milky baby-pink */
  --gem-rose-quartz: linear-gradient(135deg, #f9d0d8 0%, #f0a8b8 35%, #f9d0d8 65%, #e890a8 100%);
  --gem-rose-quartz-radial: radial-gradient(ellipse at 35% 30%, #fff0f4 0%, #f0a8b8 55%, #b06070 100%);
  --gem-rose-quartz-flat: #e898a8;
  --gem-rose-quartz-text: #28080c;

  /* PINK TOURMALINE — vivid fuchsia-rose */
  --gem-pink-tourmaline: linear-gradient(135deg, #7a0040 0%, #d02880 35%, #f060a8 60%, #b02068 100%);
  --gem-pink-tourmaline-radial: radial-gradient(ellipse at 38% 30%, #f880b8 0%, #d02880 50%, #280010 100%);
  --gem-pink-tourmaline-flat: #c82878;
  --gem-pink-tourmaline-text: #ffe0f0;

  /* ─── ORANGES & YELLOWS ──────────────────────────────────────────────── */

  /* CITRINE — golden yellow quartz */
  --gem-citrine: linear-gradient(135deg, #b07800 0%, #e0a800 35%, #f8cc40 60%, #c88800 100%);
  --gem-citrine-radial: radial-gradient(ellipse at 38% 30%, #f8e080 0%, #e0a800 50%, #482c00 100%);
  --gem-citrine-flat: #d89c00;
  --gem-citrine-text: #1c0e00;

  /* CARNELIAN — warm red-orange */
  --gem-carnelian: linear-gradient(135deg, #7a1800 0%, #c83000 35%, #e85010 60%, #a82800 100%);
  --gem-carnelian-radial: radial-gradient(ellipse at 38% 30%, #f07030 0%, #c83000 50%, #280800 100%);
  --gem-carnelian-flat: #c83000;
  --gem-carnelian-text: #fff0e8;

  /* FIRE OPAL — translucent orange flame */
  --gem-fire-opal: linear-gradient(135deg, #b04000 0%, #e87000 30%, #f8a820 55%, #e86000 80%, #b04000 100%);
  --gem-fire-opal-radial: radial-gradient(ellipse at 38% 30%, #f8c050 0%, #f07000 40%, #481800 100%);
  --gem-fire-opal-flat: #e06800;
  --gem-fire-opal-text: #ffecd0;

  /* AMBER — fossilized resin golden */
  --gem-amber: linear-gradient(135deg, #7a4800 0%, #c07800 30%, #e8a820 55%, #f0c840 75%, #c07800 100%);
  --gem-amber-radial: radial-gradient(ellipse at 38% 30%, #f8d860 0%, #d09000 50%, #301800 100%);
  --gem-amber-flat: #c88000;
  --gem-amber-text: #1a0c00;

  /* SUNSTONE — warm orange with glitter */
  --gem-sunstone: linear-gradient(135deg, #c84800 0%, #e87000 30%, #f8a030 55%, #ffd060 75%, #e87000 100%);
  --gem-sunstone-radial: radial-gradient(ellipse at 35% 25%, #ffe080 0%, #f09020 45%, #502000 100%);
  --gem-sunstone-flat: #e07800;
  --gem-sunstone-text: #1c0800;

  /* IMPERIAL TOPAZ — rich golden-orange */
  --gem-imperial-topaz: linear-gradient(135deg, #8b4800 0%, #d07800 30%, #f0a828 55%, #ffd060 75%, #d07800 100%);
  --gem-imperial-topaz-radial: radial-gradient(ellipse at 35% 25%, #ffe898 0%, #e09020 50%, #381800 100%);
  --gem-imperial-topaz-flat: #d08020;
  --gem-imperial-topaz-text: #1c0800;

  /* ARAGONITE — pale peach to caramel */
  --gem-aragonite: linear-gradient(135deg, #d4a070 0%, #e8c098 35%, #f0d4b0 60%, #c88858 100%);
  --gem-aragonite-radial: radial-gradient(ellipse at 35% 30%, #f8e8d0 0%, #e0b880 50%, #704828 100%);
  --gem-aragonite-flat: #d4a070;
  --gem-aragonite-text: #1c0c00;

  /* ─── WHITES, CREAMS & IRIDESCENTS ──────────────────────────────────── */

  /* MOONSTONE — white/cream with blue adularescence */
  --gem-moonstone: linear-gradient(135deg, #e8eaf0 0%, #c0c8e0 30%, #d8dff0 55%, #a8b8d8 75%, #e8eaf0 100%);
  --gem-moonstone-radial: radial-gradient(ellipse at 35% 30%, #f8f9ff 0%, #bcc8e8 40%, #7090c0 80%, #b0bcd8 100%);
  --gem-moonstone-flat: #c0c8e0;
  --gem-moonstone-text: #1a1e30;

  /* PEARL — lustrous white with orient */
  --gem-pearl: linear-gradient(135deg, #f8f4e8 0%, #ece8f0 30%, #f0ece8 60%, #e8e0d8 100%);
  --gem-pearl-radial: radial-gradient(ellipse at 30% 30%, #fff 0%, #f0eae0 40%, #d8ccc0 80%, #c0b4a8 100%);
  --gem-pearl-flat: #ece8e0;
  --gem-pearl-text: #302820;

  /* WHITE OPAL — milky fire with rainbow flash */
  --gem-white-opal: linear-gradient(135deg, #f0f0f8 0%, #e0d8f0 20%, #d8eef0 40%, #f0e8d8 60%, #e8d8f0 80%, #f0f0f8 100%);
  --gem-white-opal-radial: radial-gradient(ellipse at 40% 35%, #fff 0%, #e0d8ff 25%, #b8f0e8 50%, #ffd8f0 75%, #f8f8ff 100%);
  --gem-white-opal-flat: #ece8f8;
  --gem-white-opal-text: #1a1428;

  /* SELENITE — translucent silky white */
  --gem-selenite: linear-gradient(135deg, #f8f8f0 0%, #eeeee8 30%, #f8f8f4 60%, #e8e8e0 100%);
  --gem-selenite-radial: radial-gradient(ellipse at 35% 30%, #fff 0%, #f0f0e8 50%, #c8c8c0 100%);
  --gem-selenite-flat: #eeeee8;
  --gem-selenite-text: #282820;

  /* HOWLITE — white with grey veins */
  --gem-howlite: linear-gradient(115deg, #f0f0f0 0%, #e0e0e0 20%, #c8c8c8 40%, #e8e8e8 60%, #d8d8d8 80%, #f0f0f0 100%);
  --gem-howlite-radial: radial-gradient(ellipse at 40% 35%, #fff 0%, #e0e0e0 50%, #909090 100%);
  --gem-howlite-flat: #e0e0e0;
  --gem-howlite-text: #202020;

  /* ─── BLACKS & DARK MYSTERIES ────────────────────────────────────────── */

  /* OBSIDIAN — volcanic glass deep black */
  --gem-obsidian: linear-gradient(135deg, #080808 0%, #181818 35%, #282828 60%, #101010 100%);
  --gem-obsidian-radial: radial-gradient(ellipse at 40% 35%, #383838 0%, #181818 50%, #000 100%);
  --gem-obsidian-flat: #181818;
  --gem-obsidian-text: #d0d0d0;

  /* BLACK TOURMALINE — striated jet black */
  --gem-black-tourmaline: linear-gradient(115deg, #050505 0%, #0f0f14 30%, #1a1a22 55%, #0f0f14 80%, #050505 100%);
  --gem-black-tourmaline-radial: radial-gradient(ellipse at 40% 35%, #2a2a38 0%, #111118 50%, #000 100%);
  --gem-black-tourmaline-flat: #111118;
  --gem-black-tourmaline-text: #c0c0d0;

  /* ONYX — cool black with slight sheen */
  --gem-onyx: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 30%, #0f0f0f 60%, #242424 100%);
  --gem-onyx-radial: radial-gradient(ellipse at 35% 30%, #303030 0%, #181818 50%, #000 100%);
  --gem-onyx-flat: #181818;
  --gem-onyx-text: #d8d8d8;

  /* SHUNGITE — matte black with silver shimmer */
  --gem-shungite: linear-gradient(135deg, #0c0c0c 0%, #1e1e1e 35%, #303030 55%, #1a1a1a 100%);
  --gem-shungite-radial: radial-gradient(ellipse at 40% 35%, #404040 0%, #1e1e1e 50%, #050505 100%);
  --gem-shungite-flat: #1e1e1e;
  --gem-shungite-text: #c8c8c8;

  /* BLACK OPAL — dark base with vivid fire */
  --gem-black-opal: linear-gradient(135deg, #0a0a14 0%, #1a1030 25%, #3040a0 45%, #a02060 65%, #00b890 80%, #0a0a14 100%);
  --gem-black-opal-radial: radial-gradient(ellipse at 40% 35%, #6040ff 0%, #200840 35%, #00c890 55%, #1a0020 80%, #000 100%);
  --gem-black-opal-flat: #100820;
  --gem-black-opal-text: #e0d8ff;

  /* NUUMMITE — ancient dark with gold-green schiller */
  --gem-nuummite: linear-gradient(115deg, #0a0a0c 0%, #1a1a20 25%, #3a3830 45%, #c0a040 55%, #1a1a20 75%, #0a0a0c 100%);
  --gem-nuummite-radial: radial-gradient(ellipse at 40% 35%, #c8a830 0%, #2a2820 40%, #050506 100%);
  --gem-nuummite-flat: #18180e;
  --gem-nuummite-text: #d8c870;

  /* TEKTITE — rough black meteorite */
  --gem-tektite: linear-gradient(135deg, #060606 0%, #101010 30%, #1c1c18 55%, #0a0a08 100%);
  --gem-tektite-radial: radial-gradient(ellipse at 40% 35%, #282820 0%, #121210 50%, #000 100%);
  --gem-tektite-flat: #101010;
  --gem-tektite-text: #b8b8b0;

  /* ─── IRIDESCENT & METALLIC ──────────────────────────────────────────── */

  /* OPAL (BOULDER) — brown ironstone with vivid patches */
  --gem-boulder-opal: linear-gradient(115deg, #5c3a10 0%, #8a5820 25%, #d89060 40%, #60c8b0 55%, #4080e0 70%, #8a5820 100%);
  --gem-boulder-opal-radial: radial-gradient(ellipse at 40% 35%, #70d8c0 0%, #c08040 40%, #3c2008 100%);
  --gem-boulder-opal-flat: #7a5020;
  --gem-boulder-opal-text: #f0e0d0;

  /* SPECTROLITE — ultra-vivid labradorite spectrum */
  --gem-spectrolite: linear-gradient(115deg, #0c0c14 0%, #0040a0 20%, #00c8d0 35%, #00e870 50%, #f0d000 65%, #e04080 80%, #0c0c14 100%);
  --gem-spectrolite-radial: radial-gradient(ellipse at 40% 35%, #00f0e0 0%, #0050c0 35%, #a00060 65%, #050510 100%);
  --gem-spectrolite-flat: #003870;
  --gem-spectrolite-text: #d0f8ff;

  /* ALEXANDRITE — color-change green to red */
  --gem-alexandrite: linear-gradient(135deg, #1a5c28 0%, #2a8a40 35%, #a82828 65%, #c84040 100%);
  --gem-alexandrite-radial: radial-gradient(ellipse at 35% 35%, #40c060 0%, #1a6030 45%, #a03030 80%, #200808 100%);
  --gem-alexandrite-flat: #286830;
  --gem-alexandrite-text: #d0ffe0;

  /* TITANITE (SPHENE) — fire dispersion yellow-green */
  --gem-titanite: linear-gradient(135deg, #4a6800 0%, #88a800 30%, #d8e020 55%, #80c840 75%, #4a6800 100%);
  --gem-titanite-radial: radial-gradient(ellipse at 38% 30%, #f0f840 0%, #a0c800 50%, #1c2800 100%);
  --gem-titanite-flat: #7a9c00;
  --gem-titanite-text: #1a2000;

  /* ─── GOLD & SILVER MINERALS ─────────────────────────────────────────── */

  /* PYRITE — fool's gold cubic shimmer */
  --gem-pyrite: linear-gradient(135deg, #5c4800 0%, #a08020 30%, #d4b840 50%, #e8d060 65%, #a08020 100%);
  --gem-pyrite-radial: radial-gradient(ellipse at 35% 30%, #f0d860 0%, #b89030 50%, #2c2000 100%);
  --gem-pyrite-flat: #b89030;
  --gem-pyrite-text: #1c1400;

  /* GOLD (NATIVE) — rich pure gold */
  --gem-gold: linear-gradient(135deg, #7a5800 0%, #c89010 30%, #f0c030 55%, #ffd840 70%, #c89010 100%);
  --gem-gold-radial: radial-gradient(ellipse at 35% 28%, #ffe870 0%, #d4a020 50%, #302000 100%);
  --gem-gold-flat: #d4a020;
  --gem-gold-text: #1c1000;

  /* GOLD-NATIVE aliases (used by components) */
  --gem-gold-native: var(--gem-gold);
  --gem-gold-native-radial: var(--gem-gold-radial);
  --gem-gold-native-flat: #c88c00;
  --gem-gold-native-text: #1c1000;

  /* HEMATITE — silver-metallic iron */
  --gem-hematite: linear-gradient(135deg, #1c1c1c 0%, #404040 30%, #686868 50%, #484848 70%, #1c1c1c 100%);
  --gem-hematite-radial: radial-gradient(ellipse at 35% 30%, #808080 0%, #484848 50%, #080808 100%);
  --gem-hematite-flat: #484848;
  --gem-hematite-text: #e8e8e8;

  /* GALENA — blue-grey metallic lead lustre */
  --gem-galena: linear-gradient(135deg, #202030 0%, #3c3c50 30%, #585870 50%, #3c3c50 80%, #202030 100%);
  --gem-galena-radial: radial-gradient(ellipse at 38% 30%, #707090 0%, #3c3c58 50%, #0c0c18 100%);
  --gem-galena-flat: #404060;
  --gem-galena-text: #e0e0f0;

  /* ─── BROWN & EARTH TONES ────────────────────────────────────────────── */

  /* TIGER'S EYE — banded gold-brown chatoyancy */
  --gem-tigers-eye: linear-gradient(115deg, #3c2000 0%, #7a4800 25%, #c88020 45%, #7a4800 65%, #3c2000 100%);
  --gem-tigers-eye-radial: radial-gradient(ellipse at 35% 30%, #d89030 0%, #7a4800 50%, #180e00 100%);
  --gem-tigers-eye-flat: #8a5010;
  --gem-tigers-eye-text: #ffe8b0;

  /* BRONZITE — brown-bronze metallic sheen */
  --gem-bronzite: linear-gradient(115deg, #3a2808 0%, #6a4818 25%, #a07838 45%, #6a4818 70%, #3a2808 100%);
  --gem-bronzite-radial: radial-gradient(ellipse at 38% 30%, #c09840 0%, #6a4818 50%, #180c00 100%);
  --gem-bronzite-flat: #6a4818;
  --gem-bronzite-text: #f0e0c0;

  /* JASPER — earthy rust-ochre */
  --gem-jasper: linear-gradient(115deg, #5c1c08 0%, #9a3810 30%, #c05c20 50%, #9a3810 75%, #5c1c08 100%);
  --gem-jasper-radial: radial-gradient(ellipse at 38% 30%, #d07030 0%, #9a3810 50%, #200808 100%);
  --gem-jasper-flat: #9a3810;
  --gem-jasper-text: #fff0e8;

  /* SMOKY QUARTZ — grey-brown transparent */
  --gem-smoky-quartz: linear-gradient(135deg, #2a2010 0%, #504030 35%, #7a6048 60%, #504030 100%);
  --gem-smoky-quartz-radial: radial-gradient(ellipse at 38% 30%, #9a8060 0%, #504030 50%, #100c08 100%);
  --gem-smoky-quartz-flat: #504030;
  --gem-smoky-quartz-text: #f0e8d8;

  /* PICTURE JASPER — sandy tan landscape */
  --gem-picture-jasper: linear-gradient(115deg, #7a5830 0%, #c09060 25%, #d4a870 45%, #a07040 70%, #7a5830 100%);
  --gem-picture-jasper-radial: radial-gradient(ellipse at 40% 35%, #e8c890 0%, #b08050 50%, #3c2010 100%);
  --gem-picture-jasper-flat: #b08050;
  --gem-picture-jasper-text: #1c1008;

  /* ─── UNIQUE & RARE ──────────────────────────────────────────────────── */

  /* AZURITE — electric cobalt-blue with malachite mix */
  --gem-azurite: linear-gradient(135deg, #001060 0%, #0840c0 30%, #1870f0 55%, #003090 80%, #001060 100%);
  --gem-azurite-radial: radial-gradient(ellipse at 38% 30%, #2090ff 0%, #0840c0 50%, #000820 100%);
  --gem-azurite-flat: #0840c0;
  --gem-azurite-text: #d0e8ff;

  /* AZURITE-MALACHITE — cobalt-blue + emerald-green swirl */
  --gem-azurite-malachite: linear-gradient(115deg, #001040 0%, #0840c0 25%, #007850 50%, #1870f0 75%, #001040 100%);
  --gem-azurite-malachite-radial: radial-gradient(ellipse at 45% 35%, #40a0f0 0%, #007850 40%, #001040 100%);
  --gem-azurite-malachite-flat: #0c5890;
  --gem-azurite-malachite-text: #d0f0ff;

  /* TURQUOISE — sky-robin blue-green */
  --gem-turquoise: linear-gradient(135deg, #007080 0%, #00a8b8 30%, #20c8d0 55%, #009aaa 80%, #007080 100%);
  --gem-turquoise-radial: radial-gradient(ellipse at 38% 30%, #40d8e0 0%, #00a8b8 50%, #003840 100%);
  --gem-turquoise-flat: #00a8b8;
  --gem-turquoise-text: #d0feff;

  /* CHRYSOCOLLA — teal-blue kaleidoscope */
  --gem-chrysocolla: linear-gradient(115deg, #004858 0%, #0088a0 25%, #00b8c8 45%, #20d0c0 65%, #0088a0 100%);
  --gem-chrysocolla-radial: radial-gradient(ellipse at 38% 30%, #50e0d0 0%, #00a0b0 50%, #002030 100%);
  --gem-chrysocolla-flat: #0098b0;
  --gem-chrysocolla-text: #d0f8ff;

  /* LAPIS LAZULI — royal blue with gold pyrite */
  --gem-lapis-lazuli: linear-gradient(135deg, #001a6e 0%, #0028a8 30%, #0040c8 50%, #d4a820 60%, #0028a8 80%, #001a6e 100%);
  --gem-lapis-lazuli-radial: radial-gradient(ellipse at 38% 30%, #3060e0 0%, #001a8a 45%, #d4a820 65%, #000830 100%);
  --gem-lapis-lazuli-flat: #0030b0;
  --gem-lapis-lazuli-text: #d0e0ff;

  /* SODALITE — navy with white calcite */
  --gem-sodalite: linear-gradient(115deg, #001040 0%, #002898 25%, #0038c0 45%, #e8e8e8 55%, #002898 75%, #001040 100%);
  --gem-sodalite-radial: radial-gradient(ellipse at 38% 35%, #4878e8 0%, #002898 50%, #00081c 100%);
  --gem-sodalite-flat: #0030a8;
  --gem-sodalite-text: #c8dcff;

  /* AMAZONITE — cool seafoam mint-green */
  --gem-amazonite: linear-gradient(135deg, #3a7a70 0%, #5aaa98 30%, #80c8b8 55%, #5aaa98 80%, #3a7a70 100%);
  --gem-amazonite-radial: radial-gradient(ellipse at 35% 30%, #a0d8c8 0%, #5aaa98 50%, #1c3c38 100%);
  --gem-amazonite-flat: #5aaa98;
  --gem-amazonite-text: #0c2420;

  /* UNAKITE — pink-green epidote granite */
  --gem-unakite: linear-gradient(115deg, #7a5828 0%, #c08050 30%, #708858 50%, #88a860 70%, #7a5828 100%);
  --gem-unakite-radial: radial-gradient(ellipse at 40% 35%, #c09870 0%, #789060 40%, #2c1c0c 100%);
  --gem-unakite-flat: #9a7050;
  --gem-unakite-text: #f8f0e0;

  /* BLOODSTONE — dark green with red spots */
  --gem-bloodstone: linear-gradient(115deg, #0a2010 0%, #1a4828 25%, #2a6838 45%, #8b1010 55%, #1a4828 80%, #0a2010 100%);
  --gem-bloodstone-radial: radial-gradient(ellipse at 45% 40%, #2a7040 0%, #8b1010 50%, #041008 100%);
  --gem-bloodstone-flat: #1a5030;
  --gem-bloodstone-text: #d0ffe0;

  /* VANADINITE — vivid red-orange hex crystals */
  --gem-vanadinite: linear-gradient(135deg, #8b1800 0%, #d03000 30%, #f05800 55%, #c03800 80%, #8b1800 100%);
  --gem-vanadinite-radial: radial-gradient(ellipse at 38% 30%, #ff6820 0%, #d03000 50%, #280800 100%);
  --gem-vanadinite-flat: #c03800;
  --gem-vanadinite-text: #fff0e8;

  /* STIBNITE — silver-grey metallic needles */
  --gem-stibnite: linear-gradient(115deg, #101018 0%, #282838 25%, #484860 45%, #282838 70%, #101018 100%);
  --gem-stibnite-radial: radial-gradient(ellipse at 38% 30%, #686890 0%, #282840 50%, #060608 100%);
  --gem-stibnite-flat: #303050;
  --gem-stibnite-text: #e0e0f0;

  /* ULEXITE — TV stone silky white fibers */
  --gem-ulexite: linear-gradient(115deg, #f0f0f8 0%, #d8d8e8 25%, #f8f8ff 50%, #d0d0e0 75%, #f0f0f8 100%);
  --gem-ulexite-radial: radial-gradient(ellipse at 40% 30%, #fff 0%, #e0e0f0 50%, #a0a0c0 100%);
  --gem-ulexite-flat: #e0e0f0;
  --gem-ulexite-text: #181830;

  /* CELESTITE — pale blue celestial */
  --gem-celestite: linear-gradient(135deg, #c8ddf0 0%, #90b8e0 35%, #d8eaf8 65%, #78a8d8 100%);
  --gem-celestite-radial: radial-gradient(ellipse at 35% 30%, #f0f8ff 0%, #90b8e0 55%, #3060a0 100%);
  --gem-celestite-flat: #90b8e0;
  --gem-celestite-text: #102040;

  /* PHANTOM QUARTZ — clear with interior ghost */
  --gem-phantom-quartz: linear-gradient(135deg, #e8e8f0 0%, #c8c8d8 20%, #9090a8 40%, #c8c8d8 60%, #e8e8f0 100%);
  --gem-phantom-quartz-radial: radial-gradient(ellipse at 45% 35%, #f8f8ff 0%, #c0c0d8 40%, #606080 70%, #e8e8f8 100%);
  --gem-phantom-quartz-flat: #c0c0d8;
  --gem-phantom-quartz-text: #1a1830;

  /* RUTILATED QUARTZ — clear with gold needle inclusions */
  --gem-rutilated-quartz: linear-gradient(135deg, #e8e0c8 0%, #d0c8a8 25%, #c8a840 40%, #d0c8a8 60%, #e8e0c8 100%);
  --gem-rutilated-quartz-radial: radial-gradient(ellipse at 40% 35%, #f8f0d8 0%, #d0c8a8 40%, #a08020 65%, #f0e8d0 100%);
  --gem-rutilated-quartz-flat: #d0c8a8;
  --gem-rutilated-quartz-text: #201c08;

  /* ─── QUARTZ FAMILY VARIANTS ─────────────────────────────────────────── */

  /* CLEAR QUARTZ — pure transparent crystal */
  --gem-clear-quartz: linear-gradient(135deg, #f4f4f8 0%, #e8e8f0 30%, #f8f8ff 60%, #dcdce8 100%);
  --gem-clear-quartz-radial: radial-gradient(ellipse at 35% 30%, #fff 0%, #e8e8f0 45%, #b0b0c0 100%);
  --gem-clear-quartz-flat: #e8e8f0;
  --gem-clear-quartz-text: #181820;

  /* BLUE LACE AGATE — pale banded sky-blue */
  --gem-blue-lace-agate: linear-gradient(135deg, #d8ecf8 0%, #a8d0ec 30%, #d8ecf8 60%, #88bce0 100%);
  --gem-blue-lace-agate-radial: radial-gradient(ellipse at 35% 30%, #f0f8ff 0%, #a8d0ec 50%, #3868a0 100%);
  --gem-blue-lace-agate-flat: #a8d0ec;
  --gem-blue-lace-agate-text: #0c2038;

  /* MOSS AGATE — clear with green dendrites */
  --gem-moss-agate: linear-gradient(135deg, #e0ecdc 0%, #a8c8a0 30%, #d8ead4 60%, #88b080 100%);
  --gem-moss-agate-radial: radial-gradient(ellipse at 38% 30%, #f0f8ec 0%, #a8c8a0 50%, #305828 100%);
  --gem-moss-agate-flat: #a8c8a0;
  --gem-moss-agate-text: #0c2008;

  /* FIRE AGATE — iridescent brown-rainbow */
  --gem-fire-agate: linear-gradient(115deg, #4a1800 0%, #8a3000 20%, #c05800 35%, #a84018 50%, #d87030 65%, #f0a840 80%, #8a3000 100%);
  --gem-fire-agate-radial: radial-gradient(ellipse at 38% 30%, #f0a840 0%, #c05800 40%, #200800 100%);
  --gem-fire-agate-flat: #a84018;
  --gem-fire-agate-text: #fff0e0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — apply any gemstone as a background
   Usage: <div class="gem-bg-amethyst"> or <button class="gem-btn-sapphire">
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Background gradient classes ---------------------------------------- */
.gem-bg-amethyst {
  background: var(--gem-amethyst);
  color: var(--gem-amethyst-text);
}

.gem-bg-malachite {
  background: var(--gem-malachite);
  color: var(--gem-malachite-text);
}

.gem-bg-labradorite {
  background: var(--gem-labradorite);
  color: var(--gem-labradorite-text);
}

.gem-bg-aquamarine {
  background: var(--gem-aquamarine);
  color: var(--gem-aquamarine-text);
}

.gem-bg-sapphire {
  background: var(--gem-sapphire);
  color: var(--gem-sapphire-text);
}

.gem-bg-blue-topaz {
  background: var(--gem-blue-topaz);
  color: var(--gem-blue-topaz-text);
}

.gem-bg-tanzanite {
  background: var(--gem-tanzanite);
  color: var(--gem-tanzanite-text);
}

.gem-bg-blue-kyanite {
  background: var(--gem-blue-kyanite);
  color: var(--gem-blue-kyanite-text);
}

.gem-bg-larimar {
  background: var(--gem-larimar);
  color: var(--gem-larimar-text);
}

.gem-bg-apatite {
  background: var(--gem-apatite);
  color: var(--gem-apatite-text);
}

.gem-bg-sugilite {
  background: var(--gem-sugilite);
  color: var(--gem-sugilite-text);
}

.gem-bg-charoite {
  background: var(--gem-charoite);
  color: var(--gem-charoite-text);
}

.gem-bg-iolite {
  background: var(--gem-iolite);
  color: var(--gem-iolite-text);
}

.gem-bg-fluorite {
  background: var(--gem-fluorite);
  color: var(--gem-fluorite-text);
}

.gem-bg-lepidolite {
  background: var(--gem-lepidolite);
  color: var(--gem-lepidolite-text);
}

.gem-bg-emerald {
  background: var(--gem-emerald);
  color: var(--gem-emerald-text);
}

.gem-bg-jade {
  background: var(--gem-jade);
  color: var(--gem-jade-text);
}

.gem-bg-peridot {
  background: var(--gem-peridot);
  color: var(--gem-peridot-text);
}

.gem-bg-moldavite {
  background: var(--gem-moldavite);
  color: var(--gem-moldavite-text);
}

.gem-bg-prehnite {
  background: var(--gem-prehnite);
  color: var(--gem-prehnite-text);
}

.gem-bg-serpentine {
  background: var(--gem-serpentine);
  color: var(--gem-serpentine-text);
}

.gem-bg-green-tourmaline {
  background: var(--gem-green-tourmaline);
  color: var(--gem-green-tourmaline-text);
}

.gem-bg-ruby {
  background: var(--gem-ruby);
  color: var(--gem-ruby-text);
}

.gem-bg-garnet {
  background: var(--gem-garnet);
  color: var(--gem-garnet-text);
}

.gem-bg-rhodonite {
  background: var(--gem-rhodonite);
  color: var(--gem-rhodonite-text);
}

.gem-bg-rhodochrosite {
  background: var(--gem-rhodochrosite);
  color: var(--gem-rhodochrosite-text);
}

.gem-bg-spinel {
  background: var(--gem-spinel);
  color: var(--gem-spinel-text);
}

.gem-bg-kunzite {
  background: var(--gem-kunzite);
  color: var(--gem-kunzite-text);
}

.gem-bg-morganite {
  background: var(--gem-morganite);
  color: var(--gem-morganite-text);
}

.gem-bg-rose-quartz {
  background: var(--gem-rose-quartz);
  color: var(--gem-rose-quartz-text);
}

.gem-bg-pink-tourmaline {
  background: var(--gem-pink-tourmaline);
  color: var(--gem-pink-tourmaline-text);
}

.gem-bg-citrine {
  background: var(--gem-citrine);
  color: var(--gem-citrine-text);
}

.gem-bg-carnelian {
  background: var(--gem-carnelian);
  color: var(--gem-carnelian-text);
}

.gem-bg-fire-opal {
  background: var(--gem-fire-opal);
  color: var(--gem-fire-opal-text);
}

.gem-bg-amber {
  background: var(--gem-amber);
  color: var(--gem-amber-text);
}

.gem-bg-sunstone {
  background: var(--gem-sunstone);
  color: var(--gem-sunstone-text);
}

.gem-bg-imperial-topaz {
  background: var(--gem-imperial-topaz);
  color: var(--gem-imperial-topaz-text);
}

.gem-bg-aragonite {
  background: var(--gem-aragonite);
  color: var(--gem-aragonite-text);
}

.gem-bg-moonstone {
  background: var(--gem-moonstone);
  color: var(--gem-moonstone-text);
}

.gem-bg-pearl {
  background: var(--gem-pearl);
  color: var(--gem-pearl-text);
}

.gem-bg-white-opal {
  background: var(--gem-white-opal);
  color: var(--gem-white-opal-text);
}

.gem-bg-selenite {
  background: var(--gem-selenite);
  color: var(--gem-selenite-text);
}

.gem-bg-howlite {
  background: var(--gem-howlite);
  color: var(--gem-howlite-text);
}

.gem-bg-obsidian {
  background: var(--gem-obsidian);
  color: var(--gem-obsidian-text);
}

.gem-bg-black-tourmaline {
  background: var(--gem-black-tourmaline);
  color: var(--gem-black-tourmaline-text);
}

.gem-bg-onyx {
  background: var(--gem-onyx);
  color: var(--gem-onyx-text);
}

.gem-bg-shungite {
  background: var(--gem-shungite);
  color: var(--gem-shungite-text);
}

.gem-bg-black-opal {
  background: var(--gem-black-opal);
  color: var(--gem-black-opal-text);
}

.gem-bg-nuummite {
  background: var(--gem-nuummite);
  color: var(--gem-nuummite-text);
}

.gem-bg-tektite {
  background: var(--gem-tektite);
  color: var(--gem-tektite-text);
}

.gem-bg-boulder-opal {
  background: var(--gem-boulder-opal);
  color: var(--gem-boulder-opal-text);
}

.gem-bg-spectrolite {
  background: var(--gem-spectrolite);
  color: var(--gem-spectrolite-text);
}

.gem-bg-alexandrite {
  background: var(--gem-alexandrite);
  color: var(--gem-alexandrite-text);
}

.gem-bg-titanite {
  background: var(--gem-titanite);
  color: var(--gem-titanite-text);
}

.gem-bg-pyrite {
  background: var(--gem-pyrite);
  color: var(--gem-pyrite-text);
}

.gem-bg-gold {
  background: var(--gem-gold);
  color: var(--gem-gold-text);
}

.gem-bg-hematite {
  background: var(--gem-hematite);
  color: var(--gem-hematite-text);
}

.gem-bg-galena {
  background: var(--gem-galena);
  color: var(--gem-galena-text);
}

.gem-bg-tigers-eye {
  background: var(--gem-tigers-eye);
  color: var(--gem-tigers-eye-text);
}

.gem-bg-bronzite {
  background: var(--gem-bronzite);
  color: var(--gem-bronzite-text);
}

.gem-bg-jasper {
  background: var(--gem-jasper);
  color: var(--gem-jasper-text);
}

.gem-bg-smoky-quartz {
  background: var(--gem-smoky-quartz);
  color: var(--gem-smoky-quartz-text);
}

.gem-bg-picture-jasper {
  background: var(--gem-picture-jasper);
  color: var(--gem-picture-jasper-text);
}

.gem-bg-azurite {
  background: var(--gem-azurite);
  color: var(--gem-azurite-text);
}

.gem-bg-azurite-malachite {
  background: var(--gem-azurite-malachite);
  color: var(--gem-azurite-malachite-text);
}

.gem-bg-turquoise {
  background: var(--gem-turquoise);
  color: var(--gem-turquoise-text);
}

.gem-bg-chrysocolla {
  background: var(--gem-chrysocolla);
  color: var(--gem-chrysocolla-text);
}

.gem-bg-lapis-lazuli {
  background: var(--gem-lapis-lazuli);
  color: var(--gem-lapis-lazuli-text);
}

.gem-bg-sodalite {
  background: var(--gem-sodalite);
  color: var(--gem-sodalite-text);
}

.gem-bg-amazonite {
  background: var(--gem-amazonite);
  color: var(--gem-amazonite-text);
}

.gem-bg-unakite {
  background: var(--gem-unakite);
  color: var(--gem-unakite-text);
}

.gem-bg-bloodstone {
  background: var(--gem-bloodstone);
  color: var(--gem-bloodstone-text);
}

.gem-bg-vanadinite {
  background: var(--gem-vanadinite);
  color: var(--gem-vanadinite-text);
}

.gem-bg-stibnite {
  background: var(--gem-stibnite);
  color: var(--gem-stibnite-text);
}

.gem-bg-ulexite {
  background: var(--gem-ulexite);
  color: var(--gem-ulexite-text);
}

.gem-bg-celestite {
  background: var(--gem-celestite);
  color: var(--gem-celestite-text);
}

.gem-bg-phantom-quartz {
  background: var(--gem-phantom-quartz);
  color: var(--gem-phantom-quartz-text);
}

.gem-bg-rutilated-quartz {
  background: var(--gem-rutilated-quartz);
  color: var(--gem-rutilated-quartz-text);
}

.gem-bg-clear-quartz {
  background: var(--gem-clear-quartz);
  color: var(--gem-clear-quartz-text);
}

.gem-bg-blue-lace-agate {
  background: var(--gem-blue-lace-agate);
  color: var(--gem-blue-lace-agate-text);
}

.gem-bg-moss-agate {
  background: var(--gem-moss-agate);
  color: var(--gem-moss-agate-text);
}

.gem-bg-fire-agate {
  background: var(--gem-fire-agate);
  color: var(--gem-fire-agate-text);
}

/* --- Radial glow backgrounds (all 86 stones) ---------------------------- */
.gem-glow-amethyst {
  background: var(--gem-amethyst-radial);
  color: var(--gem-amethyst-text);
}

.gem-glow-malachite {
  background: var(--gem-malachite-radial);
  color: var(--gem-malachite-text);
}

.gem-glow-labradorite {
  background: var(--gem-labradorite-radial);
  color: var(--gem-labradorite-text);
}

.gem-glow-aquamarine {
  background: var(--gem-aquamarine-radial);
  color: var(--gem-aquamarine-text);
}

.gem-glow-sapphire {
  background: var(--gem-sapphire-radial);
  color: var(--gem-sapphire-text);
}

.gem-glow-blue-topaz {
  background: var(--gem-blue-topaz-radial);
  color: var(--gem-blue-topaz-text);
}

.gem-glow-tanzanite {
  background: var(--gem-tanzanite-radial);
  color: var(--gem-tanzanite-text);
}

.gem-glow-blue-kyanite {
  background: var(--gem-blue-kyanite-radial);
  color: var(--gem-blue-kyanite-text);
}

.gem-glow-larimar {
  background: var(--gem-larimar-radial);
  color: var(--gem-larimar-text);
}

.gem-glow-apatite {
  background: var(--gem-apatite-radial);
  color: var(--gem-apatite-text);
}

.gem-glow-sugilite {
  background: var(--gem-sugilite-radial);
  color: var(--gem-sugilite-text);
}

.gem-glow-charoite {
  background: var(--gem-charoite-radial);
  color: var(--gem-charoite-text);
}

.gem-glow-iolite {
  background: var(--gem-iolite-radial);
  color: var(--gem-iolite-text);
}

.gem-glow-fluorite {
  background: var(--gem-fluorite-radial);
  color: var(--gem-fluorite-text);
}

.gem-glow-lepidolite {
  background: var(--gem-lepidolite-radial);
  color: var(--gem-lepidolite-text);
}

.gem-glow-emerald {
  background: var(--gem-emerald-radial);
  color: var(--gem-emerald-text);
}

.gem-glow-jade {
  background: var(--gem-jade-radial);
  color: var(--gem-jade-text);
}

.gem-glow-peridot {
  background: var(--gem-peridot-radial);
  color: var(--gem-peridot-text);
}

.gem-glow-moldavite {
  background: var(--gem-moldavite-radial);
  color: var(--gem-moldavite-text);
}

.gem-glow-prehnite {
  background: var(--gem-prehnite-radial);
  color: var(--gem-prehnite-text);
}

.gem-glow-serpentine {
  background: var(--gem-serpentine-radial);
  color: var(--gem-serpentine-text);
}

.gem-glow-green-tourmaline {
  background: var(--gem-green-tourmaline-radial);
  color: var(--gem-green-tourmaline-text);
}

.gem-glow-ruby {
  background: var(--gem-ruby-radial);
  color: var(--gem-ruby-text);
}

.gem-glow-garnet {
  background: var(--gem-garnet-radial);
  color: var(--gem-garnet-text);
}

.gem-glow-rhodonite {
  background: var(--gem-rhodonite-radial);
  color: var(--gem-rhodonite-text);
}

.gem-glow-rhodochrosite {
  background: var(--gem-rhodochrosite-radial);
  color: var(--gem-rhodochrosite-text);
}

.gem-glow-spinel {
  background: var(--gem-spinel-radial);
  color: var(--gem-spinel-text);
}

.gem-glow-kunzite {
  background: var(--gem-kunzite-radial);
  color: var(--gem-kunzite-text);
}

.gem-glow-morganite {
  background: var(--gem-morganite-radial);
  color: var(--gem-morganite-text);
}

.gem-glow-rose-quartz {
  background: var(--gem-rose-quartz-radial);
  color: var(--gem-rose-quartz-text);
}

.gem-glow-pink-tourmaline {
  background: var(--gem-pink-tourmaline-radial);
  color: var(--gem-pink-tourmaline-text);
}

.gem-glow-citrine {
  background: var(--gem-citrine-radial);
  color: var(--gem-citrine-text);
}

.gem-glow-carnelian {
  background: var(--gem-carnelian-radial);
  color: var(--gem-carnelian-text);
}

.gem-glow-fire-opal {
  background: var(--gem-fire-opal-radial);
  color: var(--gem-fire-opal-text);
}

.gem-glow-amber {
  background: var(--gem-amber-radial);
  color: var(--gem-amber-text);
}

.gem-glow-sunstone {
  background: var(--gem-sunstone-radial);
  color: var(--gem-sunstone-text);
}

.gem-glow-imperial-topaz {
  background: var(--gem-imperial-topaz-radial);
  color: var(--gem-imperial-topaz-text);
}

.gem-glow-aragonite {
  background: var(--gem-aragonite-radial);
  color: var(--gem-aragonite-text);
}

.gem-glow-moonstone {
  background: var(--gem-moonstone-radial);
  color: var(--gem-moonstone-text);
}

.gem-glow-pearl {
  background: var(--gem-pearl-radial);
  color: var(--gem-pearl-text);
}

.gem-glow-white-opal {
  background: var(--gem-white-opal-radial);
  color: var(--gem-white-opal-text);
}

.gem-glow-selenite {
  background: var(--gem-selenite-radial);
  color: var(--gem-selenite-text);
}

.gem-glow-howlite {
  background: var(--gem-howlite-radial);
  color: var(--gem-howlite-text);
}

.gem-glow-obsidian {
  background: var(--gem-obsidian-radial);
  color: var(--gem-obsidian-text);
}

.gem-glow-black-tourmaline {
  background: var(--gem-black-tourmaline-radial);
  color: var(--gem-black-tourmaline-text);
}

.gem-glow-onyx {
  background: var(--gem-onyx-radial);
  color: var(--gem-onyx-text);
}

.gem-glow-shungite {
  background: var(--gem-shungite-radial);
  color: var(--gem-shungite-text);
}

.gem-glow-black-opal {
  background: var(--gem-black-opal-radial);
  color: var(--gem-black-opal-text);
}

.gem-glow-nuummite {
  background: var(--gem-nuummite-radial);
  color: var(--gem-nuummite-text);
}

.gem-glow-tektite {
  background: var(--gem-tektite-radial);
  color: var(--gem-tektite-text);
}

.gem-glow-boulder-opal {
  background: var(--gem-boulder-opal-radial);
  color: var(--gem-boulder-opal-text);
}

.gem-glow-spectrolite {
  background: var(--gem-spectrolite-radial);
  color: var(--gem-spectrolite-text);
}

.gem-glow-alexandrite {
  background: var(--gem-alexandrite-radial);
  color: var(--gem-alexandrite-text);
}

.gem-glow-titanite {
  background: var(--gem-titanite-radial);
  color: var(--gem-titanite-text);
}

.gem-glow-pyrite {
  background: var(--gem-pyrite-radial);
  color: var(--gem-pyrite-text);
}

.gem-glow-gold {
  background: var(--gem-gold-radial);
  color: var(--gem-gold-text);
}

.gem-glow-hematite {
  background: var(--gem-hematite-radial);
  color: var(--gem-hematite-text);
}

.gem-glow-galena {
  background: var(--gem-galena-radial);
  color: var(--gem-galena-text);
}

.gem-glow-tigers-eye {
  background: var(--gem-tigers-eye-radial);
  color: var(--gem-tigers-eye-text);
}

.gem-glow-bronzite {
  background: var(--gem-bronzite-radial);
  color: var(--gem-bronzite-text);
}

.gem-glow-jasper {
  background: var(--gem-jasper-radial);
  color: var(--gem-jasper-text);
}

.gem-glow-smoky-quartz {
  background: var(--gem-smoky-quartz-radial);
  color: var(--gem-smoky-quartz-text);
}

.gem-glow-picture-jasper {
  background: var(--gem-picture-jasper-radial);
  color: var(--gem-picture-jasper-text);
}

.gem-glow-azurite {
  background: var(--gem-azurite-radial);
  color: var(--gem-azurite-text);
}

.gem-glow-azurite-malachite {
  background: var(--gem-azurite-malachite-radial);
  color: var(--gem-azurite-malachite-text);
}

.gem-glow-turquoise {
  background: var(--gem-turquoise-radial);
  color: var(--gem-turquoise-text);
}

.gem-glow-chrysocolla {
  background: var(--gem-chrysocolla-radial);
  color: var(--gem-chrysocolla-text);
}

.gem-glow-lapis-lazuli {
  background: var(--gem-lapis-lazuli-radial);
  color: var(--gem-lapis-lazuli-text);
}

.gem-glow-sodalite {
  background: var(--gem-sodalite-radial);
  color: var(--gem-sodalite-text);
}

.gem-glow-amazonite {
  background: var(--gem-amazonite-radial);
  color: var(--gem-amazonite-text);
}

.gem-glow-unakite {
  background: var(--gem-unakite-radial);
  color: var(--gem-unakite-text);
}

.gem-glow-bloodstone {
  background: var(--gem-bloodstone-radial);
  color: var(--gem-bloodstone-text);
}

.gem-glow-vanadinite {
  background: var(--gem-vanadinite-radial);
  color: var(--gem-vanadinite-text);
}

.gem-glow-stibnite {
  background: var(--gem-stibnite-radial);
  color: var(--gem-stibnite-text);
}

.gem-glow-ulexite {
  background: var(--gem-ulexite-radial);
  color: var(--gem-ulexite-text);
}

.gem-glow-celestite {
  background: var(--gem-celestite-radial);
  color: var(--gem-celestite-text);
}

.gem-glow-phantom-quartz {
  background: var(--gem-phantom-quartz-radial);
  color: var(--gem-phantom-quartz-text);
}

.gem-glow-rutilated-quartz {
  background: var(--gem-rutilated-quartz-radial);
  color: var(--gem-rutilated-quartz-text);
}

.gem-glow-clear-quartz {
  background: var(--gem-clear-quartz-radial);
  color: var(--gem-clear-quartz-text);
}

.gem-glow-blue-lace-agate {
  background: var(--gem-blue-lace-agate-radial);
  color: var(--gem-blue-lace-agate-text);
}

.gem-glow-moss-agate {
  background: var(--gem-moss-agate-radial);
  color: var(--gem-moss-agate-text);
}

.gem-glow-fire-agate {
  background: var(--gem-fire-agate-radial);
  color: var(--gem-fire-agate-text);
}

/* --- Border accent classes (all 86 stones) ------------------------------ */
.gem-border-amethyst {
  border-color: var(--gem-amethyst-flat);
}

.gem-border-malachite {
  border-color: var(--gem-malachite-flat);
}

.gem-border-labradorite {
  border-color: var(--gem-labradorite-flat);
}

.gem-border-aquamarine {
  border-color: var(--gem-aquamarine-flat);
}

.gem-border-sapphire {
  border-color: var(--gem-sapphire-flat);
}

.gem-border-blue-topaz {
  border-color: var(--gem-blue-topaz-flat);
}

.gem-border-tanzanite {
  border-color: var(--gem-tanzanite-flat);
}

.gem-border-blue-kyanite {
  border-color: var(--gem-blue-kyanite-flat);
}

.gem-border-larimar {
  border-color: var(--gem-larimar-flat);
}

.gem-border-apatite {
  border-color: var(--gem-apatite-flat);
}

.gem-border-sugilite {
  border-color: var(--gem-sugilite-flat);
}

.gem-border-charoite {
  border-color: var(--gem-charoite-flat);
}

.gem-border-iolite {
  border-color: var(--gem-iolite-flat);
}

.gem-border-fluorite {
  border-color: var(--gem-fluorite-flat);
}

.gem-border-lepidolite {
  border-color: var(--gem-lepidolite-flat);
}

.gem-border-emerald {
  border-color: var(--gem-emerald-flat);
}

.gem-border-jade {
  border-color: var(--gem-jade-flat);
}

.gem-border-peridot {
  border-color: var(--gem-peridot-flat);
}

.gem-border-moldavite {
  border-color: var(--gem-moldavite-flat);
}

.gem-border-prehnite {
  border-color: var(--gem-prehnite-flat);
}

.gem-border-serpentine {
  border-color: var(--gem-serpentine-flat);
}

.gem-border-green-tourmaline {
  border-color: var(--gem-green-tourmaline-flat);
}

.gem-border-ruby {
  border-color: var(--gem-ruby-flat);
}

.gem-border-garnet {
  border-color: var(--gem-garnet-flat);
}

.gem-border-rhodonite {
  border-color: var(--gem-rhodonite-flat);
}

.gem-border-rhodochrosite {
  border-color: var(--gem-rhodochrosite-flat);
}

.gem-border-spinel {
  border-color: var(--gem-spinel-flat);
}

.gem-border-kunzite {
  border-color: var(--gem-kunzite-flat);
}

.gem-border-morganite {
  border-color: var(--gem-morganite-flat);
}

.gem-border-rose-quartz {
  border-color: var(--gem-rose-quartz-flat);
}

.gem-border-pink-tourmaline {
  border-color: var(--gem-pink-tourmaline-flat);
}

.gem-border-citrine {
  border-color: var(--gem-citrine-flat);
}

.gem-border-carnelian {
  border-color: var(--gem-carnelian-flat);
}

.gem-border-fire-opal {
  border-color: var(--gem-fire-opal-flat);
}

.gem-border-amber {
  border-color: var(--gem-amber-flat);
}

.gem-border-sunstone {
  border-color: var(--gem-sunstone-flat);
}

.gem-border-imperial-topaz {
  border-color: var(--gem-imperial-topaz-flat);
}

.gem-border-aragonite {
  border-color: var(--gem-aragonite-flat);
}

.gem-border-moonstone {
  border-color: var(--gem-moonstone-flat);
}

.gem-border-pearl {
  border-color: var(--gem-pearl-flat);
}

.gem-border-white-opal {
  border-color: var(--gem-white-opal-flat);
}

.gem-border-selenite {
  border-color: var(--gem-selenite-flat);
}

.gem-border-howlite {
  border-color: var(--gem-howlite-flat);
}

.gem-border-obsidian {
  border-color: var(--gem-obsidian-flat);
}

.gem-border-black-tourmaline {
  border-color: var(--gem-black-tourmaline-flat);
}

.gem-border-onyx {
  border-color: var(--gem-onyx-flat);
}

.gem-border-shungite {
  border-color: var(--gem-shungite-flat);
}

.gem-border-black-opal {
  border-color: var(--gem-black-opal-flat);
}

.gem-border-nuummite {
  border-color: var(--gem-nuummite-flat);
}

.gem-border-tektite {
  border-color: var(--gem-tektite-flat);
}

.gem-border-boulder-opal {
  border-color: var(--gem-boulder-opal-flat);
}

.gem-border-spectrolite {
  border-color: var(--gem-spectrolite-flat);
}

.gem-border-alexandrite {
  border-color: var(--gem-alexandrite-flat);
}

.gem-border-titanite {
  border-color: var(--gem-titanite-flat);
}

.gem-border-pyrite {
  border-color: var(--gem-pyrite-flat);
}

.gem-border-gold {
  border-color: var(--gem-gold-flat);
}

.gem-border-hematite {
  border-color: var(--gem-hematite-flat);
}

.gem-border-galena {
  border-color: var(--gem-galena-flat);
}

.gem-border-tigers-eye {
  border-color: var(--gem-tigers-eye-flat);
}

.gem-border-bronzite {
  border-color: var(--gem-bronzite-flat);
}

.gem-border-jasper {
  border-color: var(--gem-jasper-flat);
}

.gem-border-smoky-quartz {
  border-color: var(--gem-smoky-quartz-flat);
}

.gem-border-picture-jasper {
  border-color: var(--gem-picture-jasper-flat);
}

.gem-border-azurite {
  border-color: var(--gem-azurite-flat);
}

.gem-border-azurite-malachite {
  border-color: var(--gem-azurite-malachite-flat);
}

.gem-border-turquoise {
  border-color: var(--gem-turquoise-flat);
}

.gem-border-chrysocolla {
  border-color: var(--gem-chrysocolla-flat);
}

.gem-border-lapis-lazuli {
  border-color: var(--gem-lapis-lazuli-flat);
}

.gem-border-sodalite {
  border-color: var(--gem-sodalite-flat);
}

.gem-border-amazonite {
  border-color: var(--gem-amazonite-flat);
}

.gem-border-unakite {
  border-color: var(--gem-unakite-flat);
}

.gem-border-bloodstone {
  border-color: var(--gem-bloodstone-flat);
}

.gem-border-vanadinite {
  border-color: var(--gem-vanadinite-flat);
}

.gem-border-stibnite {
  border-color: var(--gem-stibnite-flat);
}

.gem-border-ulexite {
  border-color: var(--gem-ulexite-flat);
}

.gem-border-celestite {
  border-color: var(--gem-celestite-flat);
}

.gem-border-phantom-quartz {
  border-color: var(--gem-phantom-quartz-flat);
}

.gem-border-rutilated-quartz {
  border-color: var(--gem-rutilated-quartz-flat);
}

.gem-border-clear-quartz {
  border-color: var(--gem-clear-quartz-flat);
}

.gem-border-blue-lace-agate {
  border-color: var(--gem-blue-lace-agate-flat);
}

.gem-border-moss-agate {
  border-color: var(--gem-moss-agate-flat);
}

.gem-border-fire-agate {
  border-color: var(--gem-fire-agate-flat);
}

/* --- Text color classes (all 86 stones) --------------------------------- */
.gem-text-amethyst {
  color: var(--gem-amethyst-flat);
}

.gem-text-malachite {
  color: var(--gem-malachite-flat);
}

.gem-text-labradorite {
  color: var(--gem-labradorite-flat);
}

.gem-text-aquamarine {
  color: var(--gem-aquamarine-flat);
}

.gem-text-sapphire {
  color: var(--gem-sapphire-flat);
}

.gem-text-blue-topaz {
  color: var(--gem-blue-topaz-flat);
}

.gem-text-tanzanite {
  color: var(--gem-tanzanite-flat);
}

.gem-text-blue-kyanite {
  color: var(--gem-blue-kyanite-flat);
}

.gem-text-larimar {
  color: var(--gem-larimar-flat);
}

.gem-text-apatite {
  color: var(--gem-apatite-flat);
}

.gem-text-sugilite {
  color: var(--gem-sugilite-flat);
}

.gem-text-charoite {
  color: var(--gem-charoite-flat);
}

.gem-text-iolite {
  color: var(--gem-iolite-flat);
}

.gem-text-fluorite {
  color: var(--gem-fluorite-flat);
}

.gem-text-lepidolite {
  color: var(--gem-lepidolite-flat);
}

.gem-text-emerald {
  color: var(--gem-emerald-flat);
}

.gem-text-jade {
  color: var(--gem-jade-flat);
}

.gem-text-peridot {
  color: var(--gem-peridot-flat);
}

.gem-text-moldavite {
  color: var(--gem-moldavite-flat);
}

.gem-text-prehnite {
  color: var(--gem-prehnite-flat);
}

.gem-text-serpentine {
  color: var(--gem-serpentine-flat);
}

.gem-text-green-tourmaline {
  color: var(--gem-green-tourmaline-flat);
}

.gem-text-ruby {
  color: var(--gem-ruby-flat);
}

.gem-text-garnet {
  color: var(--gem-garnet-flat);
}

.gem-text-rhodonite {
  color: var(--gem-rhodonite-flat);
}

.gem-text-rhodochrosite {
  color: var(--gem-rhodochrosite-flat);
}

.gem-text-spinel {
  color: var(--gem-spinel-flat);
}

.gem-text-kunzite {
  color: var(--gem-kunzite-flat);
}

.gem-text-morganite {
  color: var(--gem-morganite-flat);
}

.gem-text-rose-quartz {
  color: var(--gem-rose-quartz-flat);
}

.gem-text-pink-tourmaline {
  color: var(--gem-pink-tourmaline-flat);
}

.gem-text-citrine {
  color: var(--gem-citrine-flat);
}

.gem-text-carnelian {
  color: var(--gem-carnelian-flat);
}

.gem-text-fire-opal {
  color: var(--gem-fire-opal-flat);
}

.gem-text-amber {
  color: var(--gem-amber-flat);
}

.gem-text-sunstone {
  color: var(--gem-sunstone-flat);
}

.gem-text-imperial-topaz {
  color: var(--gem-imperial-topaz-flat);
}

.gem-text-aragonite {
  color: var(--gem-aragonite-flat);
}

.gem-text-moonstone {
  color: var(--gem-moonstone-flat);
}

.gem-text-pearl {
  color: var(--gem-pearl-flat);
}

.gem-text-white-opal {
  color: var(--gem-white-opal-flat);
}

.gem-text-selenite {
  color: var(--gem-selenite-flat);
}

.gem-text-howlite {
  color: var(--gem-howlite-flat);
}

.gem-text-obsidian {
  color: var(--gem-obsidian-flat);
}

.gem-text-black-tourmaline {
  color: var(--gem-black-tourmaline-flat);
}

.gem-text-onyx {
  color: var(--gem-onyx-flat);
}

.gem-text-shungite {
  color: var(--gem-shungite-flat);
}

.gem-text-black-opal {
  color: var(--gem-black-opal-flat);
}

.gem-text-nuummite {
  color: var(--gem-nuummite-flat);
}

.gem-text-tektite {
  color: var(--gem-tektite-flat);
}

.gem-text-boulder-opal {
  color: var(--gem-boulder-opal-flat);
}

.gem-text-spectrolite {
  color: var(--gem-spectrolite-flat);
}

.gem-text-alexandrite {
  color: var(--gem-alexandrite-flat);
}

.gem-text-titanite {
  color: var(--gem-titanite-flat);
}

.gem-text-pyrite {
  color: var(--gem-pyrite-flat);
}

.gem-text-gold {
  color: var(--gem-gold-flat);
}

.gem-text-hematite {
  color: var(--gem-hematite-flat);
}

.gem-text-galena {
  color: var(--gem-galena-flat);
}

.gem-text-tigers-eye {
  color: var(--gem-tigers-eye-flat);
}

.gem-text-bronzite {
  color: var(--gem-bronzite-flat);
}

.gem-text-jasper {
  color: var(--gem-jasper-flat);
}

.gem-text-smoky-quartz {
  color: var(--gem-smoky-quartz-flat);
}

.gem-text-picture-jasper {
  color: var(--gem-picture-jasper-flat);
}

.gem-text-azurite {
  color: var(--gem-azurite-flat);
}

.gem-text-azurite-malachite {
  color: var(--gem-azurite-malachite-flat);
}

.gem-text-turquoise {
  color: var(--gem-turquoise-flat);
}

.gem-text-chrysocolla {
  color: var(--gem-chrysocolla-flat);
}

.gem-text-lapis-lazuli {
  color: var(--gem-lapis-lazuli-flat);
}

.gem-text-sodalite {
  color: var(--gem-sodalite-flat);
}

.gem-text-amazonite {
  color: var(--gem-amazonite-flat);
}

.gem-text-unakite {
  color: var(--gem-unakite-flat);
}

.gem-text-bloodstone {
  color: var(--gem-bloodstone-flat);
}

.gem-text-vanadinite {
  color: var(--gem-vanadinite-flat);
}

.gem-text-stibnite {
  color: var(--gem-stibnite-flat);
}

.gem-text-ulexite {
  color: var(--gem-ulexite-flat);
}

.gem-text-celestite {
  color: var(--gem-celestite-flat);
}

.gem-text-phantom-quartz {
  color: var(--gem-phantom-quartz-flat);
}

.gem-text-rutilated-quartz {
  color: var(--gem-rutilated-quartz-flat);
}

.gem-text-clear-quartz {
  color: var(--gem-clear-quartz-flat);
}

.gem-text-blue-lace-agate {
  color: var(--gem-blue-lace-agate-flat);
}

.gem-text-moss-agate {
  color: var(--gem-moss-agate-flat);
}

.gem-text-fire-agate {
  color: var(--gem-fire-agate-flat);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOX-SHADOW GLOW UTILITIES (all 86 stones)
   Usage: <div class="gem-shadow-amethyst">
   ═══════════════════════════════════════════════════════════════════════════ */

.gem-shadow-amethyst {
  box-shadow: 0 0 24px 4px rgb(155 89 182 / 50%);
}

.gem-shadow-malachite {
  box-shadow: 0 0 24px 4px rgb(58 175 111 / 50%);
}

.gem-shadow-labradorite {
  box-shadow: 0 0 24px 4px rgb(74 144 196 / 50%);
}

.gem-shadow-aquamarine {
  box-shadow: 0 0 24px 4px rgb(61 159 181 / 45%);
}

.gem-shadow-sapphire {
  box-shadow: 0 0 24px 4px rgb(31 58 153 / 60%);
}

.gem-shadow-blue-topaz {
  box-shadow: 0 0 24px 4px rgb(2 136 209 / 50%);
}

.gem-shadow-tanzanite {
  box-shadow: 0 0 24px 4px rgb(74 45 181 / 55%);
}

.gem-shadow-blue-kyanite {
  box-shadow: 0 0 20px 4px rgb(77 130 188 / 45%);
}

.gem-shadow-larimar {
  box-shadow: 0 0 20px 4px rgb(58 174 196 / 45%);
}

.gem-shadow-apatite {
  box-shadow: 0 0 24px 4px rgb(0 168 150 / 50%);
}

.gem-shadow-sugilite {
  box-shadow: 0 0 24px 4px rgb(123 31 162 / 55%);
}

.gem-shadow-charoite {
  box-shadow: 0 0 28px 6px rgb(139 47 192 / 45%);
}

.gem-shadow-iolite {
  box-shadow: 0 0 20px 4px rgb(80 63 160 / 50%);
}

.gem-shadow-fluorite {
  box-shadow: 0 0 24px 4px rgb(122 80 192 / 45%);
}

.gem-shadow-lepidolite {
  box-shadow: 0 0 20px 4px rgb(168 126 192 / 40%);
}

.gem-shadow-emerald {
  box-shadow: 0 0 24px 4px rgb(10 104 64 / 60%);
}

.gem-shadow-jade {
  box-shadow: 0 0 20px 4px rgb(106 158 120 / 45%);
}

.gem-shadow-peridot {
  box-shadow: 0 0 24px 4px rgb(122 170 0 / 50%);
}

.gem-shadow-moldavite {
  box-shadow: 0 0 28px 6px rgb(30 96 53 / 55%);
}

.gem-shadow-prehnite {
  box-shadow: 0 0 20px 4px rgb(140 191 112 / 40%);
}

.gem-shadow-serpentine {
  box-shadow: 0 0 20px 4px rgb(90 104 0 / 45%);
}

.gem-shadow-green-tourmaline {
  box-shadow: 0 0 24px 4px rgb(0 128 72 / 55%);
}

.gem-shadow-ruby {
  box-shadow: 0 0 24px 4px rgb(155 0 32 / 60%);
}

.gem-shadow-garnet {
  box-shadow: 0 0 24px 4px rgb(122 24 24 / 55%);
}

.gem-shadow-rhodonite {
  box-shadow: 0 0 20px 4px rgb(155 56 88 / 45%);
}

.gem-shadow-rhodochrosite {
  box-shadow: 0 0 24px 4px rgb(216 88 128 / 45%);
}

.gem-shadow-spinel {
  box-shadow: 0 0 24px 4px rgb(192 0 96 / 50%);
}

.gem-shadow-kunzite {
  box-shadow: 0 0 20px 4px rgb(200 120 168 / 40%);
}

.gem-shadow-morganite {
  box-shadow: 0 0 20px 4px rgb(224 152 136 / 40%);
}

.gem-shadow-rose-quartz {
  box-shadow: 0 0 20px 4px rgb(232 152 168 / 40%);
}

.gem-shadow-pink-tourmaline {
  box-shadow: 0 0 24px 4px rgb(200 40 120 / 50%);
}

.gem-shadow-citrine {
  box-shadow: 0 0 24px 4px rgb(216 156 0 / 55%);
}

.gem-shadow-carnelian {
  box-shadow: 0 0 24px 4px rgb(200 48 0 / 55%);
}

.gem-shadow-fire-opal {
  box-shadow: 0 0 28px 6px rgb(240 112 0 / 55%);
}

.gem-shadow-amber {
  box-shadow: 0 0 24px 4px rgb(200 128 0 / 50%);
}

.gem-shadow-sunstone {
  box-shadow: 0 0 24px 4px rgb(224 120 0 / 50%);
}

.gem-shadow-imperial-topaz {
  box-shadow: 0 0 24px 4px rgb(208 128 32 / 55%);
}

.gem-shadow-aragonite {
  box-shadow: 0 0 18px 4px rgb(212 160 112 / 40%);
}

.gem-shadow-moonstone {
  box-shadow: 0 0 24px 8px rgb(168 184 216 / 45%);
}

.gem-shadow-pearl {
  box-shadow: 0 0 16px 4px rgb(236 232 224 / 50%);
}

.gem-shadow-white-opal {
  box-shadow: 0 0 24px 6px rgb(224 216 248 / 45%);
}

.gem-shadow-selenite {
  box-shadow: 0 0 20px 6px rgb(238 238 232 / 55%);
}

.gem-shadow-howlite {
  box-shadow: 0 0 16px 4px rgb(224 224 224 / 50%);
}

.gem-shadow-obsidian {
  box-shadow: 0 0 24px 4px rgb(0 0 0 / 80%);
}

.gem-shadow-black-tourmaline {
  box-shadow: 0 0 20px 4px rgb(17 17 24 / 85%);
}

.gem-shadow-onyx {
  box-shadow: 0 0 20px 4px rgb(24 24 24 / 80%);
}

.gem-shadow-shungite {
  box-shadow: 0 0 20px 4px rgb(30 30 30 / 80%);
}

.gem-shadow-black-opal {
  box-shadow: 0 0 28px 6px rgb(96 64 255 / 40%);
}

.gem-shadow-nuummite {
  box-shadow: 0 0 28px 4px rgb(192 168 48 / 35%);
}

.gem-shadow-tektite {
  box-shadow: 0 0 16px 4px rgb(16 16 16 / 85%);
}

.gem-shadow-boulder-opal {
  box-shadow: 0 0 24px 4px rgb(112 216 192 / 35%);
}

.gem-shadow-spectrolite {
  box-shadow: 0 0 32px 8px rgb(0 240 224 / 40%);
}

.gem-shadow-alexandrite {
  box-shadow: 0 0 24px 4px rgb(40 192 96 / 45%);
}

.gem-shadow-titanite {
  box-shadow: 0 0 24px 4px rgb(122 156 0 / 50%);
}

.gem-shadow-pyrite {
  box-shadow: 0 0 20px 4px rgb(184 144 48 / 45%);
}

.gem-shadow-gold {
  box-shadow: 0 0 24px 4px rgb(212 160 32 / 55%);
}

.gem-shadow-hematite {
  box-shadow: 0 0 16px 4px rgb(72 72 72 / 60%);
}

.gem-shadow-galena {
  box-shadow: 0 0 16px 4px rgb(64 64 96 / 55%);
}

.gem-shadow-tigers-eye {
  box-shadow: 0 0 20px 4px rgb(138 80 16 / 50%);
}

.gem-shadow-bronzite {
  box-shadow: 0 0 20px 4px rgb(106 72 24 / 50%);
}

.gem-shadow-jasper {
  box-shadow: 0 0 20px 4px rgb(154 56 16 / 50%);
}

.gem-shadow-smoky-quartz {
  box-shadow: 0 0 20px 4px rgb(80 64 48 / 55%);
}

.gem-shadow-picture-jasper {
  box-shadow: 0 0 18px 4px rgb(176 128 80 / 40%);
}

.gem-shadow-azurite {
  box-shadow: 0 0 24px 4px rgb(8 64 192 / 55%);
}

.gem-shadow-azurite-malachite {
  box-shadow: 0 0 24px 4px rgb(12 88 144 / 50%);
}

.gem-shadow-turquoise {
  box-shadow: 0 0 24px 4px rgb(0 168 184 / 50%);
}

.gem-shadow-chrysocolla {
  box-shadow: 0 0 24px 4px rgb(0 152 176 / 50%);
}

.gem-shadow-lapis-lazuli {
  box-shadow: 0 0 24px 4px rgb(0 48 176 / 55%);
}

.gem-shadow-sodalite {
  box-shadow: 0 0 24px 4px rgb(0 48 168 / 55%);
}

.gem-shadow-amazonite {
  box-shadow: 0 0 20px 4px rgb(90 170 152 / 45%);
}

.gem-shadow-unakite {
  box-shadow: 0 0 18px 4px rgb(154 112 80 / 40%);
}

.gem-shadow-bloodstone {
  box-shadow: 0 0 20px 4px rgb(26 80 48 / 55%);
}

.gem-shadow-vanadinite {
  box-shadow: 0 0 24px 4px rgb(192 56 0 / 55%);
}

.gem-shadow-stibnite {
  box-shadow: 0 0 18px 4px rgb(48 48 80 / 55%);
}

.gem-shadow-ulexite {
  box-shadow: 0 0 16px 6px rgb(224 224 240 / 50%);
}

.gem-shadow-celestite {
  box-shadow: 0 0 20px 4px rgb(144 184 224 / 45%);
}

.gem-shadow-phantom-quartz {
  box-shadow: 0 0 18px 4px rgb(192 192 216 / 45%);
}

.gem-shadow-rutilated-quartz {
  box-shadow: 0 0 20px 4px rgb(208 200 168 / 45%);
}

.gem-shadow-clear-quartz {
  box-shadow: 0 0 16px 4px rgb(232 232 240 / 50%);
}

.gem-shadow-blue-lace-agate {
  box-shadow: 0 0 20px 4px rgb(168 208 236 / 45%);
}

.gem-shadow-moss-agate {
  box-shadow: 0 0 18px 4px rgb(168 200 160 / 40%);
}

.gem-shadow-fire-agate {
  box-shadow: 0 0 24px 4px rgb(168 64 24 / 50%);
}

/* ─── Focus/ring utilities (for interactive element focus states) ───────── */
.gem-ring-amethyst {
  outline: 2px solid var(--gem-amethyst-flat);
  outline-offset: 2px;
}

.gem-ring-malachite {
  outline: 2px solid var(--gem-malachite-flat);
  outline-offset: 2px;
}

.gem-ring-sapphire {
  outline: 2px solid var(--gem-sapphire-flat);
  outline-offset: 2px;
}

.gem-ring-ruby {
  outline: 2px solid var(--gem-ruby-flat);
  outline-offset: 2px;
}

.gem-ring-emerald {
  outline: 2px solid var(--gem-emerald-flat);
  outline-offset: 2px;
}

.gem-ring-gold {
  outline: 2px solid var(--gem-gold-flat);
  outline-offset: 2px;
}

.gem-ring-labradorite {
  outline: 2px solid var(--gem-labradorite-flat);
  outline-offset: 2px;
}

.gem-ring-turquoise {
  outline: 2px solid var(--gem-turquoise-flat);
  outline-offset: 2px;
}

.gem-ring-fire-opal {
  outline: 2px solid var(--gem-fire-opal-flat);
  outline-offset: 2px;
}

.gem-ring-tanzanite {
  outline: 2px solid var(--gem-tanzanite-flat);
  outline-offset: 2px;
}

.gem-ring-moonstone {
  outline: 2px solid var(--gem-moonstone-flat);
  outline-offset: 2px;
}

.gem-ring-obsidian {
  outline: 2px solid var(--gem-obsidian-flat);
  outline-offset: 2px;
}

/* ─── Opacity variants for subtle layering ──────────────────────────────── */
/* stylelint-disable selector-class-pattern */
.gem-bg-amethyst\/50 {
  background: var(--gem-amethyst);
  opacity: 0.5;
}

.gem-bg-labradorite\/50 {
  background: var(--gem-labradorite);
  opacity: 0.5;
}

.gem-bg-obsidian\/80 {
  background: var(--gem-obsidian);
  opacity: 0.8;
}

.gem-bg-smoky-quartz\/70 {
  background: var(--gem-smoky-quartz);
  opacity: 0.7;
}

.gem-bg-moonstone\/60 {
  background: var(--gem-moonstone);
  opacity: 0.6;
}
/* stylelint-enable selector-class-pattern */

/* ═══════════════════════════════════════════════════════════════════════════
   PRESET COMPONENT THEMES
   Pre-assembled palettes for common UI patterns.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero / landing backdrop — labradorite night sky */
.theme-hero-labradorite {
  background: var(--gem-labradorite);
  color: var(--gem-labradorite-text);
  box-shadow: inset 0 0 120px 40px rgb(45 63 110 / 60%);
}

/* Premium / enterprise card — obsidian base + gold border */
.theme-premium-obsidian {
  background: var(--gem-obsidian);
  border: 1px solid var(--gem-gold-flat);
  color: var(--gem-obsidian-text);
  box-shadow: 0 0 32px 4px rgb(212 160 32 / 20%);
}

/* Danger / alert — ruby */
.theme-alert-ruby {
  background: var(--gem-ruby);
  color: var(--gem-ruby-text);
  box-shadow: 0 0 20px 4px rgb(155 0 32 / 40%);
}

/* Success / confirm — emerald */
.theme-success-emerald {
  background: var(--gem-emerald);
  color: var(--gem-emerald-text);
  box-shadow: 0 0 20px 4px rgb(10 104 64 / 40%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC STATE SYSTEM — Contrast-Optimized
   Maps gemstones to UI states with guaranteed text contrast.
   Usage: class="gem-state-success" or CSS var(--gem-state-success)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── State: Success (Emerald — prosperity, confirmed) ───────────────── */
  --gem-state-success: var(--gem-emerald);
  --gem-state-success-radial: var(--gem-emerald-radial);
  --gem-state-success-flat: var(--gem-emerald-flat);
  --gem-state-success-text: var(--gem-emerald-text);
  --gem-state-success-subtle: color-mix(in srgb, var(--gem-emerald-flat) 10%, transparent);
  --gem-state-success-border: color-mix(in srgb, var(--gem-emerald-flat) 30%, transparent);

  /* ── State: Danger (Ruby — urgency, critical) ───────────────────────── */
  --gem-state-danger: var(--gem-ruby);
  --gem-state-danger-radial: var(--gem-ruby-radial);
  --gem-state-danger-flat: var(--gem-ruby-flat);
  --gem-state-danger-text: var(--gem-ruby-text);
  --gem-state-danger-subtle: color-mix(in srgb, var(--gem-ruby-flat) 10%, transparent);
  --gem-state-danger-border: color-mix(in srgb, var(--gem-ruby-flat) 30%, transparent);

  /* ── State: Warning (Citrine — attention, abundance) ────────────────── */
  --gem-state-warning: var(--gem-citrine);
  --gem-state-warning-radial: var(--gem-citrine-radial);
  --gem-state-warning-flat: var(--gem-citrine-flat);
  --gem-state-warning-text: var(--gem-citrine-text);
  --gem-state-warning-subtle: color-mix(in srgb, var(--gem-citrine-flat) 10%, transparent);
  --gem-state-warning-border: color-mix(in srgb, var(--gem-citrine-flat) 30%, transparent);

  /* ── State: Info (Blue Topaz — clarity, honesty) ────────────────────── */
  --gem-state-info: var(--gem-blue-topaz);
  --gem-state-info-radial: var(--gem-blue-topaz-radial);
  --gem-state-info-flat: var(--gem-blue-topaz-flat);
  --gem-state-info-text: var(--gem-blue-topaz-text);
  --gem-state-info-subtle: color-mix(in srgb, var(--gem-blue-topaz-flat) 10%, transparent);
  --gem-state-info-border: color-mix(in srgb, var(--gem-blue-topaz-flat) 30%, transparent);

  /* ── State: Premium (Gold Native — true wealth, authority) ──────────── */
  --gem-state-premium: var(--gem-gold);
  --gem-state-premium-radial: var(--gem-gold-radial);
  --gem-state-premium-flat: var(--gem-gold-flat);
  --gem-state-premium-text: var(--gem-gold-text);
  --gem-state-premium-subtle: color-mix(in srgb, var(--gem-gold-flat) 10%, transparent);
  --gem-state-premium-border: color-mix(in srgb, var(--gem-gold-flat) 30%, transparent);

  /* ── State: Trust (Sapphire — loyalty, corporate authority) ─────────── */
  --gem-state-trust: var(--gem-sapphire);
  --gem-state-trust-radial: var(--gem-sapphire-radial);
  --gem-state-trust-flat: var(--gem-sapphire-flat);
  --gem-state-trust-text: var(--gem-sapphire-text);
  --gem-state-trust-subtle: color-mix(in srgb, var(--gem-sapphire-flat) 8%, transparent);
  --gem-state-trust-border: color-mix(in srgb, var(--gem-sapphire-flat) 20%, transparent);

  /* ── State: Exclusive (Tanzanite — rarity, luxury) ──────────────────── */
  --gem-state-exclusive: var(--gem-tanzanite);
  --gem-state-exclusive-radial: var(--gem-tanzanite-radial);
  --gem-state-exclusive-flat: var(--gem-tanzanite-flat);
  --gem-state-exclusive-text: var(--gem-tanzanite-text);
  --gem-state-exclusive-subtle: color-mix(in srgb, var(--gem-tanzanite-flat) 10%, transparent);
  --gem-state-exclusive-border: color-mix(in srgb, var(--gem-tanzanite-flat) 30%, transparent);

  /* ── Surface: Dark depth (Labradorite) ──────────────────────────────── */
  --gem-surface-dark: var(--gem-labradorite);
  --gem-surface-dark-flat: var(--gem-labradorite-flat);
  --gem-surface-dark-text: var(--gem-labradorite-text);

  /* ── Surface: Deepest (Obsidian) ────────────────────────────────────── */
  --gem-surface-deep: var(--gem-obsidian);
  --gem-surface-deep-flat: var(--gem-obsidian-flat);
  --gem-surface-deep-text: var(--gem-obsidian-text);

  /* ── Surface: Light formal (Pearl) ──────────────────────────────────── */
  --gem-surface-light: var(--gem-pearl);
  --gem-surface-light-flat: var(--gem-pearl-flat);
  --gem-surface-light-text: var(--gem-pearl-text);

  /* ── Surface: Clean (Selenite) ──────────────────────────────────────── */
  --gem-surface-clean: var(--gem-selenite);
  --gem-surface-clean-flat: var(--gem-selenite-flat);
  --gem-surface-clean-text: var(--gem-selenite-text);

  /* ── Surface: Glass/hover (Moonstone) ───────────────────────────────── */
  --gem-surface-glass: var(--gem-moonstone);
  --gem-surface-glass-flat: var(--gem-moonstone-flat);
  --gem-surface-glass-text: var(--gem-moonstone-text);
}

/* ── Semantic State Classes ───────────────────────────────────────────── */

/* Solid state backgrounds with correct contrast text */
.gem-state-success {
  background: var(--gem-state-success);
  color: var(--gem-state-success-text);
}

.gem-state-danger {
  background: var(--gem-state-danger);
  color: var(--gem-state-danger-text);
}

.gem-state-warning {
  background: var(--gem-state-warning);
  color: var(--gem-state-warning-text);
}

.gem-state-info {
  background: var(--gem-state-info);
  color: var(--gem-state-info-text);
}

.gem-state-premium {
  background: var(--gem-state-premium);
  color: var(--gem-state-premium-text);
}

.gem-state-trust {
  background: var(--gem-state-trust);
  color: var(--gem-state-trust-text);
}

/* Subtle state backgrounds (tinted, for inline alerts/badges) */
.gem-subtle-success {
  background: var(--gem-state-success-subtle);
  color: var(--gem-state-success-flat);
  border: 1px solid var(--gem-state-success-border);
}

.gem-subtle-danger {
  background: var(--gem-state-danger-subtle);
  color: var(--gem-state-danger-flat);
  border: 1px solid var(--gem-state-danger-border);
}

.gem-subtle-warning {
  background: var(--gem-state-warning-subtle);
  color: var(--gem-state-warning-flat);
  border: 1px solid var(--gem-state-warning-border);
}

.gem-subtle-info {
  background: var(--gem-state-info-subtle);
  color: var(--gem-state-info-flat);
  border: 1px solid var(--gem-state-info-border);
}

.gem-subtle-premium {
  background: var(--gem-state-premium-subtle);
  color: var(--gem-state-premium-flat);
  border: 1px solid var(--gem-state-premium-border);
}

.gem-subtle-trust {
  background: var(--gem-state-trust-subtle);
  color: var(--gem-state-trust-flat);
  border: 1px solid var(--gem-state-trust-border);
}

/* ── Gemstone Icon Pill — small circular icon backgrounds ─────────────── */
.gem-icon-sapphire {
  background: var(--gem-sapphire);
  color: var(--gem-sapphire-text);
}

.gem-icon-emerald {
  background: var(--gem-emerald);
  color: var(--gem-emerald-text);
}

.gem-icon-ruby {
  background: var(--gem-ruby);
  color: var(--gem-ruby-text);
}

.gem-icon-gold {
  background: var(--gem-gold);
  color: var(--gem-gold-text);
}

.gem-icon-tanzanite {
  background: var(--gem-tanzanite);
  color: var(--gem-tanzanite-text);
}

.gem-icon-amethyst {
  background: var(--gem-amethyst);
  color: var(--gem-amethyst-text);
}

.gem-icon-labradorite {
  background: var(--gem-labradorite);
  color: var(--gem-labradorite-text);
}

.gem-icon-obsidian {
  background: var(--gem-obsidian);
  color: var(--gem-obsidian-text);
}

.gem-icon-moonstone {
  background: var(--gem-moonstone);
  color: var(--gem-moonstone-text);
}

.gem-icon-blue-topaz {
  background: var(--gem-blue-topaz);
  color: var(--gem-blue-topaz-text);
}

.gem-icon-citrine {
  background: var(--gem-citrine);
  color: var(--gem-citrine-text);
}

.gem-icon-malachite {
  background: var(--gem-malachite);
  color: var(--gem-malachite-text);
}

.gem-icon-carnelian {
  background: var(--gem-carnelian);
  color: var(--gem-carnelian-text);
}

.gem-icon-turquoise {
  background: var(--gem-turquoise);
  color: var(--gem-turquoise-text);
}

.gem-icon-lapis-lazuli {
  background: var(--gem-lapis-lazuli);
  color: var(--gem-lapis-lazuli-text);
}

.gem-icon-nuummite {
  background: var(--gem-nuummite);
  color: var(--gem-nuummite-text);
}

/* ── Badge/Chip Variants — rounded pill states ────────────────────────── */
.gem-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full, 999px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gem-badge--free {
  background: var(--gem-selenite);
  color: var(--gem-selenite-text);
  border: 1px solid var(--gem-howlite-flat);
}

.gem-badge--starter {
  background: var(--gem-blue-topaz);
  color: var(--gem-blue-topaz-text);
}

.gem-badge--core {
  background: var(--gem-sapphire);
  color: var(--gem-sapphire-text);
}

.gem-badge--pro,
.gem-badge--complete {
  background: var(--gem-gold);
  color: var(--gem-gold-text);
}

.gem-badge--enterprise {
  background: var(--gem-nuummite);
  color: var(--gem-nuummite-text);
}

.gem-badge--new {
  background: var(--gem-peridot);
  color: var(--gem-peridot-text);
}

.gem-badge--beta {
  background: var(--gem-tanzanite);
  color: var(--gem-tanzanite-text);
}

.gem-badge--verified {
  background: var(--gem-emerald);
  color: var(--gem-emerald-text);
}

.gem-badge--urgent {
  background: var(--gem-ruby);
  color: var(--gem-ruby-text);
}

.gem-badge--archived {
  background: var(--gem-smoky-quartz);
  color: var(--gem-smoky-quartz-text);
}

/* ── Glass-Over-Gemstone — frosted glass layered on gemstone base ─────── */
.gem-glass {
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 60%);
  box-shadow:
    0 4px 24px rgb(0 0 0 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
}

.gem-glass--dark {
  background: rgb(14 21 40 / 55%);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow:
    0 4px 24px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

/* ── Pricing Tier Card Borders — gemstone-coded edge glow ─────────────── */
.gem-tier-free {
  border-left: 3px solid var(--gem-howlite-flat);
}

.gem-tier-starter {
  border-left: 3px solid var(--gem-blue-topaz-flat);
}

.gem-tier-core {
  border-left: 3px solid var(--gem-sapphire-flat);
}

.gem-tier-complete {
  border-left: 3px solid var(--gem-gold-flat);
}

.gem-tier-enterprise {
  border-left: 3px solid var(--gem-nuummite-flat);
  box-shadow: var(--shadow-glow-accent, 0 0 32px rgb(200 140 0 / 18%));
}

/* Calm / help — aquamarine */
.theme-calm-aquamarine {
  background: var(--gem-aquamarine);
  color: var(--gem-aquamarine-text);
}

/* Accent CTA — fire opal */
.theme-cta-fire-opal {
  background: var(--gem-fire-opal);
  color: var(--gem-fire-opal-text);
  box-shadow: 0 4px 24px rgb(224 104 0 / 45%);
}

/* Mystical / spiritual — charoite */
.theme-mystic-charoite {
  background: var(--gem-charoite);
  color: var(--gem-charoite-text);
  box-shadow: 0 0 40px 8px rgb(139 47 192 / 35%);
}

/* Sidebar / nav — sodalite navy */
.theme-nav-sodalite {
  background: var(--gem-sodalite);
  color: var(--gem-sodalite-text);
  border-right: 2px solid var(--gem-lapis-lazuli-flat);
}

/* Testimonial / quote card — moonstone */
.theme-quote-moonstone {
  background: var(--gem-moonstone);
  color: var(--gem-moonstone-text);
  border-left: 4px solid var(--gem-labradorite-flat);
}

/* Data table header — lapis lazuli + gold */
.theme-table-lapis {
  background: var(--gem-lapis-lazuli);
  color: var(--gem-lapis-lazuli-text);
  border-bottom: 2px solid var(--gem-gold-flat);
}

/* ── Extended Preset Themes ────────────────────────────────────────────── */

/* Danger / warning banner — vanadinite (deep orange-red urgency) */
.theme-warning-vanadinite {
  background: var(--gem-vanadinite);
  color: var(--gem-vanadinite-text);
  box-shadow: 0 0 20px 4px rgb(192 56 0 / 40%);
}

/* Enterprise executive card — nuummite + gold */
.theme-enterprise-nuummite {
  background: var(--gem-nuummite);
  border: 1px solid var(--gem-gold-flat);
  color: var(--gem-nuummite-text);
  box-shadow: 0 0 40px 6px rgb(192 168 48 / 25%);
}

/* Security / protected feature — black tourmaline */
.theme-security-tourmaline {
  background: var(--gem-black-tourmaline);
  color: var(--gem-black-tourmaline-text);
  border-left: 3px solid var(--gem-azurite-flat);
  box-shadow: inset 0 0 40px rgb(17 17 24 / 50%);
}

/* Onboarding / welcome — morganite warmth */
.theme-welcome-morganite {
  background: var(--gem-morganite);
  color: var(--gem-morganite-text);
  border: 1px solid var(--gem-rose-quartz-flat);
}

/* Calm loading / skeleton state — lepidolite */
.theme-loading-lepidolite {
  background: var(--gem-lepidolite);
  color: var(--gem-lepidolite-text);
  animation: gem-pulse 2s ease-in-out infinite;
}

/* Info / educational callout — chrysocolla */
.theme-info-chrysocolla {
  background: var(--gem-chrysocolla);
  color: var(--gem-chrysocolla-text);
  border-left: 4px solid var(--gem-azurite-flat);
}

/* Launch / reveal moment — spectrolite full spectrum */
.theme-launch-spectrolite {
  background: var(--gem-spectrolite);
  color: var(--gem-spectrolite-text);
  box-shadow:
    0 0 60px 12px rgb(0 240 224 / 30%),
    0 0 20px 4px rgb(240 64 128 / 25%);
}

/* Analytics / data dashboard — sodalite + gold accent */
.theme-analytics-sodalite {
  background: var(--gem-sodalite);
  color: var(--gem-sodalite-text);
  border-top: 3px solid var(--gem-citrine-flat);
}

/* Nature / organic brand — moss agate */
.theme-organic-moss-agate {
  background: var(--gem-moss-agate);
  color: var(--gem-moss-agate-text);
  border: 1px solid var(--gem-jade-flat);
}

/* Changelog / version history — phantom quartz */
.theme-changelog-phantom {
  background: var(--gem-phantom-quartz);
  color: var(--gem-phantom-quartz-text);
  border-left: 3px solid var(--gem-smoky-quartz-flat);
}

/* Dark cinematic overlay (scrim/modal backdrop) — smoky quartz */
.theme-scrim-smoky-quartz {
  background: var(--gem-smoky-quartz);
  opacity: 0.85;
}

/* 404 / lost in space — tektite with obsidian */
.theme-404-tektite {
  background: var(--gem-tektite);
  color: var(--gem-tektite-text);
  box-shadow: inset 0 0 120px rgb(0 0 0 / 60%);
}

/* Meditation / peace — celestite */
.theme-peace-celestite {
  background: var(--gem-celestite);
  color: var(--gem-celestite-text);
  border: 1px solid var(--gem-blue-lace-agate-flat);
}

/* Achievement / unlock — imperial topaz + gold */
.theme-achievement-topaz {
  background: var(--gem-imperial-topaz);
  color: var(--gem-imperial-topaz-text);
  box-shadow: 0 4px 32px rgb(208 128 32 / 50%);
  border: 1px solid var(--gem-gold-flat);
}

/* ── Keyframe animation for gem-pulse (loading states) ──────────────────── */
@keyframes gem-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.65;
  }
}