/*
 * base.css — the web-only base layer that sits on top of the design tokens (AB#1361).
 *
 * HAND-AUTHORED. Unlike tokens.css beside it, this file is normal source: edit it freely. It is not
 * drift-checked, because it is not a copy of anything — it is the part of the web application the
 * design system deliberately does not specify (document ground, the Bootstrap bridge). The chrome —
 * app bar, tab bar, sidebar, top bar — moved to layout.css with the responsive shell (AB#2021).
 *
 * Load order matters: tokens.css → base.css → components.css → layout.css. Everything here reads var(--rt-*),
 * var(--sp-*), var(--r-*) and var(--fs-*); there is not a single hardcoded colour in this file, and
 * there must never be one. See .claude/skills/rashitantra-ui/SKILL.md, hard rule 1.
 */

/* ==================================================================================================
   Document
   ================================================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* The old site.css shrank the root to 14px below 768px, which silently rescaled every Bootstrap
       rem. The design system sizes type from --fs-* instead, so the root stays at the browser
       default and a user's own font-size preference is respected. */
    min-height: 100%;
}

body {
    /* A flex column, so the shell (layout.css) can take the remaining height and the phone tab bar
       sits at the bottom even when a page is shorter than the viewport. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: var(--surface-page);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

main {
    flex: 1 0 auto;
}

/* The skip link's target (AB#2021). A programmatic focus on <main> should not draw the gold ring
   around the whole content column; the ring is for the controls inside it. */
main:focus {
    outline: none;
}

/* ==================================================================================================
   Type
   ================================================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.rt-serif {
    font-family: var(--font-display);
    color: var(--text-heading);
    line-height: var(--lh-display);
}

h1 {
    font-size: var(--fs-display);
}

h2 {
    font-size: var(--fs-title);
}

h3 {
    font-size: var(--fs-card-title);
}

h4,
h5,
h6 {
    font-size: var(--fs-body);
}

a {
    color: var(--rt-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

small,
.rt-meta {
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

/* UPPERCASE section markers. The one sanctioned use of --fs-eyebrow — never badge or chip text. */
.rt-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Degrees, counts and clock times, so columns of numbers line up: 14°22′36″. */
.rt-num {
    font-variant-numeric: tabular-nums;
}

/* ==================================================================================================
   Focus — hard rule 4. 3px gold, everywhere, in both themes, for 60+ users.
   ================================================================================================== */

:focus-visible {
    outline: 3px solid var(--rt-gold);
    outline-offset: 2px;
}

/* Bootstrap paints its own focus ring as a box-shadow on controls, which would sit under ours and
   read as a doubled halo. This is the one place the two systems genuinely collide. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-close:focus {
    box-shadow: none;
    outline: 3px solid var(--rt-gold);
    outline-offset: 2px;
}

/* ==================================================================================================
   Motion — all transitions ≤ .25s, and none at all when the reader has asked for none.
   ================================================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ==================================================================================================
   Bootstrap bridge
   --------------------------------------------------------------------------------------------------
   Bootstrap 5.3 draws its own components from --bs-* custom properties. Mapping those onto the design
   tokens is what makes an unstyled Bootstrap surface — a dropdown, a modal, a table, an alert —
   inherit the palette instead of fighting it, and it is why the legacy stylesheets could be unlinked
   without every existing page turning into white-on-white.

   This is a bridge, not a reskin: the components that carry brand identity are built properly in
   components.css. This only stops the plumbing from looking wrong.
   ================================================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--text-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-body);
    --bs-emphasis-color: var(--text-heading);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: var(--border-default);
    --bs-link-color: var(--rt-link);
    --bs-link-hover-color: var(--rt-link);
    --bs-heading-color: var(--text-heading);
    --bs-primary: var(--rt-primary);
    --bs-secondary-bg: var(--surface-sunken);
    --bs-tertiary-bg: var(--surface-sunken);
    --bs-code-color: var(--rt-accent);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-md);
    --bs-focus-ring-color: transparent;
}

.card {
    --bs-card-bg: var(--surface-card);
    --bs-card-color: var(--text-body);
    --bs-card-border-color: var(--border-default);
    --bs-card-cap-bg: var(--surface-sunken);
    --bs-card-border-radius: var(--r-md);
    --bs-card-inner-border-radius: var(--r-md);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-body);
    --bs-table-border-color: var(--border-default);
    --bs-table-striped-bg: var(--surface-sunken);
    --bs-table-hover-bg: var(--surface-sunken);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--surface-card);
    --bs-dropdown-color: var(--text-body);
    --bs-dropdown-border-color: var(--border-default);
    --bs-dropdown-border-radius: var(--r-sm);
    --bs-dropdown-link-color: var(--text-body);
    --bs-dropdown-link-hover-bg: var(--surface-sunken);
    --bs-dropdown-link-hover-color: var(--text-heading);
    --bs-dropdown-link-active-bg: var(--rt-primary-soft);
    --bs-dropdown-link-active-color: var(--text-heading);
}

.form-control,
.form-select {
    background-color: var(--rt-input-bg);
    border-color: var(--rt-input-border);
    color: var(--rt-input-ink);
}

.form-control::placeholder {
    color: var(--rt-placeholder);
}

.modal {
    --bs-modal-bg: var(--surface-card);
    --bs-modal-color: var(--text-body);
    --bs-modal-border-color: var(--border-default);
    --bs-modal-border-radius: var(--r-lg);
}

/* ==================================================================================================
   Skip link — a keyboard user should not have to tab through the whole shell chrome on every page.
   ================================================================================================== */

.rt-skip-link {
    position: absolute;
    left: var(--sp-2);
    top: var(--sp-2);
    z-index: 1080;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
    background-color: var(--surface-card);
    color: var(--text-heading);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.rt-skip-link:focus-visible {
    transform: translateY(0);
}