/*
 * Tabler 1.7.0 themed through its own CSS variables, with no fork and no Sass.
 * Loaded after tabler.min.css and tokens.css. Tabler uses no @layer, so these rules win by order.
 *
 * Two kinds of variable, two places:
 * - the :root block below holds the variables Tabler declares once on the root;
 * - rules on .btn, .form-control, .form-switch and the like hold the variables Tabler
 *   declares again on the component itself: a value set on the root would never reach them.
 *
 * The var() references resolve on <html>, which carries data-bs-theme, so one block serves both themes.
 * No --tblr-*-rgb variable: they are deprecated and ignore any override.
 */
:root {
    /* Action and states: Tabler derives its tints, shades and borders from these base colors */
    --tblr-primary: var(--brand);
    --tblr-primary-fg: var(--on-brand);
    --tblr-primary-darken: var(--brand-hover);
    --tblr-secondary: var(--ink-muted);
    --tblr-success: var(--success);
    --tblr-warning: var(--warning);
    --tblr-danger: var(--danger);
    --tblr-info: var(--info);
    --tblr-form-valid-color: var(--success);
    --tblr-form-valid-border-color: var(--success);
    --tblr-form-invalid-color: var(--danger);
    --tblr-form-invalid-border-color: var(--danger);

    /* Surfaces, text, borders and links */
    --tblr-body-bg: var(--surface);
    --tblr-bg-surface: var(--surface-raised);
    --tblr-bg-surface-secondary: var(--surface-sunken);
    --tblr-bg-forms: var(--surface-raised);
    --tblr-bg-forms-disabled: var(--surface-sunken);
    --tblr-body-color: var(--ink);
    --tblr-emphasis-color: var(--ink);
    --tblr-heading-color: var(--ink);
    --tblr-border-color: var(--line);
    --tblr-border-color-translucent: var(--line);
    --tblr-link-color: var(--brand);
    --tblr-link-hover-color: var(--brand-hover);

    /* Type: body 15/24 on the 4px grid, Fontsource families */
    --tblr-font-sans-serif: var(--font-sans);
    --tblr-font-monospace: var(--font-mono);
    --tblr-body-font-size: 15px;
    --tblr-body-line-height: 1.6;

    /* Shapes and relief: radii from the scale, flat controls, shadow-sm on cards, shadow-md on what floats */
    --tblr-border-radius: var(--radius-md);
    --tblr-border-radius-sm: var(--radius-sm);
    --tblr-border-radius-lg: var(--radius-lg);
    --tblr-shadow-input: none;
    --tblr-shadow-card: var(--shadow-sm);
    --tblr-shadow-dropdown: var(--shadow-md);

    /* Focus ring: solid 2px, offset 2px (the width and offset are Tabler's own defaults) */
    --tblr-focus-ring-color: var(--focus);

    /* Checked boxes and switches fill with brand (Tabler's default, from --tblr-primary); the border matches the fill */
    --tblr-control-checked-border-color: var(--brand);

    /*
     * Control height, 40px: line-height + 2 x padding-y + 2 x border = 24 + 2 x 7 + 2 x 1.
     * Fields read these variables through their own --tblr-control-* ones; buttons read them below.
     */
    --tblr-btn-input-font-size: 15px;
    --tblr-btn-input-line-height: 24px;
    --tblr-btn-input-padding-y: 7px;
    --tblr-btn-input-padding-x: var(--space-3);
}

/*
 * Buttons: same height as fields (40px), weight 600, flat. The size variants keep their own
 * metrics (btn-sm 16 + 2 x 7 + 2 = 32px, btn-lg 48px), so the 40px metrics skip them.
 */
.btn {
    --tblr-btn-font-weight: 600;
    --tblr-btn-gradient: none;
    --tblr-btn-box-shadow: none;
}

.btn:not(.btn-sm, .btn-lg, .btn-xl) {
    --tblr-btn-padding-y: var(--tblr-btn-input-padding-y);
    --tblr-btn-font-size: var(--tblr-btn-input-font-size);
    --tblr-btn-line-height: var(--tblr-btn-input-line-height);
}

/* Fields: line-strong border, brand on focus, ink-faint for placeholder and disabled text */
.form-control,
.form-select {
    --tblr-control-border-color: var(--line-strong);
    --tblr-control-focus-border-color: var(--brand);
    --tblr-control-placeholder-color: var(--ink-faint);
    --tblr-control-disabled-color: var(--ink-faint);
}

/* Tabler draws the focus ring of a field inside the border (offset -1px); the charte wants 2px outside */
.form-control:focus,
.form-select:focus {
    --tblr-focus-ring-offset: 2px;
}

/*
 * A focused validated control keeps the focus ring: Tabler colors it with a blend of the state
 * color and the page background (about 2:1 on surface in the light theme), and the charte asks
 * for 3:1 on every control. Width, style and offset stay Tabler's, which already match the other
 * controls. The border carries the valid or invalid state. Same specificity as Tabler's rules,
 * (0,3,0) and (0,4,0) with .was-validated, and loaded after them.
 */
:is(.form-control, .form-select, .form-check-input):is(.is-valid, .is-invalid):focus,
.was-validated :is(.form-control, .form-select, .form-check-input):is(:valid, :invalid):focus {
    outline-color: var(--focus);
}

.form-check-input {
    --tblr-form-check-icon-color: var(--on-brand);
}

/* Switch, 34 x 20px; the knob is surface-raised, never a literal white */
.form-switch {
    --tblr-form-switch-width: 34px;
    --tblr-form-switch-height: 20px;
    --tblr-form-switch-bg: var(--line-strong);
    --tblr-form-switch-focus-color: var(--surface-raised);
    --tblr-form-switch-checked-color: var(--surface-raised);
    --tblr-form-switch-disabled-color: var(--ink-faint);
}

.form-switch .form-check-input {
    --tblr-form-switch-color: var(--surface-raised);
}

/* AI variant of the switch: the track turns accent once checked */
.form-switch-ai {
    --tblr-control-checked-bg: var(--accent);
    --tblr-control-checked-border-color: var(--accent);
}

/* Tooltip: ink bubble, surface text. Tabler's own pair is a pair of greys that bypasses the tokens. */
.tooltip {
    --tblr-tooltip-bg: var(--ink);
    --tblr-tooltip-color: var(--surface);
}

/* Focus: solid ring on every control, in both themes */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Titles use the display family at weight 600, never 700 */
h1,
h2,
h3,
.page-title,
.card-title {
    font-family: var(--font-display);
    font-weight: 600;
}

/* The browser's own surfaces follow the palette */
::selection {
    background: var(--brand-soft);
    color: var(--ink);
}

input,
textarea {
    caret-color: var(--brand);
}

/* Tabler Icons outline at 1.5px: Iconify puts stroke-width="2" on an inner group, so let it inherit */
.icon {
    stroke-width: 1.5;
}

.icon [stroke-width] {
    stroke-width: inherit;
}