/*
   NOVOGEX semantic theme layer.
   Components must use these semantic variables rather than raw hex values.
*/
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --ngx-bg: var(--ngx-navy-900);
    --ngx-bg-soft: var(--ngx-navy-800);
    --ngx-bg-subtle: var(--ngx-navy-850);
    --ngx-surface: var(--ngx-navy-700);
    --ngx-surface-2: var(--ngx-navy-650);
    --ngx-surface-3: var(--ngx-navy-600);
    --ngx-surface-elevated: #0d2034;
    --ngx-card: rgba(11, 25, 41, .84);
    --ngx-card-hover: rgba(16, 36, 59, .94);

    --ngx-border: rgba(132, 166, 205, .22);
    --ngx-border-subtle: rgba(132, 166, 205, .12);
    --ngx-border-strong: rgba(54, 137, 255, .46);
    --ngx-divider: rgba(132, 166, 205, .14);

    --ngx-primary: var(--ngx-blue-600);
    --ngx-primary-2: #1b8cff;
    --ngx-primary-hover: #2c91ff;
    --ngx-primary-active: #0861df;
    --ngx-primary-soft: rgba(13, 110, 253, .13);
    --ngx-primary-softer: rgba(13, 110, 253, .075);
    --ngx-primary-border: rgba(43, 145, 255, .58);

    --ngx-text: #f4f8ff;
    --ngx-text-secondary: #a8b4c4;
    --ngx-text-muted: #708097;
    --ngx-text-disabled: #566477;
    --ngx-text-inverse: #07111d;
    --ngx-link: #5baeff;
    --ngx-link-hover: #8bc7ff;

    --ngx-success: var(--ngx-green-500);
    --ngx-success-soft: rgba(36, 200, 129, .12);
    --ngx-success-border: rgba(36, 200, 129, .34);
    --ngx-warning: var(--ngx-amber-500);
    --ngx-warning-soft: rgba(244, 184, 74, .12);
    --ngx-warning-border: rgba(244, 184, 74, .34);
    --ngx-error: var(--ngx-red-500);
    --ngx-error-soft: rgba(255, 95, 105, .12);
    --ngx-error-border: rgba(255, 95, 105, .34);
    --ngx-info: #55abff;
    --ngx-info-soft: rgba(85, 171, 255, .12);
    --ngx-info-border: rgba(85, 171, 255, .34);

    --ngx-input-bg: rgba(3, 10, 19, .55);
    --ngx-input-bg-hover: rgba(8, 21, 35, .9);
    --ngx-input-border: rgba(132, 166, 205, .28);
    --ngx-input-placeholder: #64758a;
    --ngx-input-disabled-bg: rgba(8, 21, 35, .48);

    --ngx-header-bg: rgba(3, 10, 19, .84);
    --ngx-footer-bg: rgba(2, 8, 15, .74);
    --ngx-menu-bg: #081523;
    --ngx-overlay: rgba(0, 5, 12, .72);

    --ngx-gradient-page-a: rgba(13, 110, 253, .07);
    --ngx-gradient-page-b: rgba(27, 140, 255, .045);
    --ngx-gradient-card: linear-gradient(155deg, rgba(12, 28, 46, .92), rgba(5, 14, 24, .90));
    --ngx-gradient-panel: linear-gradient(135deg, #08192b 0%, #06111d 48%, #071321 100%);
    --ngx-gradient-cta: linear-gradient(100deg, #081a2b, #071421 68%, #081b2d);
    --ngx-gradient-primary: linear-gradient(135deg, var(--ngx-primary), #0965e8);

    --ngx-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
    --ngx-shadow-sm: 0 8px 24px rgba(0, 0, 0, .20);
    --ngx-shadow-card: 0 18px 55px rgba(0, 0, 0, .25);
    --ngx-shadow-lg: 0 28px 80px rgba(0, 0, 0, .34);
    --ngx-shadow-blue: 0 0 40px rgba(13, 110, 253, .15);
    --ngx-focus-ring: 0 0 0 3px rgba(37, 141, 255, .26);
}

:root[data-theme="light"] {
    color-scheme: light;

    --ngx-bg: #f5f8fc;
    --ngx-bg-soft: #eef4fa;
    --ngx-bg-subtle: #f9fbfd;
    --ngx-surface: #ffffff;
    --ngx-surface-2: #f7f9fc;
    --ngx-surface-3: #edf2f8;
    --ngx-surface-elevated: #ffffff;
    --ngx-card: rgba(255, 255, 255, .94);
    --ngx-card-hover: #ffffff;

    --ngx-border: rgba(57, 82, 111, .18);
    --ngx-border-subtle: rgba(57, 82, 111, .10);
    --ngx-border-strong: rgba(13, 110, 253, .42);
    --ngx-divider: rgba(57, 82, 111, .13);

    --ngx-primary: #0d6efd;
    --ngx-primary-2: #0876ed;
    --ngx-primary-hover: #075fd3;
    --ngx-primary-active: #064fae;
    --ngx-primary-soft: rgba(13, 110, 253, .10);
    --ngx-primary-softer: rgba(13, 110, 253, .055);
    --ngx-primary-border: rgba(13, 110, 253, .40);

    --ngx-text: #142033;
    --ngx-text-secondary: #526176;
    --ngx-text-muted: #748399;
    --ngx-text-disabled: #a2adbb;
    --ngx-text-inverse: #ffffff;
    --ngx-link: #075fd3;
    --ngx-link-hover: #064fae;

    --ngx-success: #128457;
    --ngx-success-soft: rgba(18, 132, 87, .09);
    --ngx-success-border: rgba(18, 132, 87, .28);
    --ngx-warning: #aa6d00;
    --ngx-warning-soft: rgba(170, 109, 0, .09);
    --ngx-warning-border: rgba(170, 109, 0, .28);
    --ngx-error: #c93a46;
    --ngx-error-soft: rgba(201, 58, 70, .08);
    --ngx-error-border: rgba(201, 58, 70, .26);
    --ngx-info: #0c6fdc;
    --ngx-info-soft: rgba(12, 111, 220, .08);
    --ngx-info-border: rgba(12, 111, 220, .25);

    --ngx-input-bg: #ffffff;
    --ngx-input-bg-hover: #ffffff;
    --ngx-input-border: rgba(57, 82, 111, .24);
    --ngx-input-placeholder: #8794a5;
    --ngx-input-disabled-bg: #edf2f7;

    --ngx-header-bg: rgba(248, 251, 255, .88);
    --ngx-footer-bg: rgba(238, 244, 250, .88);
    --ngx-menu-bg: #ffffff;
    --ngx-overlay: rgba(20, 32, 51, .46);

    --ngx-gradient-page-a: rgba(13, 110, 253, .07);
    --ngx-gradient-page-b: rgba(27, 140, 255, .045);
    --ngx-gradient-card: linear-gradient(155deg, #ffffff, #f6f9fc);
    --ngx-gradient-panel: linear-gradient(135deg, #ffffff 0%, #f7fafe 52%, #eef5fb 100%);
    --ngx-gradient-cta: linear-gradient(100deg, #ffffff, #f2f7fd 68%, #eaf3fc);
    --ngx-gradient-primary: linear-gradient(135deg, #1678ff, #075fd3);

    --ngx-shadow-xs: 0 1px 2px rgba(31, 49, 71, .08);
    --ngx-shadow-sm: 0 8px 24px rgba(31, 49, 71, .08);
    --ngx-shadow-card: 0 18px 55px rgba(31, 49, 71, .10);
    --ngx-shadow-lg: 0 28px 80px rgba(31, 49, 71, .13);
    --ngx-shadow-blue: 0 0 40px rgba(13, 110, 253, .10);
    --ngx-focus-ring: 0 0 0 3px rgba(13, 110, 253, .18);
}

/* Theme-toggle icon state lives globally because the component itself uses scoped CSS. */
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }
html[data-theme="light"] .theme-toggle .sun { display: block; }
html[data-theme="light"] .theme-toggle .moon { display: none; }
html[data-theme="light"] .brand-logo .dark-logo { display: none; }
html[data-theme="light"] .brand-logo .light-logo { display: block; }
html[data-theme="dark"] .brand-logo .dark-logo { display: block; }
html[data-theme="dark"] .brand-logo .light-logo { display: none; }

/* Stable dark product-showcase palette. These surfaces intentionally stay dark in both themes. */
:root {
    --ngx-showcase-bg: #06111f;
    --ngx-showcase-bg-2: #040d18;
    --ngx-showcase-surface: #081523;
    --ngx-showcase-surface-2: #0b1929;
    --ngx-showcase-border: rgba(93, 137, 192, .28);
    --ngx-showcase-divider: rgba(255, 255, 255, .075);
    --ngx-showcase-text: #f4f8ff;
    --ngx-showcase-text-secondary: #a8b4c4;
    --ngx-showcase-text-muted: #708097;
}