/* ══════════════════════════════════════════════════════════════════════════
   Design tokens — premium AI trading theme

   Reference: dark navy/black canvas, cyan-blue-purple neon glow, glass
   panels, glowing gradient borders. Blue is the primary instrument colour;
   purple is the secondary glow that every primary CTA/gradient resolves
   toward, cyan is the tertiary highlight (icons, chips, KPI accents).

   Everything themed reads from these tokens, so changing one re-skins the
   whole surface. Alpha variants use the *-rgb channels, e.g.
   rgba(var(--dash-accent-rgb), 0.25).

   Shared file: home-dashboard.css @imports it (so every page linking that
   file gets the tokens automatically), and the auth layout links it directly
   for auth-modern.css — the login/register pages need the same palette but
   not the dashboard's 3k lines of component CSS.

   Defined on :root rather than a wrapper class so detached UI (Bootstrap
   modals, which get reparented to <body>) resolves them too.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Accent — primary blue */
    --dash-accent-rgb: 59, 130, 246;
    --dash-accent-strong-rgb: 37, 99, 235;
    --dash-accent-soft-rgb: 96, 165, 250;
    --dash-accent: rgb(var(--dash-accent-rgb));
    --dash-accent-strong: rgb(var(--dash-accent-strong-rgb));
    --dash-accent-soft: rgb(var(--dash-accent-soft-rgb));
    --dash-accent-tint: #93c5fd;
    --dash-accent-pale: #bfdbfe;

    /* Accent 2 — cyan, the highlight colour on icons/chips/sparklines */
    --dash-accent-2-rgb: 34, 211, 238;
    --dash-accent-2: rgb(var(--dash-accent-2-rgb));
    --dash-accent-2-soft: #67e8f9;
    --dash-accent-2-tint: #a5f3fc;
    --dash-accent-2-pale: #cffafe;

    /* Accent 3 — purple, the glow every primary gradient resolves toward */
    --dash-accent-3-rgb: 139, 92, 246;
    --dash-accent-3: rgb(var(--dash-accent-3-rgb));
    --dash-accent-3-soft: #a78bfa;
    --dash-accent-3-tint: #c4b5fd;

    /* The signature gradient — every primary CTA, active progress fill and
       glowing border uses this blue → purple sweep. */
    --dash-gradient: linear-gradient(135deg, var(--dash-accent-strong) 0%, var(--dash-accent-3) 100%);
    --dash-gradient-90: linear-gradient(90deg, var(--dash-accent) 0%, var(--dash-accent-3-soft) 100%);
    --dash-gradient-cyan: linear-gradient(135deg, var(--dash-accent) 0%, var(--dash-accent-2) 100%);

    /* Semantic */
    --dash-success-rgb: 52, 211, 153;
    --dash-success: rgb(var(--dash-success-rgb));
    --dash-success-soft: #6ee7b7;
    --dash-success-pale: #a7f3d0;

    --dash-danger-rgb: 239, 68, 68;
    --dash-danger-soft-rgb: 248, 113, 113;
    --dash-danger: rgb(var(--dash-danger-rgb));
    --dash-danger-soft: rgb(var(--dash-danger-soft-rgb));
    --dash-danger-pale: #fca5a5;

    --dash-warning-rgb: 245, 158, 11;
    --dash-warning-soft-rgb: 251, 191, 36;
    --dash-warning: rgb(var(--dash-warning-rgb));
    --dash-warning-soft: rgb(var(--dash-warning-soft-rgb));
    --dash-warning-pale: #fcd34d;

    /* Text ramp — slate, brightest to dimmest. The dim step sits a touch
       lighter than slate-500 so 0.68–0.8rem sub-labels still clear 4.5:1
       against the near-black canvas below. */
    --dash-text-bright: #f8fafc;
    --dash-text-strong: #f1f5f9;
    --dash-text: #e2e8f0;
    --dash-text-soft: #cbd5e1;
    --dash-text-muted: #94a3b8;
    --dash-text-dim: #6f83a0;

    --dash-on-warning: #1a1200;

    /* Canvas — true near-black, faintly blued. bg-0 is the page itself. */
    --dash-bg-0: #03050b;
    --dash-bg-1: #0a1223;
    --dash-bg-1-rgb: 10, 18, 35;
    --dash-bg-2: #070c17;
    --dash-bg-2-rgb: 7, 12, 23;
    --dash-bg-3: #04070e;
    --dash-bg-3-rgb: 4, 7, 14;
    --dash-hero-bg: linear-gradient(140deg, var(--dash-bg-1) 0%, var(--dash-bg-2) 55%, var(--dash-bg-3) 100%);

    /* Surfaces + hairlines — blue wash over black, not neutral white glass */
    --dash-surface: rgba(var(--dash-accent-rgb), 0.05);
    --dash-surface-2: rgba(var(--dash-accent-rgb), 0.07);
    --dash-surface-hover: rgba(var(--dash-accent-rgb), 0.11);
    --dash-border: rgba(var(--dash-accent-rgb), 0.18);
    --dash-border-soft: rgba(var(--dash-accent-rgb), 0.10);
    --dash-border-strong: rgba(var(--dash-accent-rgb), 0.32);

    /* Icon chip — the rounded-square accent tile behind every card/section icon */
    --dash-chip-bg: linear-gradient(135deg, rgba(var(--dash-accent-rgb), 0.28), rgba(var(--dash-accent-3-rgb), 0.16));
    --dash-chip-border: 1px solid rgba(var(--dash-accent-rgb), 0.35);
    --dash-chip-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(var(--dash-accent-soft-rgb), 0.18);

    /* Elevation — depth comes from black, the blue/purple only rims it */
    --dash-shadow-rgb: 0, 0, 0;
    --dash-elev: 0 1px 0 0 rgba(var(--dash-accent-soft-rgb), 0.07) inset,
                 0 8px 28px rgba(0, 0, 0, 0.65),
                 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
    --dash-elev-hover: 0 1px 0 0 rgba(var(--dash-accent-soft-rgb), 0.14) inset,
                       0 14px 44px rgba(0, 0, 0, 0.75),
                       0 0 0 1px rgba(var(--dash-accent-rgb), 0.30),
                       0 0 36px -6px rgba(var(--dash-accent-3-rgb), 0.35);
    --dash-glow-soft: 0 0 24px -4px rgba(var(--dash-accent-rgb), 0.40);
    --dash-glow-purple: 0 0 28px -6px rgba(var(--dash-accent-3-rgb), 0.45);

    --dash-radius: 1.25rem;
    --dash-radius-sm: 0.85rem;

    /* Glowing corner brackets rendered on every card — a small rounded L
       tracing the top-left and bottom-right corners (diagonal pair only —
       top-right/bottom-left were dropped per design direction) in the
       theme's cyan glow, echoing a HUD/scanner frame. Baked-color SVGs
       because currentColor doesn't propagate into background-image
       resources; one variant per corner since the
       bracket shape itself is mirrored, not just repositioned. */
    --dash-corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M2,22 L2,10 Q2,2 10,2 L22,2' fill='none' stroke='rgb(103, 232, 249)' stroke-width='3' stroke-linecap='round' opacity='0.55' filter='url(%23g)'/%3E%3Cpath d='M2,22 L2,10 Q2,2 10,2 L22,2' fill='none' stroke='rgb(103, 232, 249)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --dash-corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M30,10 L30,22 Q30,30 22,30 L10,30' fill='none' stroke='rgb(103, 232, 249)' stroke-width='3' stroke-linecap='round' opacity='0.55' filter='url(%23g)'/%3E%3Cpath d='M30,10 L30,22 Q30,30 22,30 L10,30' fill='none' stroke='rgb(103, 232, 249)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}