/*
 * X4A MarketWire
 * Visual Foundation - Phase 70A
 *
 * Product direction:
 * Neo Retro Market Terminal
 *
 * This layer contains only shared design primitives.
 * It must not implement business logic, market-data
 * retrieval or component behavior.
 *
 * ZERO-COST CONTRACT:
 * No external font, icon, image or data dependency.
 */


/* ==========================================================
   PRODUCT TOKENS
   ========================================================== */

body.x4a-marketwire-view {
    --x4a-font-ui:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --x4a-font-data:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --x4a-radius-xs: 6px;
    --x4a-radius-sm: 9px;
    --x4a-radius-md: 12px;
    --x4a-radius-lg: 16px;
    --x4a-radius-xl: 20px;
    --x4a-radius-pill: 999px;

    --x4a-space-1: 4px;
    --x4a-space-2: 8px;
    --x4a-space-3: 12px;
    --x4a-space-4: 16px;
    --x4a-space-5: 20px;
    --x4a-space-6: 24px;
    --x4a-space-8: 32px;

    --x4a-transition-fast: 120ms ease;
    --x4a-transition-ui: 180ms ease;

    font-family: var(--x4a-font-ui);
    font-variant-numeric:
        tabular-nums lining-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   DARK - PRODUCT DEFAULT
   ========================================================== */

html[data-x4a-theme="dark"]
body.x4a-marketwire-view {
    --x4a-bg: #070b10;
    --x4a-surface: #0d131b;
    --x4a-surface-2: #111923;
    --x4a-surface-3: #16212d;

    --x4a-text: #e8f0f7;
    --x4a-muted: #93a4b5;
    --x4a-faint: #627486;

    --x4a-border: #1f2d3a;
    --x4a-border-strong: #31485d;

    --x4a-accent: #38bdf8;
    --x4a-accent-soft:
        rgba(56, 189, 248, 0.14);

    --x4a-positive: #39d47a;
    --x4a-negative: #ff6475;
    --x4a-warning: #f2b84b;

    --x4a-shadow:
        0 14px 38px rgba(0, 0, 0, 0.30);

    /*
     * Existing singular/longform surfaces keep their
     * semantic token names while sharing one palette.
     */
    --x4a-single-bg: var(--x4a-bg);
    --x4a-single-surface: var(--x4a-surface);
    --x4a-single-surface-2: var(--x4a-surface-2);
    --x4a-single-text: var(--x4a-text);
    --x4a-single-muted: var(--x4a-muted);
    --x4a-single-border: var(--x4a-border);
    --x4a-single-accent: var(--x4a-accent);
    --x4a-single-accent-soft:
        var(--x4a-accent-soft);

    --x4a-long-bg: var(--x4a-bg);
    --x4a-long-surface: var(--x4a-surface);
    --x4a-long-surface-2: var(--x4a-surface-2);
    --x4a-long-text: var(--x4a-text);
    --x4a-long-muted: var(--x4a-muted);
    --x4a-long-border: var(--x4a-border);
    --x4a-long-accent: var(--x4a-accent);
    --x4a-long-accent-soft:
        var(--x4a-accent-soft);

    background: var(--x4a-bg);
    color: var(--x4a-text);
}


/* ==========================================================
   LIGHT - EXPLICIT USER OPTION
   ========================================================== */

html[data-x4a-theme="light"]
body.x4a-marketwire-view {
    --x4a-bg: #f3f6f8;
    --x4a-surface: #ffffff;
    --x4a-surface-2: #f7f9fb;
    --x4a-surface-3: #edf2f6;

    --x4a-text: #101820;
    --x4a-muted: #526373;
    --x4a-faint: #798897;

    --x4a-border: #d7e0e7;
    --x4a-border-strong: #b8c6d1;

    --x4a-accent: #087daf;
    --x4a-accent-soft:
        rgba(8, 125, 175, 0.11);

    --x4a-positive: #12884b;
    --x4a-negative: #c43f50;
    --x4a-warning: #a56e08;

    --x4a-shadow:
        0 14px 34px rgba(25, 42, 55, 0.10);

    --x4a-single-bg: var(--x4a-bg);
    --x4a-single-surface: var(--x4a-surface);
    --x4a-single-surface-2: var(--x4a-surface-2);
    --x4a-single-text: var(--x4a-text);
    --x4a-single-muted: var(--x4a-muted);
    --x4a-single-border: var(--x4a-border);
    --x4a-single-accent: var(--x4a-accent);
    --x4a-single-accent-soft:
        var(--x4a-accent-soft);

    --x4a-long-bg: var(--x4a-bg);
    --x4a-long-surface: var(--x4a-surface);
    --x4a-long-surface-2: var(--x4a-surface-2);
    --x4a-long-text: var(--x4a-text);
    --x4a-long-muted: var(--x4a-muted);
    --x4a-long-border: var(--x4a-border);
    --x4a-long-accent: var(--x4a-accent);
    --x4a-long-accent-soft:
        var(--x4a-accent-soft);

    background: var(--x4a-bg);
    color: var(--x4a-text);
}


/* ==========================================================
   SHARED TYPOGRAPHY CONTRACT
   ========================================================== */

body.x4a-marketwire-view button,
body.x4a-marketwire-view input,
body.x4a-marketwire-view textarea,
body.x4a-marketwire-view select {
    font: inherit;
}

body.x4a-marketwire-view
:is(
    .x4a-chart-meta,
    .x4a-control-label,
    .x4a-ticker-meta,
    .x4a-marketwire-meta
) {
    font-variant-numeric:
        tabular-nums lining-nums;
}


/* ==========================================================
   ACCESSIBILITY / INTERACTION FOUNDATION
   ========================================================== */

body.x4a-marketwire-view
:is(
    a,
    button,
    input,
    textarea,
    select
):focus-visible {
    outline:
        2px solid
        var(--x4a-accent);
    outline-offset: 3px;
}

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