/* VANTIQ Design System: canonical product tokens and compatibility aliases. */
:root {
    color-scheme: dark;

    /* Background */
    --app-bg-outer: #000103;
    --app-bg-mid: #010812;
    --app-bg-navy: #031329;
    --bg-primary: var(--app-bg-outer);
    --bg-secondary: #040b13;
    --bg-tertiary: #071321;

    /* Surfaces */
    --surface-1: #060f19;
    --surface-2: #081321;
    --surface-elevated: #0a1624;
    --surface-control: #0b1725;
    --surface-control-hover: #101d2c;
    --surface-selected: rgba(53, 200, 60, 0.09);

    /* Borders */
    --border-subtle: #182536;
    --border-default: #213044;
    --border-strong: #30425a;

    /* Text */
    --text-primary: #f5f6f8;
    --text-secondary: #a0a9b8;
    --text-muted: #737f91;
    --text-disabled: #566273;

    /* Brand */
    --brand: #35c83c;
    --brand-hover: #45d64b;
    --brand-active: #2faf35;
    --brand-muted: #1a742b;
    --brand-rgb: 53, 200, 60;
    --brand-soft: rgba(var(--brand-rgb), 0.10);
    --brand-border: rgba(var(--brand-rgb), 0.30);

    /* Semantic states */
    --positive: #36d17a;
    --positive-soft: rgba(54, 209, 122, 0.10);
    --positive-border: rgba(54, 209, 122, 0.28);
    --negative: #ff6169;
    --negative-soft: rgba(255, 97, 105, 0.10);
    --negative-border: rgba(255, 97, 105, 0.28);
    --warning: #f3b34c;
    --warning-soft: rgba(243, 179, 76, 0.10);
    --warning-border: rgba(243, 179, 76, 0.28);
    --alternative: #a78bfa;
    --alternative-soft: rgba(167, 139, 250, 0.11);
    --info: #6ea8d8;
    --info-soft: rgba(110, 168, 216, 0.10);

    /* Data visualization */
    --chart-portfolio: #65a9ff;
    --chart-benchmark-price: #ff626c;
    --chart-benchmark-total-return: #31d58b;
    --chart-grid: rgba(160, 169, 184, 0.13);
    --chart-neutral: #9aa8bc;

    /* Interaction and overlay */
    --focus-ring: rgba(69, 214, 75, 0.72);
    --focus-ring-soft: rgba(69, 214, 75, 0.20);
    --overlay: rgba(0, 5, 12, 0.76);
    --shadow-elevated: 0 20px 48px rgba(0, 0, 0, 0.34);
    --shadow-control: 0 8px 18px rgba(0, 0, 0, 0.20);
    --vantiq-section-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);

    /* Shape and rhythm */
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --control-height: 46px;

    /* Typography: semantic roles, not page-specific guesses. */
    --text-xs: 12px;
    --leading-xs: 16px;
    --text-sm: 13px;
    --leading-sm: 18px;
    --text-md: 14px;
    --leading-md: 20px;
    --text-control: 15px;
    --leading-control: 20px;
    --text-base: 16px;
    --leading-base: 22px;
    --title-sm: 18px;
    --leading-title-sm: 24px;
    --title-md: 22px;
    --leading-title-md: 28px;
    --title-lg: clamp(30px, 2.2vw, 32px);
    --leading-title-lg: 38px;
    --metric-md: 24px;
    --leading-metric-md: 30px;
    --metric-lg: clamp(27px, 2.4vw, 32px);
    --leading-metric-lg: 38px;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Shared controls and high-emphasis action. */
    --action-primary-bg: #edf2f7;
    --action-primary-hover: #ffffff;
    --action-primary-text: #06111e;

    /* Compatibility aliases for existing component owners. */
    --bg: var(--bg-primary);
    --panel: var(--surface-1);
    --panel-strong: var(--surface-2);
    --border: var(--border-subtle);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --danger: var(--negative);
    --accent-start: var(--brand);
    --accent-end: var(--brand-active);
    --shadow: var(--shadow-elevated);
    --module-title-font-size: var(--title-sm);
    --module-title-line-height: var(--leading-title-sm);
    --module-title-letter-spacing: -0.035em;
    --module-subheading-color: var(--text-secondary);
    --module-subheading-muted-color: var(--text-muted);
    --module-subheading-shadow: none;

    --vantiq-bg-0: var(--bg-primary);
    --vantiq-bg-1: var(--bg-secondary);
    --vantiq-bg-2: var(--bg-tertiary);
    /* Canonical application backdrop. Black owns the edges; a localized navy
       undertone adds depth without becoming a spotlight or decorative glow. */
    --vantiq-page-bg: radial-gradient(
        ellipse 82% 86% at 36% 41%,
        var(--app-bg-navy) 0%,
        #011020 31%,
        var(--app-bg-mid) 60%,
        #000309 84%,
        var(--app-bg-outer) 100%
    );
    --vantiq-surface-card: var(--surface-1);
    --vantiq-surface-elevated: var(--surface-elevated);
    --vantiq-surface-soft: rgba(255, 255, 255, 0.025);
    --vantiq-surface-row: rgba(255, 255, 255, 0.024);
    --vantiq-surface-row-hover: rgba(255, 255, 255, 0.042);
    --vantiq-surface-control: var(--surface-control);
    --vantiq-surface-control-hover: var(--surface-control-hover);
    --vantiq-surface-popup: var(--surface-elevated);
    --vantiq-border-hairline: var(--border-subtle);
    --vantiq-border-soft: var(--border-default);
    --vantiq-border-strong: var(--border-strong);
    --vantiq-text-primary: var(--text-primary);
    --vantiq-text-secondary: var(--text-secondary);
    --vantiq-text-muted: var(--text-muted);
    --vantiq-text-faint: var(--text-disabled);
    --vantiq-brand: var(--brand);
    --vantiq-brand-soft: var(--brand-soft);
    --vantiq-brand-border: var(--brand-border);
    --vantiq-accent-blue: var(--brand);
    --vantiq-accent-blue-soft: var(--brand-soft);
    --vantiq-accent-blue-border: var(--brand-border);
    --vantiq-good: var(--positive);
    --vantiq-good-text: #c9f7dc;
    --vantiq-good-soft: var(--positive-soft);
    --vantiq-good-border: var(--positive-border);
    --vantiq-bad: var(--negative);
    --vantiq-bad-text: #ffd6d9;
    --vantiq-bad-soft: var(--negative-soft);
    --vantiq-bad-border: var(--negative-border);
    --vantiq-warn-text: #ffe3b2;
    --vantiq-warn-soft: var(--warning-soft);
    --vantiq-warn-border: var(--warning-border);
    --vantiq-hover-lift-shadow: 0 14px 30px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    --vantiq-hover-lift-transform: translateY(-1px);
    --vantiq-hover-lift-transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

@media (max-width: 620px) {
    :root {
        --title-lg: 26px;
        --leading-title-lg: 32px;
    }
}