/* ============================================================
   QuantCalc UI v2 — semantic design tokens.
   Identity: precision instrument. Light is the default; dark is
   a first-class equal. Raw palette values live in main.css :root;
   this file maps them to ROLES so themes can flip safely.
   Loaded BEFORE main.css. Classic UI does not load this file.
   ============================================================ */

:root {
    /* Surfaces */
    --surface-page: #f7f8fa;
    --surface-card: #ffffff;
    --surface-raised: #eef1f5;

    /* Ink (text) */
    --ink: #131a22;
    --ink-muted: #5b6674;
    --ink-faint: #6b7583; /* 4.67:1 on --surface-card (WCAG AA) */

    /* Lines */
    --border: #e3e7ec;
    --border-strong: #c9d0d9;

    /* Accent — evolution of QuantCalc blue */
    --accent: #1e56c8;
    --accent-hover: #17439e;
    --accent-ink: #ffffff;
    --accent-surface: #eaf0fb;

    /* Status */
    --ok: #177245;
    --warn: #a05e03;
    --danger: #b3261e;

    /* Charts (provisional; Phase 2 finalizes with the dataviz palette) */
    --chart-grid: #e9edf2;
    --chart-tick: #7c8694;

    /* Numerals: apply via the .num utility or font-variant on inputs */
    --numeric-features: "tnum" 1, "lnum" 1;
}

[data-theme="dark"] {
    --surface-page: #10151c;
    --surface-card: #171e27;
    --surface-raised: #1f2833;

    --ink: #e7ecf2;
    --ink-muted: #9daab8;
    --ink-faint: #7a8694; /* 4.53:1 on --surface-card (WCAG AA) */

    --border: #263140;
    --border-strong: #364354;

    --accent: #6ea1ff;
    --accent-hover: #8db6ff;
    --accent-ink: #0c1320;
    --accent-surface: #1b2739;

    --ok: #4cc38a;
    --warn: #e0a336;
    --danger: #ef6a5e;

    --chart-grid: #242f3d;
    --chart-tick: #8b97a6;
}

/* Numeric alignment utility — all dollar/percent figures use this. */
.num,
input[type="number"],
.percentile-value {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Theme change should not animate on first paint; .theme-ready is added
   by js/theme.js after load so subsequent flips ease gently. */
.theme-ready body,
.theme-ready .dashboard,
.theme-ready .header {
    transition: background-color 160ms ease, color 160ms ease,
                border-color 160ms ease;
}

/* Theme toggle */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: inherit;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.theme-toggle:hover { border-color: var(--border-strong); }

/* Classic-UI switch link: inline-block padding grows the tap target to
   >= 24px tall (WCAG 2.5.8) without changing the text size. */
.ui-switch-row a {
    display: inline-block;
    padding: 6px 10px;
}
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }