/* ================================================================
   ExtremeTrades — shared design tokens
   ----------------------------------------------------------------
   Loaded before style.css (app) and landing.css (public site) so
   both surfaces share one palette, type scale and spacing rhythm.

   The legacy variable names (--bg-primary, --text-secondary, …) are
   kept verbatim: templates reference them from inline style="" attrs,
   so renaming any of them silently breaks those.
   ================================================================ */

:root {
    /* ---- Surfaces (deepest → highest elevation) ---- */
    --bg-primary:    #0a0c12;   /* page background / inset wells   */
    --bg-secondary:  #10131c;   /* sidebar, topbar, rails          */
    --bg-card:       #151925;   /* raised card                     */
    --bg-elevated:   #1b2030;   /* hover / popover / modal         */
    --bg-inset:      #080a0f;   /* code blocks, sunken fields      */

    /* ---- Borders ---- */
    --border:        #212637;   /* default hairline                */
    --border-strong: #2e3549;   /* hover / emphasis                */
    --border-subtle: #171b28;   /* barely-there dividers           */

    /* ---- Text ---- */
    --text-primary:   #e9ebf2;
    --text-secondary: #949bb0;
    --text-tertiary:  #6a7186;

    /* Legacy aliases — templates reference these from inline style="".
       --text-muted: legal.html. --text: subscribe.html, where it was
       never defined and silently fell back to the inherited colour. */
    --text-muted: var(--text-tertiary);
    --text:       var(--text-primary);

    /* ---- Brand + semantic ---- */
    --accent:        #4f7df9;
    --accent-hover:  #6b91ff;
    --accent-active: #3d6ae8;
    --success:       #22c55e;
    --warning:       #f59e0b;
    --danger:        #ef4444;
    --danger-hover:  #dc2626;

    /* Tinted fills — pre-mixed so components don't re-declare rgba() */
    --accent-soft:   rgba(79, 125, 249, 0.12);
    --accent-softer: rgba(79, 125, 249, 0.06);
    --accent-ring:   rgba(79, 125, 249, 0.35);
    --success-soft:  rgba(34, 197, 94, 0.13);
    --warning-soft:  rgba(245, 158, 11, 0.13);
    --danger-soft:   rgba(239, 68, 68, 0.13);

    /* ---- Radius ---- */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;
    --r-full: 999px;

    /* ---- Spacing (4px rhythm) ---- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    /* ---- Type ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --fs-2xs: 0.6875rem;  /* 11px — micro labels        */
    --fs-xs:  0.75rem;    /* 12px — badges, meta        */
    --fs-sm:  0.8125rem;  /* 13px — dense UI, tables    */
    --fs-md:  0.875rem;   /* 14px — body / controls     */
    --fs-lg:  1rem;       /* 16px — card titles         */
    --fs-xl:  1.125rem;   /* 18px — page title          */
    --fs-2xl: 1.375rem;   /* 22px — stat values         */
    --fs-3xl: 1.75rem;

    /* ---- Elevation ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.48);

    /* ---- Motion ---- */
    --t-fast: 0.12s ease;
    --t-base: 0.18s ease;
    --t-slow: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --sidebar-width: 236px;
    --topbar-height: 60px;
}

/* Keyboard focus ring — one definition, every interactive element.
   :focus-visible (not :focus) so mouse clicks don't draw the ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Numbers in a trading UI must not shift width as they tick. Any element
   showing money, counts or percentages should inherit this. */
.tnum,
.stats-card-value,
.journal-day-pnl,
.journal-modal-pnl,
.balance-item .value,
.conn-bal-item .value,
.position-pnl,
.stat-value,
.preview-card .value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}