/* ============================================================
   ew-theme.css
   Design tokens + base reset + base element styling
   ============================================================ */

/* ---- Light mode defaults ---- */
:root {
    --ew-color: #DDB785;
    --ew-color-hover: #fdd8a7;
    --ew-color-top: rgba(221,183,133,0.30);
    --ew-color-bottom: rgba(221,183,133,0.30);
    --ew-gold: #DDB785;
    --ew-dark: #050505;
    --ew-flat: #14161a;
    --ew-flat-shade: #21242a;
    --ew-navy: #020315;
    --header-bg: #191919;
    --ew-light: #F7F7F7;
    --ew-red: #e13232;
    --ew-vwap: #4e2d9e;
    --ew-green: #0F8A3B;
    --ew-brightgreen: #31C46D; /*#05ea5d;*/
    --ew-darkred: #A91E1E;
    --ew-darkgreen: #087231;
    --ew-blue: #334E68;
    --ew-darkborder: #2a2a2a;
    --ew-purple: #543962;
    --ew-pink: #f290af;
    --ew-lavendar: #B2A9DD;
    --ew-lavendar-top: rgba(147,137,197,0.30);
    --ew-lavendar-bottom: rgba(147,137,197,0.04);
    /*    
    --ew-color: #beb2fd;
    --ew-dark: #020315;
    --ew-light: #F4F6FA;*/
    /* */
    color-scheme: light dark;
    /* Core layout */
    --bg: var(--ew-light);
    --surface: #FFFFFF;
    --surface-alt: #EEF1F6;
    /* Text */
    --text: var(--ew-dark);
    --text-muted: #5B6472;
    --text-soft: #7A8493; /* captions/labels only — fails AA for body */
    --text-inverse: #F8FAFC;
    /* Borders / dividers */
    --border: #D6DCE6;
    --border-strong: #B8C1D1;
    /* Brand (lavender). --ew-brand is the canonical name. */
    --ew-brand: var(--ew-color);
    --ew-front: var(--ew-color); /* == --ew-brand; kept for existing markup */
    --ew-front-hover: #7F74B8;
    --ew-front-soft: #E8E5F5;
    --ew-gold: var(--ew-brand); /* DEPRECATED alias for legacy SVG classes */
    /* Accent / links */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-soft: #DBEAFE;
    /* Financial */
    --positive: #0F8A3B;
    --positive-soft: #E6F4EA;
    --negative: var(--ew-red);
    --negative-soft: #FCE8E6;
    --warning: #B7791F;
    --warning-soft: #FFF4D6;
    /* Chart */
    /* Header component (fixed — does NOT flip; header bg is always dark) */

    --header-text: #F4F6FA; /* menu item text on the dark header */
    --header-text-hover: #FFFFFF;
    --header-brand: var(--ew-color);
    /* Layout metrics */
    --header-height: 64px;
    --content-max: 1200px;
    /* UI */
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(2, 3, 21, 0.08);
    --shadow-md: 0 8px 24px rgba(2, 3, 21, 0.12);
    /* Typography */
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-menu: Arial, Helvetica, sans-serif;
    --font-market: Arial, Helvetica, sans-serif;
    /* NAV — theme-invariant: always the blackout helmet */
    --nav-bg: radial-gradient(160% 200% at 20% -60%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 75%), linear-gradient(180deg, #15171B 0%, #0B0C0E 100%);
    --nav-sheen: radial-gradient(160% 200% at 20% -60%, rgba(255, 255, 255, 0.05) 0%, transparent 65%);
    --nav-border: #23262C;
    --nav-text: var(--ew-color);
    --nav-text-hover: #E9E7E0;
    --nav-active: #F1B82D;
    --nav-brand: #E9E7E0;
}

    /* ---- Dark mode ----
   Applies in two situations:
   (a) the user has NOT chosen a theme and the OS prefers dark, or
   (b) the user has manually selected dark via [data-theme="dark"].
   The shared token block below is reused by both via ew-theme-dark.
   To keep it DRY, the identical declarations live in one place and are
   applied by the two selectors that follow. */

    :root[data-theme="dark"] {
        --ew-red: #FF6B6B;

        --bg: var(--ew-dark);
        --surface: var(--ew-flat); /*#0B1024;*/
        --surface-alt: var(--ew-flat-shade); /*#121A33;*/
        --text: var(--ew-light);
        --text-muted: #B4BED0;
        --text-soft: #8995AA;
        --text-inverse: var(--ew-dark);
        --border: var(--ew-darkborder);
        --border-strong: #3A4663;
        --ew-brand: #9389C5;
        --ew-front: #9389C5;
        --ew-front-hover: #B2A9DD;
        --ew-front-soft: rgba(147, 137, 197, 0.18);
        --accent: var(--ew-pink);
        --accent-hover: #AFC8FF;
        --accent-soft: rgba(124, 167, 255, 0.18);
        --positive: #31C46D;
        --positive-soft: rgba(49, 196, 109, 0.16);
        --negative: var(--ew-red);
        --negative-soft: rgba(255, 107, 107, 0.16);
        --warning: #F2B84B;
        --warning-soft: rgba(242, 184, 75, 0.18);
        --ew-darkred: #D94848;
        --ew-green: #31C46D;
        --ew-darkgreen: #1FA85A;
        --ew-blue: #9FB3D1;

        /* Header tokens (--header-*) intentionally NOT redefined here:
           the header bar is always dark, so its text stays light in both
           modes. This is the fix for the dark-mode menu text bug. */

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
    }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ew-red: #FF6B6B;
        --bg: var(--ew-dark);
        --surface: var(--ew-flat); /*#0B1024;*/
        --surface-alt: var(--ew-flat-shade); /*#121A33;*/
        --text: var(--ew-light);
        --text-muted: #B4BED0;
        --text-soft: #8995AA;
        --text-inverse: var(--ew-color);
        --border: var(--ew-darkborder);
        --border-strong: #3A4663;
        --ew-brand: #9389C5;
        --ew-front: #9389C5;
        --ew-front-hover: #B2A9DD;
        --ew-front-soft: rgba(147, 137, 197, 0.18);
        --accent: var(--ew-pink);
        --accent-hover: #AFC8FF;
        --accent-soft: rgba(124, 167, 255, 0.18);
        --positive: #31C46D;
        --positive-soft: rgba(49, 196, 109, 0.16);
        --negative: var(--ew-red);
        --negative-soft: rgba(255, 107, 107, 0.16);
        --warning: #F2B84B;
        --warning-soft: rgba(242, 184, 75, 0.18);
        --ew-darkred: #D94848;
        --ew-green: #31C46D;
        --ew-darkgreen: #1FA85A;
        --ew-blue: #9FB3D1;

        /* Header tokens (--header-*) intentionally NOT redefined here:
           the header bar is always dark, so its text stays light in both
           modes. This is the fix for the dark-mode menu text bug. */

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
    }
}


