/* ============================================
   Look rules shared by every look except Classic (plan 09, ~/.claude/plans/new-look/).
   Classic is Bootstrap's own drawing and never matches these selectors. The tokens decide the
   values; this file only points Bootstrap's components at the tokens Bootstrap itself doesn't read
   (radii, weights, header styles, shadows). Each look's signature touches are in looks/<look>.css.
   ============================================ */

:root[data-look]:not([data-look="classic"]) body {
    font-family: var(--opdms-font);
    font-size: var(--opdms-fs);
}

:root[data-look]:not([data-look="classic"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: var(--opdms-heading-weight);
}

/* Buttons: corners and weight. Colours already come from the tokens (op-base.css). */
:root[data-look]:not([data-look="classic"]) .btn {
    --bs-btn-border-radius: var(--opdms-radius-btn);
    --bs-btn-font-weight: var(--opdms-btn-weight);
}
:root[data-look]:not([data-look="classic"]) :is(.btn-sm, .btn-group-sm > .btn, .btn-lg, .btn-group-lg > .btn) {
    --bs-btn-border-radius: var(--opdms-radius-btn);
}

/* Fields */
:root[data-look]:not([data-look="classic"]) :is(.form-control, .form-select) {
    background-color: var(--opdms-input-bg);
    border-color: var(--opdms-border-strong);
    border-radius: var(--opdms-radius);
}
:root[data-look]:not([data-look="classic"]) :is(.form-control, .form-select):focus {
    border-color: var(--opdms-primary);
    box-shadow: var(--opdms-focus);
}
/* A locked field keeps its grey well: the rule above outranks op-base's .form-control:disabled. */
:root[data-look]:not([data-look="classic"]) :is(.form-control, .form-select):disabled {
    background-color: var(--opdms-fill);
}
:root[data-look]:not([data-look="classic"]) .form-check-input:checked {
    background-color: var(--opdms-primary);
    border-color: var(--opdms-primary);
}

/* Cards, menus, alerts */
:root[data-look]:not([data-look="classic"]) .card {
    --bs-card-border-radius: var(--opdms-radius-card);
    --bs-card-border-color: var(--opdms-border);
    --bs-card-bg: var(--opdms-card-bg);
    box-shadow: var(--opdms-shadow-card);
}
:root[data-look]:not([data-look="classic"]) .dropdown-menu {
    --bs-dropdown-border-radius: var(--opdms-radius-card);
    --bs-dropdown-border-color: var(--opdms-border);
    --bs-dropdown-bg: var(--opdms-dropdown-bg);
    --bs-dropdown-link-active-bg: var(--opdms-primary);
    box-shadow: var(--opdms-shadow-window);
}
:root[data-look]:not([data-look="classic"]) .alert {
    --bs-alert-border-radius: var(--opdms-radius);
}
:root[data-look]:not([data-look="classic"]) .badge {
    --bs-badge-border-radius: var(--opdms-radius-badge);
}
:root[data-look]:not([data-look="classic"]) .nav-pills {
    --bs-nav-pills-link-active-bg: var(--opdms-primary);
}

/* Table headers */
:root[data-look]:not([data-look="classic"]) .table > thead > tr > th {
    background-color: var(--opdms-th-bg);
    color: var(--opdms-th-color);
    font-size: var(--opdms-th-size);
    text-transform: var(--opdms-th-case);
    letter-spacing: var(--opdms-th-track);
    font-weight: var(--opdms-th-weight);
}

/* Tinted chips: a look whose --opdms-badge-mix is under 100% draws status badges as a tint of the
   status colour with dark text (SaaS, Material); at 100% (Fluent) they stay solid. */
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-primary, .text-bg-primary) {
    background-color: color-mix(in srgb, var(--opdms-primary) var(--opdms-badge-mix), var(--opdms-surface)) !important;
    color: var(--opdms-ink-primary) !important;
}
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-success, .text-bg-success) {
    background-color: color-mix(in srgb, var(--opdms-success) var(--opdms-badge-mix), var(--opdms-surface)) !important;
    color: var(--opdms-ink-success) !important;
}
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-warning, .text-bg-warning) {
    background-color: color-mix(in srgb, var(--opdms-warning) calc(var(--opdms-badge-mix) * 2), var(--opdms-surface)) !important;
    color: var(--opdms-ink-warning) !important;
}
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-danger, .text-bg-danger) {
    background-color: color-mix(in srgb, var(--opdms-danger) var(--opdms-badge-mix), var(--opdms-surface)) !important;
    color: var(--opdms-ink-danger) !important;
}
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-info, .text-bg-info) {
    background-color: color-mix(in srgb, var(--opdms-info) var(--opdms-badge-mix), var(--opdms-surface)) !important;
    color: var(--opdms-ink-info) !important;
}
:root:is([data-look="saas"], [data-look="material"]) .badge:is(.bg-secondary, .text-bg-secondary) {
    background-color: var(--opdms-fill) !important;
    color: var(--opdms-ink-secondary) !important;
}

/* Dense containers keep Classic's control height under a taller look (Material: 36px). */
.op-dense {
    --opdms-control-h: 31px;
}