/* Theme and utilities, and a small reset scoped to the app's root: the
 * whole of Tailwind's preflight would restyle wp-admin's own menus too. */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(ftr);
@import "tailwindcss/utilities.css" layer(utilities) prefix(ftr);

@source "./";

/* The brand blue and the radii, printed whether a class uses them or not,
 * since the rules below read them as variables. */
@theme static {
    --color-brand-50: oklch(0.9720 0.0140 250.08);
    --color-brand-100: oklch(0.9380 0.0340 250.08);
    --color-brand-200: oklch(0.8880 0.0660 250.08);
    --color-brand-500: oklch(0.7020 0.1680 250.08);
    --color-brand-600: oklch(0.6496 0.1802 250.08);
    --color-brand-700: oklch(0.5620 0.1760 250.08);
    --radius-field: 6px;
    --radius-item: 8px;
    --radius-card: 12px;
}

@layer base {
    .fxtr-root *,
    .fxtr-root ::before,
    .fxtr-root ::after {
        box-sizing: border-box;
        border: 0 solid;
    }

    .fxtr-root button {
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .fxtr-root table {
        border-collapse: collapse;
    }
}

/* Dark mode follows a data-theme="dark" above the app. */
@custom-variant dark (&:where([data-theme="dark"] *));

/* WP's forms.css styles bare inputs unlayered, so it beats any utility.
 * Controls carry this marker and get the design back here. */
.fxtr-control {
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--ftr-radius-field) !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    min-height: 0 !important;
    line-height: 1.25rem !important;
    color: #0f172a !important;
}

.fxtr-control:focus,
.fxtr-control:focus-visible {
    outline: none !important;
    border-color: var(--ftr-color-brand-500) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ftr-color-brand-500) 30%, transparent) !important;
}

.fxtr-control[aria-invalid="true"],
[data-theme="dark"] .fxtr-control[aria-invalid="true"] {
    border-color: #dc2626 !important;
}

.fxtr-control[aria-invalid="true"]:focus,
.fxtr-control[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 2px rgb(220 38 38 / 0.3) !important;
}

.fxtr-check {
    border-color: #94a3b8 !important;
    border-radius: 4px !important;
    accent-color: var(--ftr-color-brand-600);
}

/* WP's blue ring on input[type=checkbox]:focus, swapped for an outline
 * shown only to keyboard users. */
.fxtr-check:focus {
    outline: none !important;
    box-shadow: none !important;
}

.fxtr-check:focus-visible {
    outline: 2px solid var(--ftr-color-brand-500) !important;
    outline-offset: 2px;
}

/* wp-admin draws a blue box-shadow on a:focus (and outlines on buttons),
 * unlayered. revert-layer hands focus back to the utilities: nothing after
 * a mouse click, the element's own focus-visible ring from the keyboard. */
:is(a, button, summary, [tabindex])[class*="ftr:"]:focus {
    box-shadow: revert-layer;
    outline: revert-layer;
}

[data-theme="dark"] .fxtr-control {
    background-color: #2c3338 !important;
    border-color: #3c434a !important;
    color: #e6e7e8 !important;
}

/* wp-admin styles bare p, ul, li, headings, links and table cells outside any
 * cascade layer, so those rules beat every ftr: utility (a `p` loses its
 * ftr:mx-5, a `ul` its ftr:px-5). revert-layer on these selectors hands the
 * properties back to the utilities the element carries. */
:is(p, ul, ol, li, h1, h2, h3, h4, a, th, td)[class*="ftr:"] {
    margin: revert-layer;
    padding: revert-layer;
    font-size: revert-layer;
    font-weight: revert-layer;
    color: revert-layer;
    text-align: revert-layer;
}

/* Dark surfaces, in the colors of the wp-admin dark schemes. */
[data-theme="dark"] .fxtr-root .ftr\:bg-white {
    background-color: #2c3338;
}
[data-theme="dark"] .fxtr-root .ftr\:bg-slate-50,
[data-theme="dark"] .fxtr-root .ftr\:hover\:bg-slate-50:hover {
    background-color: #1d2327;
}
[data-theme="dark"] .fxtr-root .ftr\:text-slate-500,
[data-theme="dark"] .fxtr-root .ftr\:text-slate-700,
[data-theme="dark"] .fxtr-root .ftr\:text-slate-900 {
    color: #e6e7e8;
}
[data-theme="dark"] .fxtr-root .ftr\:border-slate-100,
[data-theme="dark"] .fxtr-root .ftr\:border-slate-200,
[data-theme="dark"] .fxtr-root .ftr\:border-slate-300 {
    border-color: #3c434a;
}

dialog.fxtr-dialog::backdrop {
    background: rgb(15 23 42 / 0.5);
}

/* The dialog lives in the top layer, outside the themed wrapper. */
dialog.fxtr-dialog[data-theme="dark"] {
    background-color: #2c3338;
    border-color: #3c434a;
    color: #e6e7e8;
}