/* ================================================================
   Base Styles — Rocket Academy
   Applies tokens globally. Loaded AFTER tokens.css and tailwind.

   Contains:
   - Typography defaults (Inter body + Space Grotesk display, scale, weights)
   - Body canvas color + text color
   - Custom scrollbar (dark, subtle)
   - :focus-visible global ring
   - ::selection color
   - Heading defaults (size + weight, no Tailwind override)

   NOTE: focus-visible uses accent token for ring color.
   ================================================================ */

/* ── Typography ────────────────────────────────────────────────── */
html {
    font-family: var(--font-primary);
    font-size: 16px; /* rem base */
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    background-color: var(--bg-canvas);
    font-variant-numeric: tabular-nums;
}

/* Heading defaults — only apply when no Tailwind class overrides */
h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-medium);   line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-medium);   line-height: var(--leading-snug); }
h5 { font-size: var(--text-md);  font-weight: var(--weight-medium);   line-height: var(--leading-normal); }
h6 { font-size: var(--text-base);font-weight: var(--weight-medium);   line-height: var(--leading-normal); }

/* Small / metadata text */
small { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Code / mono */
code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ── Focus Visible ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Primary buttons: white outline on colored bg for contrast */
.btn--primary:focus-visible,
.cta-epic:focus-visible,
.empty-state__cta:focus-visible,
.home-continue-cta:focus-visible {
    outline-color: white;
    box-shadow: 0 0 0 4px rgba(196, 65, 6, 0.3);
}

/* ── Link hover defaults ──────────────────────────────────────── */
a {
    color: inherit;
    transition: color var(--dur-fast) var(--ease-standard);
}

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
    background: var(--accent-muted-hover);
    color: var(--text-primary);
}

/* ── Scrollbar (webkit — dark, subtle) ─────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

/* ── Links default ─────────────────────────────────────────────── */
a {
    transition: color var(--dur-fast) var(--ease-out);
}

/* NOTE: transition + focus glow for inputs/buttons are NOT global.
   They go in component-level CSS (Input, Button) in Phase 1.
   Reason: conflicts with existing Tailwind transition-* and focus:ring-* classes. */

/* ── Turbo progress bar ────────────────────────────────────────── */
.turbo-progress-bar {
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-hover));
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-toast);
}

/* ── Screen reader only ──────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}