/* The "fluent" look's tokens (plan 02). Does nothing unless <html data-look="fluent">. Values from the mockup. */
:root[data-look="fluent"],
.op-look-preview[data-look-preview="fluent"] {   /* the second: its card in the look picker */
    --opdms-bg: #f5f5f5;
    --opdms-bg-secondary: #fafafa;
    --opdms-surface: #ffffff;
    --opdms-surface-secondary: #fafafa;
    --opdms-text: #242424;
    --opdms-text-secondary: #616161;
    --opdms-border: #e0e0e0;
    --opdms-fill: #f0f0f0;
    --opdms-muted: #616161;
    --opdms-muted-strong: #424242;
    --opdms-ink-primary: #0c3b5e;
    --opdms-border-strong: #d1d1d1;
    --opdms-card-bg: #ffffff;
    --opdms-modal-bg: #ffffff;
    --opdms-dropdown-bg: #ffffff;
    --opdms-input-bg: #ffffff;
    --opdms-sidebar-bg: #fafafa;
    --opdms-navbar-bg: var(--opdms-primary);

    --opdms-primary: #0f6cbd;
    --opdms-primary-rgb: 15, 108, 189;
    --opdms-primary-light: #3f89ca;
    --opdms-primary-dark: #0c5697;
    --opdms-secondary: #616161;
    --opdms-secondary-rgb: 97, 97, 97;
    --opdms-accent: #107c10;
    --opdms-accent-rgb: 16, 124, 16;
    --opdms-warning: #f7a01c;
    --opdms-warning-rgb: 247, 160, 28;

    --opdms-success: #107c10;
    --opdms-danger: #c50f1f;
    --opdms-info: #0f6cbd;
    --opdms-success-rgb: 16, 124, 16;
    --opdms-info-rgb: 15, 108, 189;
    --opdms-danger-rgb: 197, 15, 31;
    --opdms-ink-success: #0e700e;
    --opdms-ink-warning: #8a3707;
    --opdms-ink-danger: #b10e1c;
    --opdms-ink-info: #115ea3;
    --opdms-ink-secondary: #424242;

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

    --opdms-control-h: 32px;
    --opdms-font: "Segoe UI Variable Text", "Segoe UI", "Noto Sans", system-ui, sans-serif;
    --opdms-fs: 14px;
    --opdms-fs-sm: 12px;
    --opdms-btn-weight: 600;
    --opdms-heading-weight: 600;

    --opdms-shadow-card: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    --opdms-shadow-window: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
    --opdms-radius-window: 8px;
    --opdms-window-title-bg: var(--opdms-surface);
    --opdms-window-title-line: var(--opdms-border);
    --opdms-focus: 0 0 0 2px #ffffff, 0 0 0 4px #242424;

    --opdms-th-bg: transparent;
    --opdms-th-color: #424242;
    --opdms-th-size: 12px;
    --opdms-th-case: none;
    --opdms-th-track: 0;
    --opdms-th-weight: 600;

    --opdms-nav-bg: var(--opdms-primary);
    --opdms-nav-fg: #ffffff;
    --opdms-nav-line: var(--opdms-primary);
    --opdms-nav-accent: #ffffff;
    --opdms-nav-on-accent: var(--opdms-primary);

    --opdms-badge-mix: 100%;
    --opdms-alert-mix: 8%;
}