/* Central theme token registry. Keep shared custom properties here. */

:root {
    --font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Base palettes */
    --palette-primary-50: #ecfff9;
    --palette-primary-100: #d3fff0;
    --palette-primary-200: #a6f5de;
    --palette-primary-300: #5feac4;
    --palette-primary-400: #14e1a0;
    --palette-primary-500: #0fbe8c;
    --palette-primary-600: #0a9279;
    --palette-primary-700: #08727a;
    --palette-primary-800: #00525e;
    --palette-primary-900: #00343c;

    --palette-highlight-50: #faf6e4;
    --palette-highlight-200: #e9da97;
    --palette-highlight-400: #d4bb4e;
    --palette-highlight-500: #bfa336;
    --palette-highlight-600: #978025;

    --palette-success-50: #e7f7ec;
    --palette-success-500: #25a85a;
    --palette-success-700: #14753b;

    --palette-warning-50: #fbf3dc;
    --palette-warning-500: #c68a1e;
    --palette-warning-700: #8c610f;

    --palette-danger-50: #fcebea;
    --palette-danger-500: #d6453b;
    --palette-danger-700: #9e2a22;
    --palette-danger-strong: #b42318;

    --palette-info-500: #2e77d0;
    --palette-info-600: #2a6bbe;
    --palette-info-700: #245c9f;
    --palette-info-50: #eaf2fc;
    --palette-info-100: #d2e4f7;
    --palette-info-200: #b2d0ef;

    --palette-chart-spruce-500: #2e9d8f;
    --palette-chart-clay-500: #d2724b;

    /* Standardized theme roles */
    --theme-primary: var(--palette-primary-800);
    --theme-primary-hover: var(--palette-primary-700);
    --theme-primary-active: var(--palette-primary-900);
    --theme-primary-strong: var(--palette-primary-900);
    --theme-primary-soft: var(--palette-primary-100);
    --theme-primary-soft-strong: var(--palette-primary-200);

    --theme-secondary: #1d8b7c;
    --theme-secondary-hover: var(--palette-primary-600);
    --theme-secondary-active: var(--palette-primary-700);
    --theme-secondary-soft: var(--palette-primary-50);
    --theme-secondary-soft-strong: var(--palette-primary-200);

    --theme-accent: var(--palette-primary-400);
    --theme-accent-hover: var(--palette-primary-500);
    --theme-accent-active: var(--palette-primary-600);
    --theme-accent-soft: var(--palette-primary-50);
    --theme-accent-soft-strong: var(--palette-primary-200);

    --theme-highlight: var(--palette-highlight-500);
    --theme-highlight-hover: var(--palette-highlight-600);
    --theme-highlight-soft: var(--palette-highlight-50);
    --theme-highlight-soft-strong: var(--palette-highlight-200);

    --theme-text-primary: var(--theme-primary);
    --theme-text-secondary: #1c5c66;
    --theme-text-tertiary: #3e6b71;
    --theme-text-strong: #101828;
    --theme-text-muted: #667085;
    --theme-text-muted-strong: #475467;
    --theme-text-subtle: #98a2b3;

    --theme-surface-primary: #ffffff;
    --theme-surface-secondary: #f7fffc;
    --theme-surface-raised: #fbfffe;
    --theme-surface-tint: #e4fbf3;
    --theme-surface-hover: #edfbf6;
    --theme-surface-muted: #f4f8fa;
    --theme-surface-subtle: #f8fafc;

    --theme-border-primary: #dceee8;
    --theme-border-light: #e2f1ec;
    --theme-border-muted: #c9e2db;
    --theme-border-strong: #b6d4cc;
    --theme-border-secondary: #e5e7eb;
    --theme-border-soft: #eef2f6;

    --theme-success: var(--palette-success-700);
    --theme-success-accent: var(--palette-success-500);
    --theme-success-soft: var(--palette-success-50);

    --theme-warning: var(--palette-warning-700);
    --theme-warning-accent: var(--palette-warning-500);
    --theme-warning-soft: var(--palette-warning-50);
    --theme-warning-badge: var(--palette-highlight-200);

    --theme-danger: var(--palette-danger-700);
    --theme-danger-accent: var(--palette-danger-500);
    --theme-danger-soft: var(--palette-danger-50);
    --theme-danger-strong: var(--palette-danger-strong);

    --theme-info: var(--palette-info-500);
    --theme-info-hover: var(--palette-info-600);
    --theme-info-active: var(--palette-info-700);
    --theme-info-soft: var(--palette-info-50);
    --theme-info-soft-strong: var(--palette-info-100);
    --theme-info-ring: var(--palette-info-200);

    --theme-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.08);
    --theme-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.05);
    --theme-shadow-md: 0 18px 36px rgba(0, 82, 94, 0.16);

    --theme-gradient-hero:
        linear-gradient(135deg, #00343c 0%, #00525e 42%, #08727a 72%);
    --theme-gradient-hero-surface:
        radial-gradient(circle at top right, rgba(20, 225, 160, 0.16), transparent 40%),
        #d3fff0;

    /* Shared component tokens */
    --theme-button-base-from: #ffffff;
    --theme-button-base-to: #f8fafc;
    --theme-button-base-hover-from: #ffffff;
    --theme-button-base-hover-to: #f2f7fa;
    --theme-button-base-border-hover: #b8c5d1;

    --theme-button-primary-from: var(--palette-primary-700);
    --theme-button-primary-to: var(--palette-primary-800);
    --theme-button-primary-border: var(--palette-primary-900);
    --theme-button-primary-shadow: 0 10px 22px rgba(0, 52, 60, 0.22);
    --theme-button-primary-hover-from: var(--palette-primary-800);
    --theme-button-primary-hover-to: var(--palette-primary-900);
    --theme-button-primary-border-hover: var(--palette-primary-900);

    --theme-button-success-from: var(--palette-success-500);
    --theme-button-success-to: var(--palette-success-700);
    --theme-button-success-border: var(--palette-success-700);
    --theme-button-success-shadow: 0 10px 22px rgba(20, 107, 62, 0.18);
    --theme-button-success-hover-from: var(--palette-success-700);
    --theme-button-success-hover-to: var(--palette-success-700);
    --theme-button-success-border-hover: var(--palette-success-700);

    --theme-button-warning-from: var(--palette-warning-500);
    --theme-button-warning-to: var(--palette-highlight-600);
    --theme-button-warning-border: var(--palette-highlight-600);
    --theme-button-warning-shadow: 0 10px 22px rgba(168, 116, 31, 0.18);
    --theme-button-warning-hover-from: var(--palette-warning-500);
    --theme-button-warning-hover-to: var(--palette-warning-500);
    --theme-button-warning-border-hover: var(--palette-warning-700);

    --theme-button-focus-ring: 0 0 0 4px rgba(0, 82, 94, 0.18), 0 12px 24px rgba(0, 52, 60, 0.1);
    --theme-button-hover-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);

    --theme-nav-bg: var(--theme-primary-soft);
    --theme-nav-bg-raised: var(--theme-primary-soft);
    --theme-nav-surface: rgba(255, 255, 255, 0.55);
    --theme-nav-surface-strong: var(--theme-primary-soft-strong);
    --theme-nav-border: rgba(0, 82, 94, 0.12);
    --theme-nav-border-strong: rgba(0, 82, 94, 0.3);
    --theme-nav-text: var(--theme-primary);
    --theme-nav-text-muted: #2c6a72;
    --theme-nav-text-subtle: #5c8a90;
    --theme-nav-stage: var(--theme-highlight-hover);
    --theme-nav-stage-soft: rgba(151, 128, 37, 0.14);
    --theme-nav-active-bar: var(--theme-primary);
    --theme-nav-focus: rgba(0, 82, 94, 0.25);

    --theme-device-ink: #10212b;
    --theme-device-muted: #58707b;
    --theme-device-line: #d8e3e8;
    --theme-device-surface-alt: #f4f8fa;
    --theme-device-accent: var(--theme-accent-hover);

    --theme-gauge-success: var(--theme-success-accent);
    --theme-gauge-warning: #d97706;
    --theme-gauge-danger: var(--theme-danger-accent);

    /* Compatibility aliases */
    --gs-emerald-50: var(--palette-primary-50);
    --gs-emerald-100: var(--palette-primary-100);
    --gs-emerald-200: var(--palette-primary-200);
    --gs-emerald-300: var(--palette-primary-300);
    --gs-emerald-400: var(--palette-primary-400);
    --gs-emerald-500: var(--palette-primary-500);
    --gs-emerald-600: var(--palette-primary-600);
    --gs-emerald-700: var(--palette-primary-700);
    --gs-emerald-800: var(--palette-primary-800);
    --gs-emerald-900: var(--palette-primary-900);

    --gs-gold-50: var(--palette-highlight-50);
    --gs-gold-200: var(--palette-highlight-200);
    --gs-gold-400: var(--palette-highlight-400);
    --gs-gold-500: var(--palette-highlight-500);
    --gs-gold-600: var(--palette-highlight-600);

    --gs-success-50: var(--palette-success-50);
    --gs-success-500: var(--palette-success-500);
    --gs-success-700: var(--palette-success-700);

    --gs-warning-50: var(--palette-warning-50);
    --gs-warning-500: var(--palette-warning-500);
    --gs-warning-700: var(--palette-warning-700);

    --gs-danger-50: var(--palette-danger-50);
    --gs-danger-500: var(--palette-danger-500);
    --gs-danger-700: var(--palette-danger-700);

    --gs-spruce-500: var(--palette-chart-spruce-500);
    --gs-clay-500: var(--palette-chart-clay-500);

    --gs-emerald: var(--theme-accent);
    --gs-teal: var(--theme-primary);
    --gs-forest: var(--theme-primary-strong);
    --gs-gold: var(--theme-highlight);

    --vvb-color-text-primary: var(--theme-text-primary);
    --vvb-color-text-secondary: var(--theme-text-secondary);
    --vvb-color-text-tertiary: var(--theme-text-tertiary);
    --vvb-color-text-muted: var(--theme-text-muted);
    --vvb-color-text-subtle: var(--theme-text-subtle);

    --vvb-color-surface: var(--theme-surface-primary);
    --vvb-color-surface-alt: var(--theme-surface-secondary);
    --vvb-color-surface-raised: var(--theme-surface-raised);
    --vvb-color-surface-tint: var(--theme-surface-tint);
    --vvb-color-surface-hover: var(--theme-surface-hover);

    --vvb-color-border: var(--theme-border-primary);
    --vvb-color-border-light: var(--theme-border-light);
    --vvb-color-border-muted: var(--theme-border-muted);
    --vvb-color-border-strong: var(--theme-border-strong);

    --vvb-color-primary: var(--theme-primary);

    --vvb-color-success: var(--theme-success);
    --vvb-color-success-bg: var(--theme-success-soft);

    --vvb-color-warning: var(--theme-warning);
    --vvb-color-warning-accent: var(--theme-warning-accent);
    --vvb-color-warning-bg: var(--theme-warning-soft);
    --vvb-color-warning-badge: var(--theme-warning-badge);

    --vvb-color-danger: var(--theme-danger);
    --vvb-color-danger-accent: var(--theme-danger-accent);
    --vvb-color-danger-bg: var(--theme-danger-soft);

    --vvb-color-info: var(--theme-info);
    --vvb-color-info-hover: var(--theme-info-hover);
    --vvb-color-info-active: var(--theme-info-active);
    --vvb-color-info-bg: var(--theme-info-soft);
    --vvb-color-info-light: var(--theme-info-soft-strong);
    --vvb-color-info-ring: var(--theme-info-ring);

    --vvb-shadow-sm: var(--theme-shadow-sm);
    --vvb-shadow-md: var(--theme-shadow-md);
    --vvb-shadow-xs: var(--theme-shadow-xs);

    --hero-gradient: var(--theme-gradient-hero);
    --hero-surface-gradient: var(--theme-gradient-hero-surface);

    --vvb-color-button-base-from: var(--theme-button-base-from);
    --vvb-color-button-base-to: var(--theme-button-base-to);
    --vvb-color-button-base-hover-from: var(--theme-button-base-hover-from);
    --vvb-color-button-base-hover-to: var(--theme-button-base-hover-to);
    --vvb-color-button-base-border-hover: var(--theme-button-base-border-hover);

    --vvb-color-button-primary-from: var(--theme-button-primary-from);
    --vvb-color-button-primary-to: var(--theme-button-primary-to);
    --vvb-color-button-primary-border: var(--theme-button-primary-border);
    --vvb-color-button-primary-shadow: var(--theme-button-primary-shadow);
    --vvb-color-button-primary-hover-from: var(--theme-button-primary-hover-from);
    --vvb-color-button-primary-hover-to: var(--theme-button-primary-hover-to);
    --vvb-color-button-primary-border-hover: var(--theme-button-primary-border-hover);

    --vvb-color-button-success-from: var(--theme-button-success-from);
    --vvb-color-button-success-to: var(--theme-button-success-to);
    --vvb-color-button-success-border: var(--theme-button-success-border);
    --vvb-color-button-success-shadow: var(--theme-button-success-shadow);
    --vvb-color-button-success-hover-from: var(--theme-button-success-hover-from);
    --vvb-color-button-success-hover-to: var(--theme-button-success-hover-to);
    --vvb-color-button-success-border-hover: var(--theme-button-success-border-hover);

    --vvb-color-button-warning-from: var(--theme-button-warning-from);
    --vvb-color-button-warning-to: var(--theme-button-warning-to);
    --vvb-color-button-warning-border: var(--theme-button-warning-border);
    --vvb-color-button-warning-shadow: var(--theme-button-warning-shadow);
    --vvb-color-button-warning-hover-from: var(--theme-button-warning-hover-from);
    --vvb-color-button-warning-hover-to: var(--theme-button-warning-hover-to);
    --vvb-color-button-warning-border-hover: var(--theme-button-warning-border-hover);

    --vvb-color-button-focus-ring: var(--theme-button-focus-ring);
    --vvb-color-button-hover-shadow: var(--theme-button-hover-shadow);

    --trace-menu-bg: var(--theme-nav-bg);
    --trace-menu-bg-raised: var(--theme-nav-bg-raised);
    --trace-menu-surface: var(--theme-nav-surface);
    --trace-menu-surface-strong: var(--theme-nav-surface-strong);
    --trace-menu-border: var(--theme-nav-border);
    --trace-menu-border-strong: var(--theme-nav-border-strong);
    --trace-menu-text: var(--theme-nav-text);
    --trace-menu-text-muted: var(--theme-nav-text-muted);
    --trace-menu-text-subtle: var(--theme-nav-text-subtle);
    --trace-menu-stage: var(--theme-nav-stage);
    --trace-menu-stage-soft: var(--theme-nav-stage-soft);
    --trace-menu-active-bar: var(--theme-nav-active-bar);
    --trace-menu-focus: var(--theme-nav-focus);

    --kendo-font-family-sans-serif: var(--font-family-sans);
    --kendo-font-family: var(--font-family-sans);
    --kendo-color-primary: var(--theme-primary);
}

