/* ============================================================================
   EMERALD THEME - design tokens (Phase 305)
   "Emerald Reserve": obsidian green + champagne metal, serif headings, guilloche engraving.
   Shared by every Emerald surface (Landing / User / Affiliate). Only custom properties and keyframes
   live here, plus .em-sprite; no element or page-class selectors, so loading this file can never
   restyle a page by itself.
   ========================================================================= */
:root {
    --em-ink: #f3eee1;
    --em-ink-2: rgba(236, 232, 218, .84);
    --em-muted: rgba(205, 222, 212, .68);
    --em-faint: rgba(205, 222, 212, .44);

    --em-champ-100: #f8efd6;
    --em-champ-200: #eedcab;
    --em-champ-300: #dcc489;
    --em-champ-400: #c6a96b;
    --em-champ-500: #a98c52;
    --em-champ-700: #7a6130;

    --em-emerald-300: #6fe3bf;
    --em-emerald-400: #34d3a3;
    --em-emerald-500: #12b886;
    --em-emerald-600: #0c8f6b;
    --em-emerald-800: #0a4a39;
    --em-emerald-900: #06281f;

    --em-win: #3ddcab;
    --em-loss: #ff7089;

    --em-metal: linear-gradient(180deg, #fff6dc 0%, #efdfb2 24%, #fbf1d4 31%, #e0c98e 52%, #f6ebc9 62%, #bd9f62 80%, #8f7440 100%);
    --em-metal-h: linear-gradient(90deg, #a98c52, #e9d5a0 22%, #fbf1d4 50%, #e9d5a0 78%, #a98c52);
    --em-metal-v: linear-gradient(180deg, #fbf1d4 0%, #e3cd93 40%, #c6a96b 62%, #efe0b6 82%, #a38548 100%);
    --em-panel: linear-gradient(180deg, rgba(13, 44, 35, .80), rgba(5, 20, 15, .92));
    --em-line: rgba(198, 169, 107, .26);
    --em-line-strong: rgba(198, 169, 107, .56);

    --em-serif: 'Palatino Linotype', Palatino, 'Iowan Old Style', 'Book Antiqua', Georgia, 'Times New Roman', serif;
    --em-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, Tahoma, sans-serif;
    --em-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
    --em-nav-h: 76px;
}

/* Hidden SVG sprite container (Pages/Shared/Themes/Emerald/_EmeraldSprite.cshtml). */
.em-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes em-spin { to { transform: rotate(360deg); } }
@keyframes em-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes em-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes em-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes em-drop { 0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .5; } 50% { transform: translateY(2px) rotate(45deg); opacity: 1; } }
@keyframes em-live { 0%, 100% { box-shadow: 0 0 0 .12em rgba(61, 220, 171, .18), 0 0 10px rgba(61, 220, 171, .6); } 50% { box-shadow: 0 0 0 .3em rgba(61, 220, 171, 0), 0 0 18px rgba(61, 220, 171, .95); } }
@keyframes em-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes em-failsafe { to { opacity: 1; transform: none; } }