/* ==========================================================================
   base.css — Reset, self-hosted fonts, base typography & focus styles
   --------------------------------------------------------------------------
   Depends on css/variables.css for design tokens (--bg, --text, --font-sans,
   --font-serif, --link, --code, --brand, --ring, --header-height, ...).

   Scope (Task 3.2):
     - CSS reset (box-sizing, margin/padding normalize, media defaults)
     - @font-face for self-hosted Inter + Merriweather (font-display: swap)
     - base typography (body >= 16px, line-height ~1.6)  — Requirement 9.6
     - visible focus styles (>= 2px outline, >= 2px offset) — Requirement 9.7
     - .visually-hidden utility (used by index.html)

   Out of scope (owned by other tasks):
     - Layout / grid / breakpoints            -> layout.css   (Task 3.3)
     - 300ms themed color-transition rules     -> Task 5.4
       (a clearly marked insertion point is left near the end of this file)
   ========================================================================== */

/* ==========================================================================
   1. Self-hosted fonts
   --------------------------------------------------------------------------
   Inline @font-face here (rather than @import assets/fonts/fonts.css) to avoid
   an extra render-blocking request. Paths are relative to THIS file (css/),
   so they climb one level to reach assets/fonts/. Both families are variable
   fonts on the wght axis; a single woff2 per style+subset covers 400-700.
   font-display: swap prevents invisible text while the font loads.
   ========================================================================== */

/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather — normal — latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/merriweather-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* Merriweather — normal — latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/merriweather-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather — italic — latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/merriweather-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* Merriweather — italic — latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/merriweather-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Reset / normalize
   ========================================================================== */

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

/* Remove default margins on common elements. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

/* Reset padding on lists (base element styling below re-adds where needed). */
ul,
ol {
  padding: 0;
}

/* Full-height root so background covers the viewport. */
html {
  height: 100%;
}

/* Consistent, comfortable smooth-scroll; heading offset for the sticky header.
   scroll-behavior is disabled for reduced-motion users further below. */
html {
  scroll-behavior: smooth;
}

/* Media defaults: block-level, never overflow their container. */
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Form controls inherit typography instead of using UA defaults. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* ==========================================================================
   3. Base typography & document
   --------------------------------------------------------------------------
   Requirement 9.6 — base font-size is 16px (never smaller) and content
   remains legible even if later stylesheets fail to load.
   ========================================================================== */

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;                 /* Req 9.6 — >= 16px base size */
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  /* Subtle brand-tinted ambient wash layered over the solid theme bg. The
     solid var(--bg) fallback above keeps content legible if this fails. */
  background-image:
    radial-gradient(1200px 600px at 15% -10%, var(--ring), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, var(--ring), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings & brand use the serif display family (Merriweather). */
h1,
h2,
h3,
.brand {
  font-family: var(--font-serif);
  line-height: 1.25;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0;
}

/* Links use the themed link color; underline on hover/focus for clarity. */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

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

/* Inline code uses the mono family and the themed code color. */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9375em;             /* ~15px within 16px body */
}

code {
  color: var(--code);
}

/* Emphasis renders in the serif italic subset that we self-host. */
em,
i {
  font-family: var(--font-serif);
  font-style: italic;
}

strong,
b {
  font-weight: 700;
}

/* ==========================================================================
   4. Focus styles
   --------------------------------------------------------------------------
   Requirement 9.7 — every keyboard-focusable control shows a visible focus
   indicator of at least 2px, offset at least 2px from the element boundary.
   Use :focus-visible so mouse users don't see the ring, and drop the UA
   default outline only when :focus-visible support exists.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--brand);   /* >= 2px outline (Req 9.7) */
  outline-offset: 2px;               /* >= 2px offset  (Req 9.7) */
  border-radius: var(--radius-sm);
}

/* When :focus-visible is supported, suppress the always-on :focus outline so
   pointer interactions stay clean; keyboard focus still shows the ring above. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Fallback: browsers without :focus-visible still get a visible focus ring. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ==========================================================================
   5. Utilities
   ========================================================================== */

/* Visually hidden but available to screen readers (used by index.html for
   the "About" heading). Standard clip-rect technique. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   6. Reduced-motion base preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   7. Theme-transition insertion point
   --------------------------------------------------------------------------
   INSERTION POINT (Task 5.4): the 300ms themed color transition
   (--transition-theme) belongs here, gated by a `.theme-transitions-enabled`
   class added after first paint so the pre-paint theme does not animate.
   Intentionally left empty in this task.
   ========================================================================== */
/* Themed colors come from the tokens in variables.css, which swap between the
   dark (:root) and light (:root.light) palettes. When `.theme-transitions-enabled`
   is present on <html> — added by main.js inside requestAnimationFrame AFTER the
   first paint (Task 13.1) — these surfaces ease their background-color and color
   over --transition-theme (300ms) so a theme toggle fades gradually (Req 7.1).

   The gate matters: theme-init.js applies the stored theme BEFORE first paint,
   while this class is still absent, so that initial application is instantaneous
   — no flash and no load-time color fade (Req 7.5).

   Only background-color and color transition here (Req 7.1); layout, transforms
   and other interaction transitions are intentionally untouched. `:where(...)`
   keeps the selector at zero specificity so component styles can still override
   colors without a specificity fight. */
.theme-transitions-enabled body,
.theme-transitions-enabled :where(
    .site-header,
    .site-footer,
    .scroll-progress,
    .card,
    .news-item,
    .tag,
    .btn,
    .filter-btn,
    .theme-toggle,
    .nav-links,
    a,
    code
  ) {
  transition:
    background-color var(--transition-theme) var(--ease-in-out),
    color var(--transition-theme) var(--ease-in-out);
}

/* Reduced motion: swap the theme instantly. The tokens still change (the theme
   still switches), but the 300ms color fade is removed so users who requested
   reduced motion don't see an animated transition (Requirement 3.4). */
@media (prefers-reduced-motion: reduce) {
  .theme-transitions-enabled body,
  .theme-transitions-enabled :where(
      .site-header,
      .site-footer,
      .scroll-progress,
      .card,
      .news-item,
      .tag,
      .btn,
      .filter-btn,
      .theme-toggle,
      .nav-links,
      a,
      code
    ) {
    transition: none;
  }
}