/* ==========================================================================
 * css/core/tokens.css
 * SPX Moves — Design Tokens (single source of truth for CSS)
 *
 * WHAT THIS IS
 *   Every color, radius, spacing step, shadow, font stack, and container
 *   width used across the site — declared as :root CSS custom properties.
 *   Pages / components should read these via var(--spx-*), never hardcode.
 *
 * SISTER FILE
 *   plugins/spx_functions/spx-tokens.js mirrors these values in JS so both
 *   Tailwind builds (react-src/ and stonks/react-src/) resolve the same
 *   colors under semantic names like bg-spx-card. If you edit a token here,
 *   edit it there too.
 *
 * LOAD ORDER
 *   tokens.css → base.css → components.css → [page-specific CSS]
 *
 * STATUS
 *   Phase 1 — created, NOT yet wp_enqueue_style()'d. See docs/style-unification.md
 * ========================================================================== */

:root {
    /* -----------------------------------------------------------------
     * Colors — surfaces & cards
     * ----------------------------------------------------------------- */
    --spx-surface:              #000000;                    /* page/body background */
    --spx-surface-alt:          #0f1117;                    /* darker inset (rare) */
    --spx-card-bg:              rgba(26, 26, 46, 0.85);     /* CANONICAL card bg (navy, semi-transparent) */
    --spx-card-bg-solid:        #1a1a2e;                    /* solid fallback for the same navy */
    --spx-card-bg-strong:       rgba(26, 26, 46, 0.95);     /* modal / overlay bodies */
    --spx-card-inner:           rgba(0, 0, 0, 0.30);        /* inset panel inside a card */

    /* -----------------------------------------------------------------
     * Colors — borders & dividers
     * ----------------------------------------------------------------- */
    --spx-border-amber:         #fbbf24;                    /* canonical card border */
    --spx-border-amber-soft:    rgba(251, 191, 36, 0.30);   /* dashed / inner amber */
    --spx-border-hairline:      #374151;                    /* solid gray-700 divider */
    --spx-border-muted:         rgba(55, 65, 81, 0.60);     /* soft hairline */
    --spx-border-faint:         rgba(255, 255, 255, 0.06);  /* very quiet divider */

    /* -----------------------------------------------------------------
     * Colors — text
     * ----------------------------------------------------------------- */
    --spx-text-primary:         #ffffff;                    /* body copy on cards */
    --spx-text-muted:           #d1d5db;                    /* gray-300 — secondary */
    --spx-text-dim:             #9ca3af;                    /* gray-400 — meta */
    --spx-text-faint:           #6b7280;                    /* gray-500 — disabled */
    --spx-text-body-alt:        #e5e7eb;                    /* gray-200 — descriptive body */

    /* -----------------------------------------------------------------
     * Colors — accents
     * ----------------------------------------------------------------- */
    --spx-amber:                #fbbf24;                    /* primary accent (amber-400) */
    --spx-amber-hover:          #f59e0b;                    /* hover / press (amber-500) */
    --spx-amber-soft:           rgba(251, 191, 36, 0.10);   /* tinted header/hover bg */
    --spx-amber-tint:           rgba(251, 191, 36, 0.18);   /* stronger tint (badges) */

    --spx-gold-warning:         #FFD700;                    /* in-play / warning chip */
    --spx-gold-warning-soft:    rgba(255, 215, 0, 0.18);

    --spx-success:              #00AB5E;                    /* trade-log green */
    --spx-success-bright:       #22c55e;                    /* positive delta text */
    --spx-success-soft:         rgba(34, 197, 94, 0.14);

    --spx-danger:               #ff0000;                    /* alert red */
    --spx-danger-soft:          #f87171;                    /* negative delta text (red-300) */
    --spx-danger-tint:          rgba(255, 0, 0, 0.14);

    --spx-info:                 #60a5fa;                    /* info blue accent */
    --spx-info-soft:            rgba(96, 165, 250, 0.20);

    /* -----------------------------------------------------------------
     * Radii
     * ----------------------------------------------------------------- */
    --spx-radius-sm:            4px;    /* small pills, cells */
    --spx-radius-md:            8px;    /* DEFAULT card / button radius */
    --spx-radius-lg:            10px;   /* levels-v3 card radius */
    --spx-radius-xl:            12px;   /* modal / hero card */
    --spx-radius-pill:          999px;  /* chip / pill */

    /* -----------------------------------------------------------------
     * Spacing scale
     * ----------------------------------------------------------------- */
    --spx-space-1:              4px;
    --spx-space-2:              8px;
    --spx-space-3:              12px;
    --spx-space-4:              14px;
    --spx-space-5:              20px;
    --spx-space-6:              24px;
    --spx-space-8:              32px;
    --spx-space-10:             40px;

    /* Canonical component paddings */
    --spx-pad-card:             var(--spx-space-5);   /* standard card padding */
    --spx-pad-card-compact:     var(--spx-space-4);   /* mobile-first / dense card */

    /* -----------------------------------------------------------------
     * Shadows
     * ----------------------------------------------------------------- */
    --spx-shadow-card:          0 4px 24px rgba(0, 0, 0, 0.25);
    --spx-shadow-card-hover:    0 8px 24px rgba(251, 191, 36, 0.30);
    --spx-shadow-modal:         0 0 20px rgba(251, 191, 36, 0.50);
    --spx-shadow-image:         0 4px 8px rgba(0, 0, 0, 0.30);

    /* -----------------------------------------------------------------
     * Fonts
     * ----------------------------------------------------------------- */
    --spx-font-ui:              system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --spx-font-mono:            ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

    /* -----------------------------------------------------------------
     * Type scale (rough defaults; pages can override locally)
     * ----------------------------------------------------------------- */
    --spx-text-xs:              11px;
    --spx-text-sm:              13px;
    --spx-text-base:            14px;
    --spx-text-md:              15px;
    --spx-text-lg:              16px;
    --spx-text-xl:              18px;
    --spx-text-2xl:             22px;
    --spx-text-3xl:             28px;
    --spx-text-4xl:             32px;

    --spx-leading-tight:        1.3;
    --spx-leading-normal:       1.5;
    --spx-leading-relaxed:      1.6;

    /* -----------------------------------------------------------------
     * Container widths
     * ----------------------------------------------------------------- */
    --spx-container-narrow:     720px;   /* mobile-first single column (levels-v3) */
    --spx-container-md:         900px;   /* text-heavy pages */
    --spx-container-wide:       1200px;  /* multi-card grids (default) */
    --spx-container-xwide:      1400px;  /* very wide grids */
    --spx-container-pad:        12px;    /* baseline horizontal padding */

    /* -----------------------------------------------------------------
     * Motion
     * ----------------------------------------------------------------- */
    --spx-transition-fast:      120ms ease;
    --spx-transition-med:       200ms ease;
    --spx-transition-slow:      300ms ease;

    /* -----------------------------------------------------------------
     * z-index scale (avoid ad-hoc numbers)
     * ----------------------------------------------------------------- */
    --spx-z-content:            1;
    --spx-z-sticky:             10;
    --spx-z-modal-backdrop:     900;
    --spx-z-modal:              1000;
    --spx-z-toast:              1100;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --spx-transition-fast:  0ms;
        --spx-transition-med:   0ms;
        --spx-transition-slow:  0ms;
    }
}