/*
 * Keyboard focus on the public and sign-in pages: a 3px ring outside what has focus.
 *
 * Tabler's .btn:focus-visible turns the outline off and rings with a box-shadow whose colour
 * variable Tabler 1.4 sets only on .btn-link, so every other button showed nothing but its
 * hover colours (1.10-1.43:1). Links had the browser's thin default ring, and the sign-in
 * pages a gold ring that read 1.92:1 on the card paper. No one colour reads 3:1 on both the
 * paper and the dark bands, so the ring is dark green on light surfaces and gold on dark ones;
 * each dark band sets the gold in its own rule, and light cards inside a dark band set the
 * green back.
 *
 * An outline, not a box-shadow: Windows high contrast keeps outlines, as the app's rings do.
 * The :is() list scores (0,2,1) from a[href], so it outranks Tabler's .btn:focus-visible,
 * .form-select:focus and .form-check-input:focus wherever this file loads. Text fields keep
 * their own border and glow: they show a caret, and :focus-visible also matches them on a
 * click, where a ring would change every mouse user's form.
 *
 * public/css/public-focus.css; tests/Frontend/StudentScreens/public-focus.test.mjs presses Tab
 * through each page and measures the ring against what it is drawn on.
 */
:root {
    /* 6.80:1 on the paper #fffaf2, 6.18:1 on the soft #f6efe4, 7.06:1 on white. */
    --luma-focus-ring-on-light: #24634f;
    /* 10.36:1 on #17211c, 5.61:1 at the brown end of the sign-in gradient, 11.12:1 on Tabler's dark #111827. */
    --luma-focus-ring-on-dark: #f5c66a;
    --luma-focus-ring: var(--luma-focus-ring-on-light);
    --luma-focus-offset: 2px;
}

/* The Terms and Privacy pages follow the app's dark theme. */
[data-bs-theme="dark"] {
    --luma-focus-ring: var(--luma-focus-ring-on-dark);
}

:is(a[href], button, summary, select, input[type="checkbox"], input[type="radio"], [role="button"], [tabindex="0"]):focus-visible {
    outline: 3px solid var(--luma-focus-ring);
    outline-offset: var(--luma-focus-offset);
}

/* Tab scrolls a stop just into view; this keeps room for its ring at the window's edge. A
   page with something fixed or sticky at an edge sets its own (:where() lets it win). */
:where(html) {
    scroll-padding-block: .75rem;
}

/*
 * The language pickers float over whatever scrolls behind them (a dark hero, the paper card):
 * their ring is drawn inside their own paper fill, so it reads the same over anything.
 */
.auth-language-switcher {
    --luma-focus-ring: var(--luma-focus-ring-on-light);
    --luma-focus-offset: -4px;
}