/*
 * TIEIT design tokens
 *
 * Progressive adoption layer for the modern chrome work first. Legacy BS2
 * screens and newer React surfaces should opt in by consuming these custom
 * properties instead of redefining colors, spacing, radius, and shadows.
 *
 * This file only defines variables; it should not change a page until a
 * consuming stylesheet references the tokens.
 */

:root {
    /* Brand primitives */
    --ds-color-teal-50: #f0fdfa;
    --ds-color-teal-100: #ccfbf1;
    --ds-color-teal-200: #99f6e4;
    --ds-color-teal-300: #5eead4;
    --ds-color-teal-400: #2dd4bf;
    --ds-color-teal-500: #14b8a6;
    --ds-color-teal-600: #0d9488; /* PRIMARY brand accent */
    --ds-color-teal-700: #0f766e; /* button hover */
    --ds-color-teal-800: #115e59; /* button pressed */
    --ds-color-teal-900: #134e4a;

    --ds-color-navy-950: #071120;
    --ds-color-navy-900: #0b1728;
    --ds-color-navy-850: #10243a;
    --ds-color-navy-800: #102f3d;

    --ds-color-blue-50: #eff6ff;
    --ds-color-blue-100: #e8f3ff;
    --ds-color-blue-500: #2b7fff;
    --ds-color-blue-600: #2563eb;
    --ds-color-blue-700: #1d4ed8;
    --ds-color-blue-800: #1e40af;
    --ds-color-indigo-50: #eef2ff;
    --ds-color-indigo-100: #e0e7ff;
    --ds-color-indigo-300: #c4b5fd;
    --ds-color-indigo-400: #818cf8;
    --ds-color-indigo-500: #6366f1;
    --ds-color-indigo-600: #4f46e5;
    --ds-color-indigo-700: #4338ca;
    --ds-color-violet-800: #5b21b6;
    --ds-color-indigo-950: #1e1b4b;
    --ds-color-ink-950: #0d0b33;

    --ds-color-slate-50: #f8fafc;
    --ds-color-slate-100: #f1f5f9;
    --ds-color-slate-200: #e2e8f0;
    --ds-color-slate-300: #cbd5e1;
    --ds-color-slate-400: #94a3b8;
    --ds-color-slate-500: #64748b;
    --ds-color-slate-600: #475569;
    --ds-color-slate-700: #334155;
    --ds-color-slate-900: #0f172a;
    --ds-color-white: #ffffff;

    --ds-color-success-600: #16a34a;
    --ds-color-success-700: #15803d;
    --ds-color-success-800: #166534;
    --ds-color-warning-500: #f59e0b;
    --ds-color-warning-600: #d97706;
    --ds-color-warning-700: #b45309;
    --ds-color-danger-600: #dc2626;
    --ds-color-danger-700: #b91c1c;
    --ds-color-danger-800: #991b1b;

    /* Typography */
    --ds-font-family-sans: "Geist", "Inter", "Open Sans", Arial, sans-serif;
    --ds-font-size-2xs: 10px;
    --ds-font-size-xs: 12px;
    --ds-font-size-sm: 13px;
    --ds-font-size-md: 14px;
    --ds-font-size-lg: 16px;
    --ds-font-size-xl: 20px;
    --ds-font-size-2xl: 24px;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 600;
    --ds-font-weight-semibold: 700;

    /* Spacing */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* Radius */
    --ds-radius-xs: 4px;
    --ds-radius-sm: 6px;
    --ds-radius-md: 8px;
    --ds-radius-lg: 12px;
    --ds-radius-xl: 16px;
    --ds-radius-pill: 999px;

    /* Elevation and focus */
    --ds-shadow-soft: 0 7px 16px rgba(15, 23, 42, 0.075);
    --ds-shadow-panel: 0 16px 36px rgba(15, 23, 42, 0.12);
    --ds-shadow-popover: 0 18px 42px -24px rgba(15, 23, 42, 0.22), 0 4px 12px -8px rgba(15, 23, 42, 0.12);
    --ds-focus-ring: 0 0 0 3px var(--ds-color-action-focus-ring);

    /* Semantic surfaces */
    --ds-surface-canvas: #f8fafa;
    --ds-surface-muted: var(--ds-color-slate-50);
    --ds-surface-raised: #ffffff;
    --ds-surface-table-head: #f0fdfa;
    --ds-surface-hover: #f0fdfb;
    --ds-surface-row-hover: #f8fffe;
    --ds-surface-selected: var(--ds-color-blue-100);
    --ds-surface-sidebar: #05333d;
    --ds-surface-secondary-menu: var(--ds-color-slate-50);
    --ds-secondary-menu-active-bg: var(--ds-color-blue-100);
    --ds-secondary-menu-active-border: var(--ds-color-blue-500);
    --ds-sidebar-gradient:
        radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.24), transparent 34%),
        linear-gradient(180deg, #075766 0%, #05333d 54%, #04242f 100%);
    --ds-sidebar-grain-opacity: 0.07;
    --ds-sidebar-divider: rgba(255, 255, 255, 0.10);
    --ds-nav-icon-size: 34px;
    --ds-nav-icon-radius: 8px;
    --ds-nav-icon-inactive-bg: rgba(45, 212, 191, 0.16);
    --ds-nav-icon-inactive-color: #a7f3d0;
    --ds-nav-icon-hover-bg: rgba(45, 212, 191, 0.26);
    --ds-nav-label-inactive: #ccfbf1;
    --ds-nav-label-active: rgba(255, 255, 255, 0.92);
    --ds-nav-item-hover-bg: rgba(255, 255, 255, 0.10);
    --ds-nav-item-preview-bg: rgba(20, 184, 166, 0.24);
    --ds-nav-active-indicator: var(--ds-secondary-menu-active-border);
    --ds-nav-icon-active-bg: var(--ds-color-action-primary);
    --ds-nav-icon-active-color: #ffffff;
    --ds-nav-icon-active-glow: 0 8px 18px rgba(37, 99, 235, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.12);
    --ds-sidebar-shadow: 0 12px 28px rgba(6, 15, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --ds-sidebar-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    --ds-sidebar-tooltip-bg: rgba(6, 15, 20, 0.98);
    --ds-sidebar-tooltip-border: rgba(255, 255, 255, 0.14);
    --ds-sidebar-tooltip-text: #f8fbff;
    --ds-sidebar-tooltip-muted: rgba(226, 232, 240, 0.72);

    --ds-border-subtle: #e5e7eb;
    --ds-border-default: var(--ds-color-slate-200);
    --ds-border-strong: var(--ds-color-slate-300);
    --ds-legacy-table-border: var(--ds-border-default);

    --ds-text-primary: var(--ds-color-slate-900);
    --ds-text-secondary: var(--ds-color-slate-600);
    --ds-text-muted: var(--ds-color-slate-500);
    --ds-text-inverse: #e7eef8;
    --ds-back-action-size: 36px;
    --ds-back-action-radius: var(--ds-radius-pill);
    --ds-back-action-color: var(--ds-text-secondary);
    --ds-back-action-hover-color: var(--ds-text-primary);
    --ds-back-action-hover-bg: var(--ds-surface-hover);

    --ds-color-action-primary: var(--ds-color-blue-600);
    --ds-color-action-primary-hover: var(--ds-color-blue-700);
    --ds-color-action-primary-pressed: var(--ds-color-blue-800);
    --ds-color-action-primary-subtle: var(--ds-secondary-menu-active-bg);
    --ds-color-action-focus-ring: rgba(37, 99, 235, 0.35);
    --ds-workspace-badge-bg: var(--ds-color-action-primary);
    --ds-workspace-badge-text: #ffffff;
    --ds-badge-active-bg: var(--ds-color-action-primary-subtle);
    --ds-badge-active-text: var(--ds-color-action-primary);
    --ds-badge-neutral-bg: #f3f4f6;
    --ds-badge-neutral-text: #6b7280;
    --ds-tab-active-color: var(--ds-color-action-primary);
    --ds-tab-active-border: var(--ds-color-action-primary);
    --ds-tab-count-active-bg: var(--ds-color-action-primary-subtle);
    --ds-tab-count-active-text: var(--ds-color-action-primary);
    --ds-color-link: var(--ds-color-action-primary);
    --ds-color-link-hover: var(--ds-color-action-primary-hover);

    --ds-action-primary: var(--ds-color-action-primary);
    --ds-action-primary-hover: var(--ds-color-action-primary-hover);
    --ds-action-primary-bg: var(--ds-color-action-primary-subtle);
    --ds-action-primary-border: rgba(37, 99, 235, 0.28);
    --ds-button-font-size: var(--ds-font-size-sm);
    --ds-button-font-weight: var(--ds-font-weight-medium);
    --ds-button-radius: var(--ds-radius-sm);
    --ds-button-height: 34px;
    --ds-button-padding-x: var(--ds-space-4);
    --ds-button-shadow: none;
    --ds-button-disabled-opacity: 0.62;
    --ds-button-action-bg: var(--ds-color-action-primary);
    --ds-button-action-border: var(--ds-color-action-primary);
    --ds-button-action-text: var(--ds-color-white);
    --ds-button-action-hover-bg: var(--ds-color-action-primary-hover);
    --ds-button-action-hover-border: var(--ds-color-action-primary-hover);
    --ds-button-action-pressed-bg: var(--ds-color-action-primary-pressed);
    --ds-button-action-pressed-border: var(--ds-color-action-primary-pressed);
    --ds-button-neutral-bg: var(--ds-surface-raised);
    --ds-button-neutral-border: var(--ds-border-default);
    --ds-button-neutral-text: var(--ds-text-primary);
    --ds-button-neutral-hover-bg: var(--ds-surface-hover);
    --ds-button-neutral-hover-border: var(--ds-border-strong);
    --ds-button-neutral-pressed-bg: var(--ds-surface-selected);
    --ds-button-neutral-pressed-border: var(--ds-color-action-primary);
    --ds-button-neutral-pressed-text: var(--ds-color-action-primary);
    --ds-button-destructive-bg: var(--ds-color-danger-600);
    --ds-button-destructive-border: var(--ds-color-danger-600);
    --ds-button-destructive-text: var(--ds-color-white);
    --ds-button-destructive-hover-bg: var(--ds-color-danger-700);
    --ds-button-destructive-hover-border: var(--ds-color-danger-700);
    --ds-button-destructive-pressed-bg: var(--ds-color-danger-800);
    --ds-button-destructive-pressed-border: var(--ds-color-danger-800);
    --ds-button-warning-bg: var(--ds-color-warning-500);
    --ds-button-warning-border: var(--ds-color-warning-500);
    --ds-button-warning-text: var(--ds-color-white);
    --ds-button-warning-hover-bg: var(--ds-color-warning-600);
    --ds-button-warning-hover-border: var(--ds-color-warning-600);
    --ds-button-warning-pressed-bg: var(--ds-color-warning-700);
    --ds-button-warning-pressed-border: var(--ds-color-warning-700);
    --tt-z-dropdown: 10030;
    --tt-z-modal-backdrop: 10040;
    --tt-z-modal: 10050;
    --tt-z-modal-nested: 10060;
    --tt-z-modal-popover: 10070;
    --tt-z-modal-tooltip: 10080;
    --tt-z-chrome-overlay: 22000;
    --tt-z-chrome-dialog: 23000;
    --ds-modal-backdrop-z-index: var(--tt-z-modal-backdrop);
    --ds-modal-scrollable-z-index: var(--tt-z-modal);
    --ds-modal-z-index: var(--tt-z-modal);
    --ds-modal-backdrop-bg: rgba(15, 23, 42, 0.48);
    --ds-modal-backdrop-blur: 2px;
    --ds-modal-gutter: var(--ds-space-5);
    --ds-modal-width: 560px;
    --ds-modal-width-sm: 420px;
    --ds-modal-width-lg: 760px;
    --ds-modal-width-xl: 960px;
    --ds-modal-surface-bg: var(--ds-surface-raised);
    --ds-modal-surface-border: var(--ds-border-subtle);
    --ds-modal-surface-radius: var(--ds-radius-md);
    --ds-modal-surface-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12);
    --ds-modal-header-bg: var(--ds-surface-raised);
    --ds-modal-header-border: var(--ds-border-subtle);
    --ds-modal-body-bg: var(--ds-surface-raised);
    --ds-modal-footer-bg: var(--ds-surface-muted);
    --ds-modal-footer-border: var(--ds-border-subtle);
    --ds-modal-title-text: var(--ds-text-primary);
    --ds-modal-body-text: var(--ds-text-secondary);
    --ds-modal-muted-text: var(--ds-text-muted);
    --ds-modal-accent: var(--ds-color-action-primary);
    --ds-modal-close-bg: transparent;
    --ds-modal-close-color: var(--ds-text-muted);
    --ds-modal-close-hover-bg: var(--ds-surface-hover);
    --ds-modal-close-hover-color: var(--ds-text-primary);

    /* Motion */
    --ds-motion-instant: 50ms;
    --ds-motion-fast: 100ms;
    --ds-motion-base: 150ms;
    --ds-motion-slow: 250ms;
    --ds-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --ds-ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0);
    --ds-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1.0);

    /* Object/module chips */
    --ds-object-contact-bg: var(--ds-color-teal-50);
    --ds-object-contact-text: var(--ds-color-teal-600);
    --ds-object-company-bg: var(--ds-color-indigo-50);
    --ds-object-company-text: var(--ds-color-indigo-600);
    --ds-object-invoice-bg: var(--ds-color-blue-50);
    --ds-object-invoice-text: var(--ds-color-blue-600);
    --ds-object-estimate-bg: #ecfeff;
    --ds-object-estimate-text: #0891b2;
    --ds-object-subscription-bg: #f0fdf4;
    --ds-object-subscription-text: #15803d;
    --ds-object-page-bg: var(--ds-color-slate-100);
    --ds-object-page-text: var(--ds-color-slate-600);

    /* Modern chrome aliases */
    --tt-chrome-topbar-bg: var(--ds-surface-canvas);
    --tt-chrome-topbar-border: var(--ds-border-subtle);
    --tt-chrome-topbar-height: 52px;

    --tt-chrome-dock-bg: var(--ds-sidebar-gradient);
    --tt-chrome-dock-border: rgba(255, 255, 255, 0.14);
    --tt-chrome-dock-radius: var(--ds-radius-md);
    --tt-chrome-dock-shadow: var(--ds-sidebar-shadow);
    --tt-chrome-dock-text: var(--ds-text-inverse);
    --tt-chrome-dock-icon-bg: var(--ds-nav-icon-inactive-bg);
    --tt-chrome-dock-icon-hover-bg: var(--ds-nav-icon-hover-bg);
    --tt-chrome-dock-preview-bg: rgba(255, 255, 255, 0.12);
    --tt-chrome-dock-active-bg: var(--ds-nav-icon-active-bg);
    --tt-chrome-dock-active-glow: var(--ds-nav-icon-active-glow);
    --tt-chrome-dock-focus-ring: var(--ds-focus-ring);
    --tt-chrome-dock-grain: var(--ds-sidebar-grain);

    --tt-chrome-panel-bg: var(--ds-surface-secondary-menu);
    --tt-chrome-panel-border: #dbe7f3;
    --tt-chrome-panel-shadow: var(--ds-shadow-panel);
    --tt-chrome-panel-radius: var(--ds-radius-xl);

    --tt-chrome-row-hover-bg: var(--ds-surface-hover);
    --tt-chrome-row-selected-bg: var(--ds-secondary-menu-active-bg);
    --tt-chrome-row-selected-border: var(--ds-secondary-menu-active-border);
    --tt-chrome-search-bg: var(--ds-surface-hover);
    --tt-chrome-search-border: var(--ds-border-strong);
    --tt-chrome-kbd-bg: var(--ds-surface-raised);
    --tt-chrome-kbd-border: var(--ds-border-subtle);
    --tt-chrome-kbd-text: var(--ds-text-secondary);
    --tt-chrome-create-border: var(--ds-secondary-menu-active-border);

    --ds-legacy-page-bg: var(--ds-surface-canvas);
    --ds-legacy-card-bg: var(--ds-surface-raised);
    --ds-legacy-table-head-bg: var(--ds-surface-muted);
    --ds-legacy-table-row-bg: var(--ds-surface-raised);
    --ds-legacy-table-row-hover-bg: var(--ds-surface-row-hover);
    --ds-legacy-input-bg: var(--ds-surface-muted);
    --ds-legacy-popover-bg: var(--ds-surface-raised);
}

