/* ===================================================================
   D-PAD Design Tokens — Single Source of Truth
   -------------------------------------------------------------------
   Loaded FIRST in index.html so every other stylesheet can resolve
   var(--token-name) values. Anything that's reused twice belongs here.

   Sections:
     1. Z-INDEX TIERS  — named layers, no more random magic numbers
     2. GOLD FAMILY    — every gold gradient lives here
     3. (existing brand tokens still live inline in index.html for now;
         they will migrate here in a future pass — not load-bearing)

   How to use:
     z-index:    var(--z-modal);
     background: var(--gold-metallic);

   How to add a new layer or gradient:
     - Pick the closest existing token. If none fit, add it here with
       a one-line comment explaining where it's used.
     - Never re-declare a gradient inline in another file.
   =================================================================== */

:root {

    /* -----------------------------------------------------------------
       1. Z-INDEX TIERS
       Use named tiers for anything that floats above local content.
       Local stacking inside a component (z-index: 1, 2, 3) is fine —
       these tiers are for cross-component hierarchy.
       ----------------------------------------------------------------- */

    --z-base:     1;       /* normal page content */
    --z-dropdown: 100;     /* select menus, tooltips, popovers */
    --z-sticky:   200;     /* sticky tab bar, fixed header, FABs */
    --z-overlay:  500;     /* dim/blur backdrops behind modals */
    --z-modal:    1000;    /* full-screen modals (miles, gaming library, settings, map overlay) */
    --z-modal-stacked: 1100;  /* a modal opened on top of another modal (rare) */
    --z-header:   1200;    /* always-on-top app header — sits above modals so the boost icon stays visible during reward animations */
    --z-toast:    2000;    /* toast notifications — always above modals + header */
    --z-popup:    3000;    /* mapbox popups, anchored callouts */
    --z-debug:    9999;    /* eruda, dev overlays, last-resort diagnostics */


    /* -----------------------------------------------------------------
       2. GOLD FAMILY
       The brand uses several distinct golds for different jobs.
       Treat them as named effects, not interchangeable values.
       ----------------------------------------------------------------- */

    /* The canonical "embossed metallic" gold from CLAUDE.md.
       Use for: prestige surfaces, premium boarding pass UI, hero accents. */
    --gold-metallic: linear-gradient(135deg, #bf953f 0%, #fcf6ba 40%, #b38728 60%, #fbf5b7 100%);

    /* Warm action gold — for buttons, CTAs, anything that should pop.
       Brighter, more saturated than metallic. */
    --gold-warm: linear-gradient(135deg, #FFD93D 0%, #FF8C00 100%);

    /* Soft amber — for medium-emphasis chips, level/rarity badges. */
    --gold-amber: linear-gradient(135deg, #FFD93D 0%, #f39c12 100%);

    /* Subtle highlight — secondary accents, gentle dividers. */
    --gold-soft: linear-gradient(90deg, #FFD93D, #f0c430);

    /* Coin shimmer — radial, for the 3D D-PAD coin and related sparkle.
       NOT for flat surfaces. */
    --gold-coin: radial-gradient(circle at 35% 35%, #ffe566, #ffd700 40%, #d4a800 80%, #b8860b);

    /* Bronze-to-gold sweep — for legendary rarity bands, progress fills. */
    --gold-deep: linear-gradient(90deg, #b38728, #FFD93D);

    /* Bronze on bronze — for legendary stamp rarity backgrounds. */
    --bronze-rich: linear-gradient(135deg, #bf953f, #b38728);

}