:root {
    /* =========================================
       SHADOWS
       ========================================= */

    /* Neutral / Base */
    --off-shadow: 0 3px 10px 0 rgb(220 220 220 / 10%), 0 8px 20px 0 rgb(170 170 170 / 10%);
    --box-shadow: 0.25rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.98);
    --subtle-shadow: 0 1px 3px rgba(13, 13, 13, 0.08), 0 2px 6px rgba(13, 13, 13, 0.05);
    --soft-shadow: 0 4px 12px rgba(13, 13, 13, 0.10), 0 8px 24px rgba(13, 13, 13, 0.07);
    --deep-shadow: 0 8px 24px rgba(13, 13, 13, 0.12), 0 18px 48px rgba(13, 13, 13, 0.09);
    --heavy-shadow: 0 16px 48px rgba(13, 13, 13, 0.15), 0 32px 72px rgba(13, 13, 13, 0.10);
    --inset-shadow: inset 0 2px 6px rgba(13, 13, 13, 0.12);
    --hover-shadow:      0 0.625rem 1.5625rem rgba(0, 0, 0, 0.08);

    /* Purple family  (deep-purple / dark-purple) */
    --subtle-purple: 0 2px 8px rgba(103, 58, 183, 0.18), 0 4px 16px rgba(103, 58, 183, 0.10);
    --bright-purple: 0 6px 20px rgba(103, 58, 183, 0.22), 0 12px 36px rgba(49, 27, 146, 0.12);
    --deep-purple-s: 0 12px 36px rgba(103, 58, 183, 0.28), 0 24px 56px rgba(49, 27, 146, 0.16);
    /* -s suffix avoids collision with --deep-purple colour */
    --glow-purple: 0 0 20px rgba(103, 58, 183, 0.45), 0 0 48px rgba(103, 58, 183, 0.20);

    /* Navy / Blue family  (navy-blue / dark-navy / rich-navy) */
    --subtle-navy: 0 2px 8px rgba(18, 39, 67, 0.18), 0 4px 16px rgba(18, 39, 67, 0.10);
    --bright-navy: 0 6px 20px rgba(18, 39, 67, 0.22), 0 12px 36px rgba(22, 54, 95, 0.12);
    --deep-navy-s: 0 12px 36px rgba(18, 39, 67, 0.28), 0 24px 56px rgba(22, 54, 95, 0.16);
    /* -s suffix avoids collision with --deep-navy colour */
    --glow-navy: 0 0 24px rgba(33, 141, 236, 0.30), 0 0 56px rgba(33, 141, 236, 0.12);

    /* Gold / Amber family  (metallic-gold / dark-goldenrod) */
    --subtle-gold: 0 2px 8px rgba(212, 175, 55, 0.20), 0 4px 16px rgba(184, 134, 11, 0.10);
    --bright-gold: 0 6px 20px rgba(212, 175, 55, 0.28), 0 12px 36px rgba(184, 134, 11, 0.14);
    --glow-gold: 0 0 20px rgba(255, 215, 64, 0.40), 0 0 48px rgba(212, 175, 55, 0.18);

    /* Red / Coral family  (vivid-coral / vivid-red / crimson-red) */
   --subtle-red:        0 2px 8px rgba(219, 64, 64, 0.18),  0 4px 16px rgba(219, 64, 64, 0.10);
   --bright-red:        0 6px 20px rgba(219, 64, 64, 0.24), 0 12px 36px rgba(198, 75, 75, 0.14);
   --deep-red:          0 12px 36px rgba(219, 64, 64, 0.30), 0 24px 56px rgba(141, 45, 45, 0.18);
   --glow-red:          0 0 20px rgba(255, 92, 92, 0.40),   0 0 48px rgba(219, 64, 64, 0.18);

   /* Green family  (emerald-green / success-green) */
   --subtle-green:      0 2px 8px rgba(31, 138, 77, 0.18),  0 4px 16px rgba(31, 138, 77, 0.10);
   --bright-green:      0 6px 20px rgba(31, 138, 77, 0.24), 0 12px 36px rgba(40, 173, 71, 0.12);
   --glow-green:        0 0 20px rgba(40, 173, 71, 0.38),   0 0 48px rgba(31, 138, 77, 0.16);

   /* Glass / Translucent  (glass-white / translucent-white) */
   --subtle-glass:      0 4px 16px rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.20);
   --bright-glass:      0 8px 32px rgba(255, 255, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35);

   /* Steel family  (light-steel-blue / medium-steel-blue / slate-grey) */
   --subtle-steel:      0 2px 8px rgba(93, 113, 140, 0.14),  0 4px 16px rgba(93, 113, 140, 0.08);
   --bright-steel:      0 6px 20px rgba(93, 113, 140, 0.20), 0 12px 36px rgba(191, 209, 231, 0.18);
   --deep-steel:        0 12px 36px rgba(93, 113, 140, 0.26), 0 24px 56px rgba(93, 113, 140, 0.14);
   --glow-steel:        0 0 20px rgba(217, 230, 244, 0.50),   0 0 48px rgba(93, 113, 140, 0.22);

   /* Blue family  (dusty-blue / cyan-blue) */
   --subtle-blue:       0 2px 8px rgba(33, 141, 236, 0.16),  0 4px 16px rgba(33, 141, 236, 0.09);
   --bright-blue:       0 6px 20px rgba(33, 141, 236, 0.24), 0 12px 36px rgba(33, 141, 236, 0.13);
   --deep-blue:         0 12px 36px rgba(33, 141, 236, 0.30), 0 24px 56px rgba(0, 210, 255, 0.14);
   --glow-blue:         0 0 24px rgba(0, 210, 255, 0.40),     0 0 56px rgba(33, 141, 236, 0.20);
}