[data-theme="midnight-teal"] {
    --ds-surface-sidebar: #080b18;
    --ds-sidebar-gradient:
        radial-gradient(circle at 50% 0%, rgba(129, 140, 248, 0.18), transparent 34%),
        linear-gradient(180deg, #111827 0%, #080b18 54%, #050816 100%);
    --ds-nav-icon-inactive-bg: rgba(129, 140, 248, 0.14);
    --ds-nav-icon-inactive-color: #c4b5fd;
    --ds-nav-icon-hover-bg: rgba(129, 140, 248, 0.24);
    --ds-nav-label-inactive: #c7d2fe;
    --ds-nav-item-preview-bg: rgba(129, 140, 248, 0.22);
}

[data-theme="slate-teal"] {
    --ds-surface-sidebar: #111827;
    --ds-sidebar-gradient:
        radial-gradient(circle at 50% 0%, rgba(148, 163, 184, 0.16), transparent 34%),
        linear-gradient(180deg, #334155 0%, #111827 56%, #0f172a 100%);
    --ds-nav-icon-inactive-bg: rgba(148, 163, 184, 0.16);
    --ds-nav-icon-inactive-color: #e2e8f0;
    --ds-nav-icon-hover-bg: rgba(148, 163, 184, 0.26);
    --ds-nav-label-inactive: #cbd5e1;
    --ds-nav-item-preview-bg: rgba(148, 163, 184, 0.20);
}

[data-theme="charcoal-teal"] {
    --ds-surface-sidebar: #18181b;
    --ds-sidebar-gradient:
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.14), transparent 34%),
        linear-gradient(180deg, #27272a 0%, #18181b 52%, #09090b 100%);
    --ds-nav-icon-inactive-bg: rgba(245, 158, 11, 0.14);
    --ds-nav-icon-inactive-color: #fcd34d;
    --ds-nav-icon-hover-bg: rgba(245, 158, 11, 0.24);
    --ds-nav-label-inactive: #e5e7eb;
    --ds-nav-item-preview-bg: rgba(245, 158, 11, 0.20);
}

[data-theme="forest-teal"] {
    --ds-surface-sidebar: #052e1b;
    --ds-sidebar-gradient:
        radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.18), transparent 34%),
        linear-gradient(180deg, #064e3b 0%, #052e1b 54%, #02140d 100%);
    --ds-nav-icon-inactive-bg: rgba(34, 197, 94, 0.14);
    --ds-nav-icon-inactive-color: #86efac;
    --ds-nav-icon-hover-bg: rgba(34, 197, 94, 0.24);
    --ds-nav-label-inactive: #bbf7d0;
    --ds-nav-item-preview-bg: rgba(34, 197, 94, 0.20);
}