/* Workspace component tokens */
.vvb-stage-progress-shell {
    --vvb-hero-title-color: var(--theme-primary);
    --vvb-hero-copy-color: #2c6a72;
    --vvb-hero-breadcrumb-color: #5c8a90;
    --vvb-hero-meta-bg: rgba(255, 255, 255, 0.6);
    --vvb-hero-meta-border: rgba(0, 82, 94, 0.16);
    --vvb-hero-meta-text: var(--theme-primary);
    --vvb-hero-action-secondary-bg: transparent;
    --vvb-hero-action-secondary-border: rgba(0, 82, 94, 0.32);
    --vvb-hero-action-secondary-text: var(--theme-primary);
    --vvb-hero-action-secondary-shadow: none;
    --vvb-hero-stat-bg: rgba(255, 255, 255, 0.6);
    --vvb-hero-stat-border: rgba(0, 82, 94, 0.14);
    --vvb-hero-stat-label: #2c6a72;
    --vvb-hero-stat-value: var(--theme-primary);
    background:
        radial-gradient(circle at top right, rgba(20, 225, 160, 0.18), transparent 42%),
        var(--theme-primary-soft);
    border-color: rgba(0, 82, 94, 0.16);
    box-shadow: 0 18px 36px rgba(0, 82, 94, 0.12);
    color: var(--theme-primary);
}

