/* OpenDW Modern Workspace design tokens and year-1 compatibility aliases. */
:root {
    --opendw-bg: #f6f8fb;
    --opendw-surface: #ffffff;
    --opendw-surface-muted: #f9fafb;
    --opendw-border: #e5e7eb;
    --opendw-border-strong: #d1d5db;
    --opendw-text: #0f172a;
    --opendw-text-muted: #64748b;
    --opendw-text-soft: #94a3b8;
    --opendw-primary: #0f62fe;
    --opendw-primary-hover: #0353e9;
    --opendw-primary-soft: #eff6ff;
    --opendw-navy: #06244a;
    --opendw-navy-2: #031b38;
    --opendw-success: #16a34a;
    --opendw-warning: #f59e0b;
    --opendw-danger: #ef4444;
    --opendw-radius-sm: 8px;
    --opendw-radius-md: 10px;
    --opendw-radius-lg: 12px;
    --opendw-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
    --opendw-sidebar-left-width: 188px;
    --opendw-sidebar-left-collapsed-width: 48px;
    --opendw-utility-rail-width: 48px;
    --opendw-utility-panel-width: 360px;
    --opendw-topbar-height: 52px;
    --opendw-product-logo-url: url("/app/dashboard/assets/opendw-product-logo.png?v=a10c4bff034d");

    /* Existing CSS variables remain supported during the gradual migration. */
    --primary-color: var(--opendw-primary);
    --primary-dark: var(--opendw-primary-hover);
    --secondary-color: var(--opendw-surface-muted);
    --danger-color: var(--opendw-danger);
    --success-color: var(--opendw-success);
    --warning-color: var(--opendw-warning);
    --text-primary: var(--opendw-text);
    --text-secondary: var(--opendw-text-muted);
    --text-tertiary: var(--opendw-text-soft);
    --bg-primary: var(--opendw-bg);
    --bg-secondary: var(--opendw-surface-muted);
    --bg-card: var(--opendw-surface);
    --bg-hover: var(--opendw-primary-soft);
    --header-bg: var(--opendw-surface);
    --border-color: var(--opendw-border);
    --radius-sm: var(--opendw-radius-sm);
    --radius-md: var(--opendw-radius-md);
    --radius-lg: var(--opendw-radius-lg);
    --topbar-height: var(--opendw-topbar-height);
    --sidebar-width-expanded: var(--opendw-sidebar-left-width);
    --sidebar-width-collapsed: var(--opendw-sidebar-left-collapsed-width);
    --rightbar-rail-width: var(--opendw-utility-rail-width);
    --rightbar-panel-width: var(--opendw-utility-panel-width);
    --ta-brand-25: #f8fbff;
    --ta-brand-50: var(--opendw-primary-soft);
    --ta-brand-100: #dbeafe;
    --ta-brand-500: var(--opendw-primary);
    --ta-brand-600: var(--opendw-primary-hover);
    --ta-brand-700: #0043ce;
    --login-brand: var(--opendw-primary);
    --login-brand-strong: var(--opendw-primary-hover);
    --login-brand-soft: var(--opendw-primary-soft);
}

body.theme-mode-dark,
body.dark-theme {
    --opendw-bg: #0b1220;
    --opendw-surface: #111827;
    --opendw-surface-muted: #172033;
    --opendw-border: rgba(148, 163, 184, 0.22);
    --opendw-border-strong: rgba(148, 163, 184, 0.34);
    --opendw-text: #f8fafc;
    --opendw-text-muted: #cbd5e1;
    --opendw-text-soft: #94a3b8;
    --opendw-primary-soft: rgba(15, 98, 254, 0.18);
    --text-primary: var(--opendw-text);
    --text-secondary: var(--opendw-text-muted);
    --text-tertiary: var(--opendw-text-soft);
    --bg-primary: var(--opendw-bg);
    --bg-secondary: var(--opendw-surface-muted);
    --bg-card: var(--opendw-surface);
    --bg-hover: var(--opendw-primary-soft);
    --header-bg: var(--opendw-surface);
    --border-color: var(--opendw-border);
    --ta-brand-25: rgba(15, 98, 254, 0.08);
    --ta-brand-50: rgba(15, 98, 254, 0.14);
    --ta-brand-100: rgba(15, 98, 254, 0.24);
}

@media (max-width: 768px) {
    :root {
        --topbar-height: 52px;
        --sidebar-width-collapsed: 52px;
        --opendw-utility-rail-width: 52px;
        --rightbar-rail-width: 52px;
        --rightbar-panel-width: min(260px, calc(100vw - 52px));
    }
}