/* LIGHT — cool silver */
:root, [data-theme="light"] {
    --box-bg: radial-gradient(140% 110% at 30% -20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 45%, transparent 75%), linear-gradient(180deg, #F0F1F2 0%, #E3E5E9 100%);
    --box-border: #DCDEE2;
    --box-shadow: inset 0 -1px 0 rgba(20, 24, 30, 0.05), 0 1px 3px rgba(20, 24, 30, 0.06);
    --box-label: var(--ew-dark);
    --box-value: #24262B;
    --box-sub: #6A6F78;
    /* header */
    --header-bg: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.40) 40%, transparent 70%), linear-gradient(180deg, #F0F1F2 0%, #E2E4E7 100%);
    --header-sheen: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
    --header-mark: #DFE1E5; /* darker than base — embossed */
    --header-border: #DCDEE2;
    --header-shadow: inset 0 -1px 0 rgba(20, 24, 30, 0.05), 0 1px 3px rgba(20, 24, 30, 0.06);
    --header-ticker: #24262B;
    --header-company: #6A6F78;
    --header-meta: #8A8F98;
    --header-price: #24262B;
    /* Boxes */
    --box-inset-bg: rgba(20, 24, 30, 0.05); /* pills — recessed well */
    --box-inset-hover: rgba(20, 24, 30, 0.09);
    --box-inset-border: rgba(20, 24, 30, 0.08);
    --box-inset-text: #6A6F78;
    --box-divider: rgba(20, 24, 30, 0.08); /* signal row rules */
    --box-chip-bg: rgba(143, 110, 18, 0.12); /* grade chip */
    --box-chip-text: #8F6E12;
}

/* DARK — matte helmet */
[data-theme="dark"] {
    --box-bg: radial-gradient(140% 110% at 30% -20%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 75%), linear-gradient(180deg, #16181C 0%, #0E0F12 100%);
    --box-border: #23262C;
    --box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --box-label: var(--ew-color);
    --box-value: #E9E7E0;
    --box-sub: #9AA0A8;
    /* header */
    --header-bg: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 40%, transparent 70%), linear-gradient(180deg, #16181C 0%, #0B0C0E 100%);
    --header-sheen: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.055) 0%, transparent 65%);
    --header-mark: #1A1D22; /* lighter than base — gloss decal */
    --header-border: #23262C;
    --header-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --header-ticker: #E9E7E0;
    --header-company: #9AA0A8;
    --header-meta: #6E7480;
    --header-price: #F1B82D;
    /* Boxes*/
    --box-inset-bg: #0C0D0F;
    --box-inset-hover: #14161A;
    --box-inset-border: #23262C;
    --box-inset-text: #9AA0A8;
    --box-divider: #1E2126;
    --box-chip-bg: rgba(241, 184, 45, 0.14);
    --box-chip-text: #F1B82D;
}



/* ============================================================
   Base reset
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        color: var(--accent-hover);
    }

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    line-height: 1.2;
}

p {
    margin: 0 0 1rem;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Utilities ---- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 2000;
    transform: translateY(-150%);
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius);
    background: var(--ew-front);
    color: var(--ew-dark);
    font-weight: 750;
    text-decoration: none;
}

    .skip-link:focus {
        transform: translateY(0);
    }


/* ==========================================================================
   EW helmet panel — matte black with upper-left key light
   Tone-on-tone watermark under a shared sheen overlay.
   Requires: position:relative and overflow:hidden on the panel so the
   ::after overlay and watermark stay clipped to it.
   ========================================================================== */

.helmet-panel {
    position: relative;
    overflow: hidden;
    background:
    /* key light, upper-left */
    radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 40%, transparent 70%),
    /* matte base with vertical falloff — never pure #000 */
    linear-gradient(180deg, #16181C 0%, #0B0C0E 100%);
}

    /* Sheen overlay: sits above ALL children so the light appears to
   fall across both the base and the watermark — this is what makes
   them read as one lit object with two finishes. */
    .helmet-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.055) 0%, transparent 65%);
    }

    /* Tone-on-tone mark: 4–6% lighter than the base, no more.
   Swap the <span> for your SVG logo with fill #1A1D22 if preferred. */
    .helmet-panel .helmet-mark {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: clamp(64px, 12vw, 120px);
        letter-spacing: 6px;
        color: #1A1D22;
        user-select: none;
        pointer-events: none;
    }

    /* Real content layers above the watermark (z-index not needed for the
   ::after overlay — it's pointer-events:none and nearly transparent). */
    .helmet-panel .helmet-content {
        position: relative;
    }