.vvb-stage-progress-shell-surface {
    --vvb-hero-title-color: var(--theme-text-primary);
    --vvb-hero-copy-color: var(--theme-text-muted);
    --vvb-hero-breadcrumb-color: var(--theme-text-muted);
    --vvb-hero-meta-bg: rgba(255, 255, 255, 0.84);
    --vvb-hero-meta-border: rgba(217, 226, 231, 0.96);
    --vvb-hero-meta-text: #4e6570;
    --vvb-hero-action-secondary-bg: transparent;
    --vvb-hero-action-secondary-border: rgba(47, 163, 75, 0.38);
    --vvb-hero-action-secondary-text: var(--theme-accent-hover);
    --vvb-hero-action-secondary-shadow: none;
    --vvb-hero-stat-bg: rgba(255, 255, 255, 0.84);
    --vvb-hero-stat-border: rgba(217, 226, 231, 0.96);
    --vvb-hero-stat-label: var(--theme-text-muted);
    --vvb-hero-stat-value: var(--theme-text-primary);
}

.vvb-device-detail-page {
    --vvb-device-ink: var(--theme-device-ink);
    --vvb-device-muted: var(--theme-device-muted);
    --vvb-device-line: var(--theme-device-line);
    --vvb-device-surface-alt: var(--theme-device-surface-alt);
    --vvb-device-accent: var(--theme-device-accent);
}

