/* ══════════════════════════════════════════════════════════════════════
   ASP OBSIDIAN — AlphaSignalPro V16.0.0 DESIGN TOKENS
   Final production identity (master prompt §30-31).

   A GENUINELY NEW identity — not a recolor of V15 TERMINAL:
     * Dark-first obsidian terminal for the product (admin + client apps)
     * Porcelain editorial light theme for the public site + auth
     * Jade accent (not the V15 electric blue / navy combination)
     * Space Grotesk display + Inter body + IBM Plex Mono numerals
     * Restrained: no gradients, no glow, no glassmorphism
     * Tabular numerals everywhere prices/P&L appear

   Layer order: ...legacy layers... → tokens-v15 → terminal.css
                → tokens-v16.css → obsidian.css  (V16 wins)
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── App chrome: OBSIDIAN terminal ──────────────────────────── */
    --bg:            #0D1114;
    --bg-deep:       #0A0D10;
    --panel:         #14191E;
    --panel-2:       #1A2128;
    --panel-3:       #202933;
    --elevated:      #1F2830;
    --line:          #26303A;
    --line-2:        #33404D;
    --line-soft:     #1D252D;

    /* ─── Ink on dark ─────────────────────────────────────────────── */
    --ink:           #E8EDF1;
    --ink-2:         #C3CDD6;
    --dim:           #8C99A6;
    --dimmer:        #67737F;
    --ink-inverse:   #0D1114;

    /* ─── Brand: JADE ─────────────────────────────────────────────── */
    --accent:        #2BB596;
    --accent-strong: #23A285;
    --accent-hover:  #3ECFAE;
    --accent-pressed:#1E9C80;
    --accent-soft:   rgba(43, 181, 150, 0.13);
    --accent-line:   rgba(43, 181, 150, 0.35);
    --accent-ink:    #0A1512;

    /* ─── Trading semantics (AA on obsidian) ─────────────────────── */
    --up:            #2FC98F;
    --up-soft:       rgba(47, 201, 143, 0.14);
    --down:          #F0616D;
    --down-soft:     rgba(240, 97, 109, 0.14);
    --warn:          #E5A50A;
    --warn-soft:     rgba(229, 165, 10, 0.14);
    --info:          #4AA3DF;
    --info-soft:     rgba(74, 163, 223, 0.14);
    --purple:        #A78BFA;
    --purple-soft:   rgba(167, 139, 250, 0.14);
    --cyan:          #45C4D8;
    --cyan-soft:     rgba(69, 196, 216, 0.13);

    /* signal + execution colors (§31) */
    --sig-buy:       var(--up);
    --sig-sell:      var(--down);
    --exec-ok:       var(--up);
    --exec-rej:      var(--down);
    --exec-wait:     var(--warn);

    /* ─── Status pills ───────────────────────────────────────────── */
    --pill-ok-bg:    rgba(47, 201, 143, 0.13);
    --pill-ok-ink:   #5ADBA8;
    --pill-bad-bg:   rgba(240, 97, 109, 0.13);
    --pill-bad-ink:  #F58A93;
    --pill-warn-bg:  rgba(229, 165, 10, 0.13);
    --pill-warn-ink: #EFC05C;
    --pill-info-bg:  rgba(74, 163, 223, 0.13);
    --pill-info-ink: #7FBEE8;
    --pill-idle-bg:  rgba(140, 153, 166, 0.12);
    --pill-idle-ink: #9AA7B4;

    /* ─── Typography ─────────────────────────────────────────────── */
    --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    --text-2xs: 10px;
    --text-xs:  11px;
    --text-sm:  12.5px;
    --text-md:  13.5px;
    --text-lg:  15px;
    --text-xl:  18px;
    --text-2xl: 24px;
    --text-hero: clamp(30px, 4.2vw, 52px);

    /* ─── Geometry ───────────────────────────────────────────────── */
    --radius:    8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --rail-w:    244px;
    --topbar-h:  52px;

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

    /* ─── Elevation (restrained: borders carry depth, not shadows) ─ */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
    --overlay:  rgba(4, 6, 8, 0.72);

    /* ─── Z stack ────────────────────────────────────────────────── */
    --z-drop: 300;
    --z-drawer: 400;
    --z-sticky: 500;
    --z-bottomnav: 450;
    --z-modal: 600;
    --z-toast: 700;

    /* ─── Motion ─────────────────────────────────────────────────── */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --t-fast: 140ms;
    --t-med: 240ms;
}

