/* The "saas" look's tokens (plan 02). Does nothing unless <html data-look="saas">. Values from the mockup. */
:root[data-look="saas"],
.op-look-preview[data-look-preview="saas"] {   /* the second: its card in the look picker */
    --opdms-bg: #f5f6f8;
    --opdms-bg-secondary: #f9fafb;
    --opdms-surface: #ffffff;
    --opdms-surface-secondary: #f9fafb;
    --opdms-text: #161c26;
    --opdms-text-secondary: #626b7a;
    --opdms-border: #e2e5ea;
    --opdms-fill: #eef0f3;
    --opdms-muted: #626b7a;
    --opdms-muted-strong: #3d4553;
    --opdms-ink-primary: #1c3a8f;
    --opdms-border-strong: #cbd0d8;
    --opdms-card-bg: #ffffff;
    --opdms-modal-bg: #ffffff;
    --opdms-dropdown-bg: #ffffff;
    --opdms-input-bg: #ffffff;
    --opdms-sidebar-bg: #f9fafb;
    --opdms-navbar-bg: #ffffff;

    --opdms-primary: #2a54c9;
    --opdms-primary-rgb: 42, 84, 201;
    --opdms-primary-light: #5576d4;
    --opdms-primary-dark: #2243a1;
    --opdms-secondary: #626b7a;
    --opdms-secondary-rgb: 98, 107, 122;
    --opdms-accent: #11855f;
    --opdms-accent-rgb: 17, 133, 95;
    --opdms-warning: #d99a12;
    --opdms-warning-rgb: 217, 154, 18;

    --opdms-success: #11855f;
    --opdms-danger: #c93330;
    --opdms-info: #2f7fb3;
    --opdms-success-rgb: 17, 133, 95;
    --opdms-info-rgb: 47, 127, 179;
    --opdms-danger-rgb: 201, 51, 48;
    --opdms-ink-success: #0b5a40;
    --opdms-ink-warning: #7a5205;
    --opdms-ink-danger: #8f1f1d;
    --opdms-ink-info: #1d5478;
    --opdms-ink-secondary: #3d4553;

    --opdms-radius: 6px;
    --opdms-radius-card: 8px;
    --opdms-radius-btn: 6px;
    --opdms-radius-badge: 999px;

    --opdms-control-h: 32px;
    --opdms-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --opdms-fs: 14px;
    --opdms-fs-sm: 12.5px;
    --opdms-btn-weight: 500;
    --opdms-heading-weight: 600;

    --opdms-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
    --opdms-shadow-window: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
    --opdms-radius-window: 8px;
    --opdms-window-title-bg: var(--opdms-surface);
    --opdms-window-title-line: var(--opdms-border);
    --opdms-focus: 0 0 0 3px rgba(42, 84, 201, 0.22);

    --opdms-th-bg: #f9fafb;
    --opdms-th-color: #626b7a;
    --opdms-th-size: 11px;
    --opdms-th-case: uppercase;
    --opdms-th-track: 0.06em;
    --opdms-th-weight: 600;

    --opdms-nav-bg: #ffffff;
    --opdms-nav-fg: #161c26;
    --opdms-nav-line: #e2e5ea;

    --opdms-badge-mix: 14%;
    --opdms-alert-mix: 9%;
}