html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    background-color: var(--ucr-background);
}

/* ── Layout: Box Model Consistency ───────────────────────────
   Applies border-box sizing to all elements and pseudo-elements.
   Width and height calculations include padding and borders,
   resulting in more predictable layouts and easier maintenance. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Accessibility: Keyboard Focus Indicator ────────────────
   Displays a visible focus outline when elements receive
   keyboard focus, improving navigation accessibility and
   helping users identify the currently focused control. */
:focus-visible {
    outline: 2px solid var(--ucr-light-blue);
    outline-offset: 2px;
}

/* ── Accessibility: Skip Navigation Link ────────────────────
   Hidden off-screen by default and revealed when focused.
   Allows keyboard and assistive technology users to bypass
   repetitive navigation and jump directly to the main content. */
.cc-skip-link {
    position: absolute;
    top: -9999px;
    left: 6px;
    background: var(--ucr-blue);
    color: var(--ucr-white);
    padding: 8px 16px;
    font-family: var(--font-family-base);
    font-size: 13px;
    border-radius: var(--radius-field);
    z-index: 9999;
    text-decoration: none;
}

    /* ── Accessibility: Skip Link Visible State ────────────────
   Repositions the skip link into the viewport when it gains
   keyboard focus, making it available for immediate use. */
    .cc-skip-link:focus {
        top: 6px;
    }

/* ── Accessibility: Screen Reader Only Content ──────────────
   Visually hides content while preserving accessibility for
   screen readers. Useful for descriptive labels, instructions,
   and contextual information not intended for visual display. */
.cc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}