/* ============================================================================
 * V15 · Aurora Noir — Design Tokens
 * Single source of truth: colors, aurora, type, space, radius, shadow, motion, z.
 * ==========================================================================*/
:root {
    /* ---- Base canvas (pure black OLED) ---- */
    --v15-bg:        #000000;
    --v15-bg-1:      #050507;
    --v15-bg-2:      #0A0A0D;
    --v15-surface:   rgba(255,255,255,0.045);   /* glass fill */
    --v15-surface-2: rgba(255,255,255,0.07);
    --v15-surface-3: rgba(255,255,255,0.10);
    --v15-line:      rgba(255,255,255,0.10);
    --v15-line-2:    rgba(255,255,255,0.16);

    /* ---- Aurora accents ---- */
    --v15-a1: #22D3EE;   /* cyan   */
    --v15-a2: #8B5CF6;   /* violet */
    --v15-a3: #EC4899;   /* magenta*/
    --v15-a1-rgb: 34,211,238;
    --v15-a2-rgb: 139,92,246;
    --v15-a3-rgb: 236,72,153;
    --v15-aurora:  linear-gradient(120deg, var(--v15-a1), var(--v15-a2) 52%, var(--v15-a3));
    --v15-aurora-soft: linear-gradient(120deg, rgba(var(--v15-a1-rgb),0.18), rgba(var(--v15-a2-rgb),0.18), rgba(var(--v15-a3-rgb),0.18));

    /* semantic */
    --v15-up:    #34D399;   /* gains */
    --v15-down:  #FB7185;   /* loss  */
    --v15-warn:  #FBBF24;
    --v15-gold:  #E8C36B;

    /* ---- Text ---- */
    --v15-txt:   #F4F4F5;
    --v15-txt-2: #A1A1AA;
    --v15-txt-3: #6B7280;
    --v15-txt-4: #4B5563;

    /* ---- Typography ---- */
    --v15-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --v15-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --v15-fs-xs: 11px;
    --v15-fs-sm: 12px;
    --v15-fs-md: 14px;
    --v15-fs-lg: 16px;
    --v15-fs-xl: 20px;
    --v15-fs-2xl: 26px;
    --v15-fs-3xl: 34px;
    --v15-fs-4xl: 44px;

    /* ---- Spacing scale (4pt) ---- */
    --v15-s1: 4px;  --v15-s2: 8px;  --v15-s3: 12px; --v15-s4: 16px;
    --v15-s5: 20px; --v15-s6: 24px; --v15-s8: 32px; --v15-s10: 40px;

    /* ---- Radius ---- */
    --v15-r-sm: 8px;
    --v15-r-md: 14px;
    --v15-r-lg: 20px;
    --v15-r-xl: 28px;
    --v15-r-pill: 999px;

    /* ---- Shadow / glow ---- */
    --v15-shadow:   0 16px 48px rgba(0,0,0,0.55);
    --v15-shadow-2: 0 24px 64px rgba(0,0,0,0.65);
    --v15-glow-a1: 0 0 24px rgba(var(--v15-a1-rgb),0.45);
    --v15-glow-a2: 0 0 24px rgba(var(--v15-a2-rgb),0.45);
    --v15-glow-a3: 0 0 24px rgba(var(--v15-a3-rgb),0.45);

    /* ---- Motion ---- */
    --v15-ease:    cubic-bezier(0.16, 1, 0.3, 1);    /* silky expo-out, no overshoot */
    --v15-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --v15-t-fast: 0.18s;
    --v15-t-mid:  0.34s;
    --v15-t-slow: 0.6s;

    /* ---- Layout ---- */
    --v15-maxw: 480px;
    --v15-nav-h: 64px;
    --v15-safe-b: env(safe-area-inset-bottom, 0px);
    --v15-safe-t: env(safe-area-inset-top, 0px);

    /* ---- Z-index ---- */
    /* aurora MUST sit behind all content. At 0 it's a positioned layer that
     * paints over non-positioned in-flow text (tabs, labels, section headings),
     * hiding them. -1 keeps it above the body background but behind everything. */
    --v15-z-aurora: -1;
    --v15-z-base:   1;
    --v15-z-topbar: 40;
    --v15-z-nav:    60;
    --v15-z-fab:    70;
    --v15-z-sheet:  9000;
    --v15-z-toast:  9500;
}