.vvb-data-received-gauge {
    --vvb-data-received-gauge-fill: var(--theme-gauge-success);
}

.vvb-data-received-gauge.is-warning {
    --vvb-data-received-gauge-fill: var(--theme-gauge-warning);
}

.vvb-data-received-gauge.is-danger {
    --vvb-data-received-gauge-fill: var(--theme-gauge-danger);
}

/* Project onboarding page tokens */
.project-site-item {
    --project-device-tone: #cbd5e1;
    --project-device-tone-soft: #f1f5f9;
    --project-device-tone-strong: var(--theme-text-muted-strong);
}

.project-site-item[data-device-node-type="1"] {
    --project-device-tone: #f59e0b;
    --project-device-tone-soft: #fff7ed;
    --project-device-tone-strong: #b45309;
}

.project-site-item[data-device-node-type="2"] {
    --project-device-tone: #22c55e;
    --project-device-tone-soft: #f0fdf4;
    --project-device-tone-strong: #15803d;
}

.project-site-item[data-device-node-type="3"] {
    --project-device-tone: #6366f1;
    --project-device-tone-soft: #eef2ff;
    --project-device-tone-strong: #4338ca;
}

.trace-mobile-panel {
    --bs-offcanvas-width: min(92vw, 380px);
}

/* Kendo bridge */
:where(body:has([class^="vvb-"]), body:has([class*=" vvb-"])) {
    --kendo-font-family-sans-serif: var(--font-family-sans);
    --kendo-font-family: var(--font-family-sans);
    --kendo-font-size: 14px;
    --kendo-font-size-sm: 13px;
    --kendo-font-size-md: 14px;
    --kendo-font-size-lg: 15px;
    --kendo-line-height: 1.5;

    --kendo-border-radius-sm: 12px;
    --kendo-border-radius-md: 14px;
    --kendo-border-radius-lg: 18px;
    --kendo-border-radius-xl: 20px;

    --kendo-color-app-surface: var(--theme-surface-primary);
    --kendo-color-surface: var(--theme-surface-primary);
    --kendo-color-surface-alt: var(--theme-surface-secondary);
    --kendo-color-light: var(--theme-surface-secondary);
    --kendo-color-base: var(--theme-surface-primary);
    --kendo-color-base-hover: var(--theme-surface-secondary);
    --kendo-color-base-active: var(--theme-surface-hover);
    --kendo-color-base-subtle: var(--theme-surface-tint);
    --kendo-color-base-subtle-hover: var(--theme-surface-hover);
    --kendo-color-base-subtle-active: var(--theme-surface-hover);
    --kendo-color-border: var(--theme-border-muted);
    --kendo-color-border-alt: var(--theme-border-light);

    --kendo-color-on-app-surface: var(--theme-text-primary);
    --kendo-color-on-base: var(--theme-text-secondary);
    --kendo-color-subtle: var(--theme-text-muted);

    --kendo-color-primary: var(--theme-primary);
    --kendo-color-primary-hover: var(--theme-primary-hover);
    --kendo-color-primary-active: var(--theme-primary-active);
    --kendo-color-primary-emphasis: rgba(0, 82, 94, 0.2);
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-subtle: var(--theme-secondary-soft);
    --kendo-color-primary-subtle-hover: var(--theme-primary-soft);
    --kendo-color-primary-subtle-active: var(--theme-primary-soft-strong);
    --kendo-color-primary-on-subtle: var(--theme-primary);
    --kendo-color-primary-on-surface: var(--theme-primary);

    --kendo-color-success: var(--theme-success);
    --kendo-color-success-hover: var(--theme-success-accent);
    --kendo-color-success-active: var(--theme-success);
    --kendo-color-success-emphasis: rgba(37, 168, 90, 0.2);
    --kendo-color-on-success: #ffffff;
    --kendo-color-success-subtle: var(--theme-success-soft);
    --kendo-color-success-subtle-hover: var(--theme-success-soft);
    --kendo-color-success-subtle-active: var(--theme-primary-soft);
    --kendo-color-success-on-subtle: var(--theme-success);

    --kendo-color-warning: var(--theme-warning-accent);
    --kendo-color-warning-hover: var(--theme-warning-accent);
    --kendo-color-warning-active: var(--theme-warning);
    --kendo-color-warning-emphasis: rgba(198, 138, 30, 0.22);
    --kendo-color-on-warning: #ffffff;
    --kendo-color-warning-subtle: var(--theme-warning-soft);
    --kendo-color-warning-subtle-hover: var(--theme-warning-soft);
    --kendo-color-warning-subtle-active: var(--theme-warning-badge);
    --kendo-color-warning-on-subtle: var(--theme-warning);

    --kendo-color-error: var(--theme-danger-accent);
    --kendo-color-error-hover: var(--theme-danger);
    --kendo-color-error-active: var(--theme-danger);
    --kendo-color-error-emphasis: rgba(214, 69, 59, 0.2);
    --kendo-color-on-error: #ffffff;
    --kendo-color-error-subtle: var(--theme-danger-soft);
    --kendo-color-error-subtle-hover: var(--theme-danger-soft);
    --kendo-color-error-subtle-active: var(--theme-danger-soft);
    --kendo-color-error-on-subtle: var(--theme-danger);

    --kendo-color-info: var(--theme-info);
    --kendo-color-info-hover: var(--theme-info-hover);
    --kendo-color-info-active: var(--theme-info-active);
    --kendo-color-info-emphasis: rgba(46, 119, 208, 0.18);
    --kendo-color-on-info: #ffffff;
    --kendo-color-info-subtle: var(--theme-info-soft);
    --kendo-color-info-subtle-hover: var(--theme-info-soft-strong);
    --kendo-color-info-subtle-active: var(--theme-info-ring);
    --kendo-color-info-on-subtle: var(--theme-info);

    --kendo-component-bg: var(--theme-surface-primary);
    --kendo-component-border: var(--theme-border-muted);
    --kendo-component-text: var(--theme-text-primary);

    --kendo-elevation-1: var(--theme-shadow-xs);
    --kendo-elevation-2: var(--theme-shadow-sm);
    --kendo-elevation-3: 0 18px 36px rgba(15, 23, 42, 0.1);

    --kendo-disabled-opacity: 0.58;
}