/* ============================================================
   Base — global element defaults built on the token layer.
   Keep this thin: set the typographic baseline and the few
   element-level behaviours Bootstrap doesn't give us. Everything
   reusable belongs in components.css.
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--surface-page);
    font-family: var(--font-sans);
    color: var(--neutral-700);
    line-height: var(--leading-normal);
    /* Crisper Inter rendering + a couple of stylistic sets. */
    font-optical-sizing: auto;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Headings ──
   Tight tracking + ink colour give Inter its polished, product feel. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 650;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

p {
    line-height: var(--leading-normal);
}

/* Links: accent, understated. Underline only the standalone ones so
   buttons and nav links (which carry their own affordance) stay clean. */
a {
    text-decoration: none;
    transition: color var(--ease);
}
p a,
.content-link {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
p a:hover,
.content-link:hover {
    text-decoration-color: currentColor;
}

/* ── Focus: one consistent accent ring, keyboard-only ── */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Text selection picks up the accent. */
::selection {
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--accent-active);
}

/* ── Page heading rhythm ──
   Headings scale fluidly with the viewport (clamp), so large titles never crowd
   the edges on small phones and grow to full size on desktop — smoother than a
   hard breakpoint step, and it needs no media query. Bounds are tied to the
   type scale so the system stays coherent. */
.page-title {
    font-size: clamp(1.5rem, 2vw + 1rem, var(--text-2xl));
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.5rem;
}

/* Centered intro block (poll header, empty states…). */
.page-intro {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}
.page-intro h1 {
    font-size: clamp(1.75rem, 4vw + 0.8rem, 2.5rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.page-intro p {
    color: var(--neutral-500);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    margin-bottom: 0;
}

/* Small eyebrow label above titles. */
.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

/* ── Cards: hairline border + faint shadow, no heavy chrome ── */
.card {
    --bs-card-bg: var(--surface-card);
    --bs-card-border-color: var(--border-default);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    box-shadow: var(--shadow-sm);
}

/* ── Form controls: calm, tactile, accent focus ── */
.form-control,
.form-select {
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.85rem;
    background-color: var(--surface-card);
    color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control::placeholder {
    color: var(--neutral-400);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
.form-label {
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--neutral-700);
    margin-bottom: 0.4rem;
}

/* Checks + radios tint to the accent when active. */
.form-check-input {
    border-color: var(--border-strong);
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ── Buttons: shared feel across every variant ── */
.btn {
    --bs-btn-font-weight: 550;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    letter-spacing: -0.005em;
    transition: background-color var(--ease), border-color var(--ease),
                color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:active {
    transform: translateY(0.5px);
}
.btn-lg {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-font-size: var(--text-base);
}

/* ── Tables: airy, hairline separators ── */
.table {
    --bs-table-border-color: var(--border-subtle);
    --bs-table-hover-bg: var(--surface-hover);
    margin-bottom: 0;
}
.table > thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--neutral-500);
    border-bottom-color: var(--border-default);
    padding-block: 0.85rem;
}
.table > tbody td {
    padding-block: 0.85rem;
    vertical-align: middle;
    border-bottom-color: var(--border-subtle);
}

/* ── Badges: quieter by default ── */
.badge {
    font-weight: 550;
    letter-spacing: 0;
    padding: 0.35em 0.65em;
    border-radius: var(--radius-xs);
}

/* ── Reduced-motion: honour the OS preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}