/* The "material" look's tokens (plan 02). Does nothing unless <html data-look="material">. Values from the mockup. */
:root[data-look="material"],
.op-look-preview[data-look-preview="material"] {   /* the second: its card in the look picker */
    --opdms-bg: #f4f6fb;
    --opdms-bg-secondary: #eef2f9;
    --opdms-surface: #ffffff;
    --opdms-surface-secondary: #eef2f9;
    --opdms-text: #1a1c1f;
    --opdms-text-secondary: #5b6370;
    --opdms-border: #dde2ea;
    --opdms-fill: #e3e8f1;
    --opdms-muted: #5b6370;
    --opdms-muted-strong: #3f4650;
    --opdms-ink-primary: #0d3d78;
    --opdms-border-strong: #747b86;
    --opdms-card-bg: #ffffff;
    --opdms-modal-bg: #ffffff;
    --opdms-dropdown-bg: #ffffff;
    --opdms-input-bg: #eef2f9;
    --opdms-sidebar-bg: #eef2f9;
    --opdms-navbar-bg: #ffffff;

    --opdms-primary: #1f63b6;
    --opdms-primary-rgb: 31, 99, 182;
    --opdms-primary-light: #4c82c5;
    --opdms-primary-dark: #194f92;
    --opdms-secondary: #5b6370;
    --opdms-secondary-rgb: 91, 99, 112;
    --opdms-accent: #2e7d32;
    --opdms-accent-rgb: 46, 125, 50;
    --opdms-warning: #ed9c00;
    --opdms-warning-rgb: 237, 156, 0;

    --opdms-success: #2e7d32;
    --opdms-danger: #ba1a1a;
    --opdms-info: #00658f;
    --opdms-success-rgb: 46, 125, 50;
    --opdms-info-rgb: 0, 101, 143;
    --opdms-danger-rgb: 186, 26, 26;
    --opdms-ink-success: #1b5e20;
    --opdms-ink-warning: #6b4600;
    --opdms-ink-danger: #93000a;
    --opdms-ink-info: #004c6b;
    --opdms-ink-secondary: #3f4650;

    --opdms-radius: 4px;
    --opdms-radius-card: 12px;
    --opdms-radius-btn: 20px;
    --opdms-radius-badge: 8px;

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

    --opdms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
    --opdms-shadow-window: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
    --opdms-radius-window: 28px;
    --opdms-window-title-bg: var(--opdms-surface);
    --opdms-window-title-line: transparent;
    --opdms-focus: 0 0 0 2px var(--opdms-primary);

    --opdms-th-bg: transparent;
    --opdms-th-color: #5b6370;
    --opdms-th-size: 12px;
    --opdms-th-case: none;
    --opdms-th-track: 0.02em;
    --opdms-th-weight: 500;

    --opdms-nav-bg: #ffffff;
    --opdms-nav-fg: #1a1c1f;
    --opdms-nav-line: #dde2ea;

    --opdms-badge-mix: 18%;
    --opdms-alert-mix: 10%;
}