/* NexerIQ design tokens (NEXER-1248).
 *
 * The code is the source of truth for these names; the Figma library (NexerIQ Design System,
 * Foundations page) mirrors them. A Figma variable "primary/hover" has the code syntax
 * var(--nexeriq-primary-hover): the group and the name are joined with a hyphen, and "default" is
 * dropped. See the DevOp.Blazor.Velex README for the full table.
 *
 * This file defines the --nexeriq-* custom properties, plus the Bootstrap-free --app-* aliases the
 * DevOp.Blazor.Shared.Primitives stylesheet falls back to and the matching solid-fill foregrounds. It
 * sets no Bootstrap variable; nexeriq-bootstrap.css does that mapping. Opt in through NexerIQThemeProfile; a host that does
 * not link this file is unaffected.
 *
 * Every colour that a Bootstrap *-rgb variable needs also has an --nexeriq-*-rgb companion, because
 * CSS cannot split a hex colour into channels. A test keeps each pair in step.
 *
 * Status colours (danger, success, warning, info, on-status) are fixed product colours. They are
 * never derived from the brand primary and must stay that way when a tenant brand is added later. */

:root,
[data-bs-theme="light"] {
    /* Background */
    --nexeriq-bg: #f8fafc;
    --nexeriq-bg-rgb: 248, 250, 252;
    --nexeriq-surface: #ffffff;
    --nexeriq-surface-rgb: 255, 255, 255;
    --nexeriq-surface-subtle: #f1f5f9;
    --nexeriq-surface-subtle-rgb: 241, 245, 249;
    --nexeriq-input-readonly-bg: #f1f5f9;
    --nexeriq-hover: #f1f5f9;
    --nexeriq-selected: #eff6ff;
    --nexeriq-overlay: #0f172a;

    /* Text */
    --nexeriq-text: #0f172a;
    --nexeriq-text-rgb: 15, 23, 42;
    --nexeriq-text-secondary: #334155;
    --nexeriq-text-secondary-rgb: 51, 65, 85;
    --nexeriq-muted: #64748b;
    --nexeriq-muted-rgb: 100, 116, 139;
    --nexeriq-on-primary: #ffffff;
    --nexeriq-link: #2563eb;
    --nexeriq-link-rgb: 37, 99, 235;
    --nexeriq-on-status: #ffffff;

    /* Brand primary */
    --nexeriq-primary: #2563eb;
    --nexeriq-primary-rgb: 37, 99, 235;
    --nexeriq-primary-hover: #1d4ed8;
    --nexeriq-primary-subtle: #eff6ff;
    --nexeriq-primary-text: #1d4ed8;
    --nexeriq-primary-text-rgb: 29, 78, 216;

    /* Border */
    --nexeriq-border: #e2e8f0;
    --nexeriq-border-strong: #cbd5e1;
    --nexeriq-focus: #2563eb;

    /* Status: fixed, never brand-controlled */
    --nexeriq-danger: #dc2626;
    --nexeriq-danger-rgb: 220, 38, 38;
    --nexeriq-danger-hover: #b91c1c;
    --nexeriq-danger-subtle: #fef2f2;
    --nexeriq-danger-text: #b91c1c;
    --nexeriq-success: #15803d;
    --nexeriq-success-rgb: 21, 128, 61;
    --nexeriq-success-subtle: #f0fdf4;
    --nexeriq-success-text: #166534;
    --nexeriq-warning: #b45309;
    --nexeriq-warning-rgb: 180, 83, 9;
    --nexeriq-warning-subtle: #fffbeb;
    --nexeriq-info: #0369a1;
    --nexeriq-info-rgb: 3, 105, 161;
    --nexeriq-info-subtle: #f0f9ff;
}

[data-bs-theme="dark"] {
    /* Background */
    --nexeriq-bg: #06111f;
    --nexeriq-bg-rgb: 6, 17, 31;
    --nexeriq-surface: #0f172a;
    --nexeriq-surface-rgb: 15, 23, 42;
    --nexeriq-surface-subtle: #1e293b;
    --nexeriq-surface-subtle-rgb: 30, 41, 59;
    --nexeriq-input-readonly-bg: #111c2e;
    --nexeriq-hover: #1e293b;
    --nexeriq-selected: #172554;
    --nexeriq-overlay: #020617;

    /* Text */
    --nexeriq-text: #f8fafc;
    --nexeriq-text-rgb: 248, 250, 252;
    --nexeriq-text-secondary: #cbd5e1;
    --nexeriq-text-secondary-rgb: 203, 213, 225;
    --nexeriq-muted: #94a3b8;
    --nexeriq-muted-rgb: 148, 163, 184;
    --nexeriq-on-primary: #ffffff;
    --nexeriq-link: #60a5fa;
    --nexeriq-link-rgb: 96, 165, 250;
    --nexeriq-on-status: #0f172a;

    /* Brand primary: the brand guide keeps #2563EB in both modes. */
    --nexeriq-primary: #2563eb;
    --nexeriq-primary-rgb: 37, 99, 235;
    --nexeriq-primary-hover: #1d4ed8;
    --nexeriq-primary-subtle: #172554;
    --nexeriq-primary-text: #93c5fd;
    --nexeriq-primary-text-rgb: 147, 197, 253;

    /* Border */
    --nexeriq-border: #1e293b;
    --nexeriq-border-strong: #243044;
    --nexeriq-focus: #60a5fa;

    /* Status: fixed, never brand-controlled */
    --nexeriq-danger: #f87171;
    --nexeriq-danger-rgb: 248, 113, 113;
    --nexeriq-danger-hover: #fca5a5;
    --nexeriq-danger-subtle: #2a1215;
    --nexeriq-danger-text: #fca5a5;
    --nexeriq-success: #4ade80;
    --nexeriq-success-rgb: 74, 222, 128;
    --nexeriq-success-subtle: #0f2a1a;
    --nexeriq-success-text: #86efac;
    --nexeriq-warning: #fbbf24;
    --nexeriq-warning-rgb: 251, 191, 36;
    --nexeriq-warning-subtle: #2a2110;
    --nexeriq-info: #38bdf8;
    --nexeriq-info-rgb: 56, 189, 248;
    --nexeriq-info-subtle: #0c2233;
}