[data-theme-mode="dark"][data-dark-ready~="tokens"],
[data-theme-mode="dark"][data-dark-ready~="legacy"],
[data-theme-mode="dark"][data-dark-ready~="all"] {
    color-scheme: dark;
    --ds-surface-canvas: #071120;
    --ds-surface-muted: #0b1728;
    --ds-surface-raised: #0f1f33;
    --ds-surface-table-head: #10243a;
    --ds-surface-hover: #10243a;
    --ds-surface-row-hover: #0d2238;
    --ds-surface-selected: rgba(43, 127, 255, 0.20);
    --ds-surface-secondary-menu: #0b1728;
    --ds-secondary-menu-active-bg: rgba(43, 127, 255, 0.22);
    --ds-secondary-menu-active-border: #60a5fa;

    --ds-border-subtle: rgba(226, 232, 240, 0.10);
    --ds-border-default: rgba(226, 232, 240, 0.16);
    --ds-border-strong: rgba(226, 232, 240, 0.26);
    --ds-legacy-table-border: rgba(148, 163, 184, 0.14);

    --ds-text-primary: #f8fafc;
    --ds-text-secondary: #cbd5e1;
    --ds-text-muted: #94a3b8;
    --ds-text-inverse: #e7eef8;
    --ds-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.38);

    --ds-color-action-primary: #60a5fa;
    --ds-color-action-primary-hover: #93c5fd;
    --ds-color-action-primary-pressed: #bfdbfe;
    --ds-color-action-primary-subtle: rgba(96, 165, 250, 0.16);
    --ds-color-action-focus-ring: rgba(96, 165, 250, 0.38);
    --ds-color-link: #93c5fd;
    --ds-color-link-hover: #bfdbfe;

    --ds-button-action-bg: #2563eb;
    --ds-button-action-border: #2563eb;
    --ds-button-action-text: #ffffff;
    --ds-button-action-hover-bg: #3b82f6;
    --ds-button-action-hover-border: #3b82f6;
    --ds-button-action-pressed-bg: #60a5fa;
    --ds-button-action-pressed-border: #60a5fa;
    --ds-button-neutral-bg: #0f1f33;
    --ds-button-neutral-border: rgba(226, 232, 240, 0.18);
    --ds-button-neutral-text: #f8fafc;
    --ds-button-neutral-hover-bg: #10243a;
    --ds-button-neutral-hover-border: rgba(147, 197, 253, 0.36);
    --ds-button-neutral-pressed-bg: rgba(96, 165, 250, 0.16);
    --ds-button-neutral-pressed-border: #60a5fa;
    --ds-button-neutral-pressed-text: #bfdbfe;

    --ds-modal-backdrop-bg: rgba(2, 10, 14, 0.72);
    --ds-modal-surface-border: rgba(255, 255, 255, 0.10);
    --ds-modal-surface-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 8px 24px rgba(0, 0, 0, 0.32);
    --ds-modal-footer-bg: rgba(255, 255, 255, 0.03);

    --tt-chrome-topbar-bg: #071120;
    --tt-chrome-topbar-border: rgba(226, 232, 240, 0.10);
    --tt-chrome-search-bg: #0f1f33;
    --tt-chrome-search-border: rgba(226, 232, 240, 0.18);
    --tt-chrome-panel-bg: #0f1f33;
    --tt-chrome-panel-border: rgba(226, 232, 240, 0.14);
    --tt-chrome-row-hover-bg: #10243a;
    --tt-chrome-row-selected-bg: rgba(96, 165, 250, 0.16);
    --tt-chrome-row-selected-border: #60a5fa;
    --tt-chrome-kbd-bg: #132338;
    --tt-chrome-kbd-border: rgba(148, 163, 184, 0.24);
    --tt-chrome-kbd-text: #cbd5e1;

    --ds-legacy-page-bg: #071120;
    --ds-legacy-card-bg: #0f1f33;
    --ds-legacy-table-head-bg: #0b1728;
    --ds-legacy-table-row-bg: #0f1f33;
    --ds-legacy-table-row-hover-bg: #10243a;
    --ds-legacy-input-bg: #0b1728;
    --ds-legacy-popover-bg: #0f1f33;
}

@media (prefers-color-scheme: dark) {
    :root {
        /*
         * Legacy app screens are not fully dark-mode ready. Keep semantic
         * surfaces light even when the OS is dark so tokenized chrome/buttons
         * do not create a partial dark mode over light page content.
         */
        --ds-surface-canvas: #f8fafa;
        --ds-surface-raised: #ffffff;
        --ds-surface-hover: #f0fdfb;
        --ds-surface-row-hover: #f8fffe;
        --ds-surface-table-head: #f0fdfa;
        --ds-border-subtle: #e5e7eb;
        --ds-border-default: var(--ds-color-slate-200);
        --ds-legacy-table-border: var(--ds-border-default);
        --ds-modal-backdrop-bg: rgba(15, 23, 42, 0.48);
        --ds-modal-surface-border: var(--ds-border-subtle);
        --ds-modal-surface-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12);
        --ds-modal-footer-bg: var(--ds-surface-muted);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}