/* ══════════════════════════════════════════════════════════════════════
   PUBLIC SITE + AUTH THEME (porcelain editorial, light)
   Applied via <body class="pub-body"> / auth shells — the app stays dark.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --pub-bg:      #FAFAF8;
    --pub-panel:   #FFFFFF;
    --pub-line:    #E7E6E1;
    --pub-line-2:  #D6D5CE;
    --pub-ink:     #14181C;
    --pub-ink-2:   #3C444D;
    --pub-dim:     #6B7480;
    --pub-accent:  #0E8C6F;
    --pub-accent-deep: #0A6B55;
    --pub-accent-soft: rgba(14, 140, 111, 0.09);
    --pub-up:      #0E8C6F;
    --pub-down:    #C7444E;
    --pub-code-bg: #F1F1ED;
}

/* ══════════════════════════════════════════════════════════════════════
   LEGACY VARIABLE SHIM — every older layer that reads the shared
   tokens gets OBSIDIAN values (this is how the WHOLE app re-skins
   without touching 51 templates).
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --mdn-chrome:       var(--bg-deep);
    --mdn-chrome-2:     #10151A;
    --mdn-chrome-line:  var(--line);
    --mdn-chrome-ink:   var(--ink);
    --mdn-chrome-ink-2: var(--dim);
    --canvas:  var(--bg);
    --surface: var(--panel);
    --surface-2: var(--panel-2);
    --border:  var(--line);
    --border-strong: var(--line-2);
    --fg: var(--ink);
    --fg-2: var(--ink-2);
    --fg-muted: var(--dim);
    --fg-faint: var(--dimmer);
    --amber: var(--warn);
    --amber-soft: var(--warn-soft);
    --red: var(--down);
    --green: var(--up);
    --blue: var(--info);
    --focus-ring: 0 0 0 3px rgba(43, 181, 150, 0.28);
}

/* V16.0.1 — WORKING THEME SWITCH. "Obsidian Night" stays the default
   identity; "Porcelain Day" is a real light app theme (not a no-op).
   The dropdown in the topbar now visibly re-skins the whole terminal. */
[data-theme="dark"] {
    /* explicit dark: identical to the :root obsidian values. Exists so
       the attribute toggle is symmetrical and future dark-only extras
       have a hook. */
    --mdn-chrome-dim:    var(--dim);
    --mdn-chrome-active: var(--panel-3);
}

[data-theme="light"] {
    /* ─── App chrome: PORCELAIN DAY (light) ──────────────────────── */
    --bg:            #FAFAF8;
    --bg-deep:       #F1F1ED;
    --panel:         #FFFFFF;
    --panel-2:       #F6F6F3;
    --panel-3:       #EFEFEB;
    --elevated:      #FFFFFF;
    --line:          #E4E4DF;
    --line-2:        #D6D5CE;
    --line-soft:     #EBEBE6;

    /* ─── Ink on light ────────────────────────────────────────────── */
    --ink:           #14181C;
    --ink-2:         #3C444D;
    --dim:           #6B7480;
    --dimmer:        #8F97A0;
    --ink-inverse:   #FAFAF8;

    /* ─── Brand: JADE darkened for AA on porcelain ───────────────── */
    --accent:        #0E8C6F;
    --accent-strong: #0A6B55;
    --accent-hover:  #0FA383;
    --accent-pressed:#0A6B55;
    --accent-soft:   rgba(14, 140, 111, 0.10);
    --accent-line:   rgba(14, 140, 111, 0.35);
    --accent-ink:    #FFFFFF;

    /* ─── Trading semantics (AA on light) ─────────────────────────── */
    --up:            #0E8C6F;
    --up-soft:       rgba(14, 140, 111, 0.10);
    --down:          #C7444E;
    --down-soft:     rgba(199, 68, 78, 0.10);
    --warn:          #96650D;
    --warn-soft:     rgba(150, 101, 13, 0.12);
    --info:          #2A6FA8;
    --info-soft:     rgba(42, 111, 168, 0.10);
    --purple:        #6D4FD4;
    --purple-soft:   rgba(109, 79, 212, 0.10);
    --cyan:          #158A9B;
    --cyan-soft:     rgba(21, 138, 155, 0.10);

    /* signal + execution colors track the semantics */
    --sig-buy:       var(--up);
    --sig-sell:      var(--down);
    --exec-ok:       var(--up);
    --exec-rej:      var(--down);
    --exec-wait:     var(--warn);

    /* ─── Status pills (inks darkened for light chips) ───────────── */
    --pill-ok-bg:    rgba(14, 140, 111, 0.12);
    --pill-ok-ink:   #0A6B55;
    --pill-bad-bg:   rgba(199, 68, 78, 0.12);
    --pill-bad-ink:  #A93038;
    --pill-warn-bg:  rgba(150, 101, 13, 0.14);
    --pill-warn-ink: #7A510A;
    --pill-info-bg:  rgba(42, 111, 168, 0.12);
    --pill-info-ink: #1F5A8C;
    --pill-idle-bg:  rgba(107, 116, 128, 0.12);
    --pill-idle-ink: #4A525C;

    /* ─── Elevation: airy shadows on porcelain ───────────────────── */
    --shadow-1: 0 1px 2px rgba(20, 24, 28, 0.06);
    --shadow-2: 0 6px 24px rgba(20, 24, 28, 0.10);
    --overlay:  rgba(20, 24, 28, 0.45);

    /* legacy shim hardcodes that must follow the light chrome */
    --mdn-chrome-2: #F7F7F4;
    --mdn-chrome-dim:    var(--dim);
    --mdn-chrome-active: var(--accent-soft);
    --focus-ring: 0 0 0 3px rgba(14, 140, 111, 0.22);
}

/* ══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY BASE — display + body + tabular numerals
   ══════════════════════════════════════════════════════════════════════ */
html { font-size: 16px; }
body, .mdn-app {
    font-family: var(--sans);
    font-size: var(--text-md);
    color: var(--ink);
    background: var(--bg);
    font-feature-settings: "cv05" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display, .mdn-page-head h1 {
    font-family: var(--display);
    letter-spacing: -0.015em;
    font-weight: 600;
}
.num, .mono, td.num, .mdn-table td, .kpi-value, .price, .pnl {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}