/* Dimension and type tokens do not change between modes. */
:root {
    --nexeriq-space-half: 2px;
    --nexeriq-space-1: 4px;
    --nexeriq-space-2: 8px;
    --nexeriq-space-3: 12px;
    --nexeriq-space-4: 16px;
    --nexeriq-space-5: 20px;
    --nexeriq-space-6: 24px;
    --nexeriq-space-8: 32px;

    --nexeriq-radius-sm: 4px;
    --nexeriq-radius-md: 6px;
    --nexeriq-radius-lg: 8px;

    /* Two control sizes only (L6): Small and Medium. */
    --nexeriq-control-height-sm: 26px;
    --nexeriq-control-height-md: 30px;

    /* Text styles NexerIQ/<Style>: size, line height and weight per style. */
    --nexeriq-font-sans: "Inter", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --nexeriq-type-title-size: 1.25rem;
    --nexeriq-type-title-line-height: 1.75rem;
    --nexeriq-type-title-weight: 600;
    --nexeriq-type-heading-size: 0.9375rem;
    --nexeriq-type-heading-line-height: 1.375rem;
    --nexeriq-type-heading-weight: 600;
    --nexeriq-type-body-size: 0.875rem;
    --nexeriq-type-body-line-height: 1.25rem;
    --nexeriq-type-body-weight: 400;
    --nexeriq-type-body-strong-size: 0.875rem;
    --nexeriq-type-body-strong-line-height: 1.25rem;
    --nexeriq-type-body-strong-weight: 500;
    --nexeriq-type-small-size: 0.8125rem;
    --nexeriq-type-small-line-height: 1.125rem;
    --nexeriq-type-small-weight: 400;
    --nexeriq-type-label-size: 0.75rem;
    --nexeriq-type-label-line-height: 1rem;
    --nexeriq-type-label-weight: 500;
    --nexeriq-type-caption-size: 0.75rem;
    --nexeriq-type-caption-line-height: 1rem;
    --nexeriq-type-caption-weight: 400;
    --nexeriq-type-overline-size: 0.6875rem;
    --nexeriq-type-overline-line-height: 1rem;
    --nexeriq-type-overline-weight: 600;
    --nexeriq-type-overline-letter-spacing: 0.04em;
}

/* Bootstrap-free aliases. primitives.css reads var(--bs-…, var(--app-…, literal)), so these apply only
   on a page that does not load Bootstrap; with Bootstrap, nexeriq-bootstrap.css sets the --bs-* side.
   Redeclared on every themed element so a nested data-bs-theme block resolves its own tokens. */
:root,
[data-bs-theme] {
    --app-surface: var(--nexeriq-surface);
    --app-border: var(--nexeriq-border);
    --app-primary: var(--nexeriq-primary);
    --app-text: var(--nexeriq-text);
    --app-text-muted: var(--nexeriq-muted);
    --app-radius: var(--nexeriq-radius-md);
    --app-radius-sm: var(--nexeriq-radius-sm);
    --app-secondary: var(--nexeriq-muted);
    --app-success: var(--nexeriq-success);
    --app-warning: var(--nexeriq-warning);
    --app-info: var(--nexeriq-info);
    --app-danger: var(--nexeriq-danger);
    --app-light: var(--nexeriq-surface-subtle);
    --app-dark: var(--nexeriq-text);
}

/* Bootstrap-free solid fills. primitives.css writes white text on every solid badge and avatar (in
   :where(), so zero specificity); with the light dark-mode fills above that is unreadable, so the
   foreground follows the same contrast tokens nexeriq-bootstrap.css uses for .text-bg-*. */
.app-tone-primary:is(.app-badge--solid, .app-icon-avatar__title--solid) { color: var(--nexeriq-on-primary); }
.app-tone-secondary:is(.app-badge--solid, .app-icon-avatar__title--solid),
.app-tone-dark:is(.app-badge--solid, .app-icon-avatar__title--solid) { color: var(--nexeriq-surface); }
.app-tone-light:is(.app-badge--solid, .app-icon-avatar__title--solid) { color: var(--nexeriq-text); }
.app-tone-success:is(.app-badge--solid, .app-icon-avatar__title--solid),
.app-tone-danger:is(.app-badge--solid, .app-icon-avatar__title--solid),
.app-tone-warning:is(.app-badge--solid, .app-icon-avatar__title--solid),
.app-tone-info:is(.app-badge--solid, .app-icon-avatar__title--solid) { color: var(--nexeriq-on-status); }