/* ============================================================
   AETHEL BRAND TOKENS — the single shared layer across all UIs
   (mobile / web cabinet / admin). Hosts link this file first,
   then add their OWN layout + component styles on top.
   Do not put layout or component rules here — tokens only.
   ============================================================ */
:root {
    /* Surfaces (layer stack creates depth: base -> raised -> card).
       Deep near-black navy, matching the reference mockups. */
    --aethel-bg-base: #060F1C;
    --aethel-bg-raised: #0C1E33;
    --aethel-bg-card: #0F2138;

    /* Brand accents */
    --aethel-gold: #D4AF37;
    --aethel-gold-bright: #F0C75E;

    /* Secondary accent — teal/mint. Reserved for growth/yield: positive
       change, up-charts, staking, "buy". Pairs with gold, never replaces it. */
    --aethel-teal: #2DD4BF;
    --aethel-teal-bright: #5EEAD4;

    /* Phoenix / network glow */
    --aethel-cyan: #4FA8E0;

    /* Text */
    --aethel-text: #FFFFFF;
    --aethel-text-muted: #8FA3B8;

    /* Status (use for status only, never decoration) */
    --aethel-success: #2DD4BF;
    --aethel-warning: #F59E0B;
    --aethel-danger: #EF4444;

    /* Borders */
    --aethel-border: rgba(212, 175, 55, 0.18);
    --aethel-border-strong: rgba(212, 175, 55, 0.34);

    /* Radius */
    --aethel-radius-card: 20px;
    --aethel-radius-input: 12px;
    --aethel-radius-pill: 999px;

    /* Elevation (soft, never harsh Material shadows) */
    --aethel-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
    --aethel-glow-gold: 0 8px 28px rgba(212, 175, 55, 0.22);

    /* Spacing scale (8px base) */
    --aethel-s1: 4px;
    --aethel-s2: 8px;
    --aethel-s3: 12px;
    --aethel-s4: 16px;
    --aethel-s5: 24px;
    --aethel-s6: 32px;

    /* Typography — bundle Inter/Manrope later; robust fallback for now */
    --aethel-font: 'Inter', 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}