/* ============================================
   MTG CANONICAL COLORS
   These are fixed Magic: The Gathering color identity colors.
   They never change between themes — they are part of the
   game's visual language and must remain recognizable.
   ============================================ */
:root {
    /* Mobile bottom-bar heights (shared by the fixed nav, sub-tab bar, and tab content padding) */
    --mobile-nav-height: 47px;
    --mobile-subtab-height: 49px;
    --mobile-bottom-bars: calc(var(--mobile-nav-height) + var(--mobile-subtab-height));

    /* The band the fixed mobile bars paint in. It sits above everything a
       panel's own content can raise itself to — the highest is the pod deck
       autocomplete's dropdown at 400 — and below the mobile search overlay
       (500) and its backdrop (450), which are meant to cover the nav.

       Panel content used to be clipped by the panel's own scroll container, so
       an in-panel element at z-index 200 could never reach the bars whatever
       its z-index said. The page scrolls as one document now, so nothing clips
       it and the ordering is real: a pod participant card lifted to 200 by
       :focus-within was painting its deck art straight over the sub-tabs. */
    --mobile-nav-z: 440;
    --mobile-subnav-z: 439;

    /* MTG Mana Production UI Colors (slightly different from pure identity) */
    --mtg-white-mana: #F0EFD8;
    --mtg-blue-mana: #4a90d9;
    --mtg-black-mana: #20242a;
    --mtg-red-mana: #e05c4b;
    --mtg-green-mana: #5cb85c;
    --mtg-generic-mana: #706e6eff;
    --mtg-multicolor: #CFB53B;

    /* MTG Two-Color Guild Pairs */
    --mtg-azorius: #70A1D7;    /* WU - white/blue */
    --mtg-dimir: #4B4D7F;      /* UB - blue/black */
    --mtg-rakdos: #A65257;     /* BR - black/red */
    --mtg-gruul: #8E9D5E;      /* RG - red/green */
    --mtg-selesnya: #96B18D;   /* GW - green/white */
    --mtg-orzhov: #A69F9D;     /* WB - white/black */
    --mtg-izzet: #7F9FB8;      /* UR - blue/red */
    --mtg-golgari: #607253;    /* BG - black/green */
    --mtg-boros: #D38A7F;      /* RW - red/white */
    --mtg-simic: #529785;      /* GU - green/blue */
    --mtg-gold: #D4AF37;       /* Shards/Wedges/WUBRG multicolor */

    /* MTG Card Rarities */
    --rarity-common: #373737;
    --rarity-uncommon: #BBC5D5;
    --rarity-rare: #FFE182;
    --rarity-mythic: #FF9550;

    /* ============================================
       SYNERGY TYPE COLORS
       Each synergy category has a fixed color identity used
       across all chart visualizations and badge indicators.
       ============================================ */
    --synergy-keyword: #3498db;
    --synergy-tribal: #27ae60;
    --synergy-etb: #9b59b6;
    --synergy-trigger: #e74c3c;
    --synergy-conditional: #f39c12;
    --synergy-combo: #e91e63;
    --synergy-color-match: #95a5a6;
    --synergy-treasure: #FFD700;
    --synergy-tokens: #8BC34A;
    --synergy-artifact-tokens: #AED581;
    --synergy-artifacts: #607D8B;
    --synergy-aristocrats: #4A0080;
    --synergy-lifegain: #F8BBD0;
    --synergy-counters: #00BCD4;
    --synergy-poison: #4CAF50;
    --synergy-energy: #03A9F4;
    --synergy-graveyard: #3E2723;
    --synergy-blink: #E1BEE7;
    --synergy-spellslinger: #FF5722;
    --synergy-enchantments: #AB47BC;
    --synergy-landfall: #795548;
    --synergy-ramp: #43A047;
    --synergy-equipment: #BDBDBD;
    --synergy-draw: #1E88E5;
    --synergy-exile: #FF8A65;
    --synergy-protection: #81C784;
    --synergy-tutors: #FFF176;
    --synergy-removal: #EF5350;
    --synergy-stax: #90A4AE;
    --synergy-combat: #D32F2F;
    --synergy-copy: #4DB6AC;
    --synergy-tap-untap: #64B5F6;
    --synergy-legendary: #FFB300;
    --synergy-planeswalkers: #BA68C8;
    --synergy-keywords: #CDDC39;
    --synergy-stats: #A1887F;
    --synergy-commander: #FF5252;
    --synergy-theft: #673AB7;
    --synergy-politics: #009688;

    /* ============================================
       CATEGORICAL CHART PALETTE
       14-color palette for pie charts, bar charts,
       and other multi-series data visualizations.
       ============================================ */
    --chart-cat-1: #3b82f6;
    --chart-cat-2: #10b981;
    --chart-cat-3: #f59e0b;
    --chart-cat-4: #ef4444;
    --chart-cat-5: #8b5cf6;
    --chart-cat-6: #ec4899;
    --chart-cat-7: #06b6d4;
    --chart-cat-8: #f97316;
    --chart-cat-9: #14b8a6;
    --chart-cat-10: #6366f1;
    --chart-cat-11: #d946ef;
    --chart-cat-12: #84cc16;
    --chart-cat-13: #22d3ee;
    --chart-cat-14: #64748b;

    /* Shared horizontal chart bars */
    --chart-bar-track: rgba(148, 163, 184, 0.24);
    --chart-bar-track-border: rgba(148, 163, 184, 0.08);
    --chart-bar-fill-outline: rgba(255, 255, 255, 0.36);

    /* ============================================
       DECK ARCHETYPE RADAR COLORS
       Fixed colors for the archetype radar/spider chart.
       ============================================ */
    --archetype-aggro: #e74c3c;
    --archetype-tribal: #e67e22;
    --archetype-protection: #1abc9c;
    --archetype-control: #3498db;
    --archetype-ramp: #27ae60;
    --archetype-draw: #f39c12;
    --archetype-combo: #9b59b6;
    --archetype-balanced: #2ecc71;

    /* Favorite Colors */
    --favorite-color: #f472b6;
    --favorite-bg: rgba(244, 114, 182, 0.1);

    /* Chip Colors */
    --chip-bg: var(--accent-gradient);
    --chip-text: var(--button-primary-text);
    --chip-exclude-bg: var(--danger-color);
    --chip-exclude-text: var(--button-primary-text);
    --chip-or-bg: var(--accent-light);
    --chip-or-text: var(--button-primary-text);

    /* Actor effect focus colors */
    --actor-opponents-color: var(--danger-color);
    --actor-each-player-color: var(--warning-color);
    --actor-you-color: var(--accent-color);

    /* Rarity Colors */
    --rarity-common: #000000;
    --rarity-uncommon: #A0A0A0;
    --rarity-rare: #C4A429;
    --rarity-mythic: #FF8400;

    /* Button Colors */
    --button-primary-text: white;
}