/* base.css — neutral structural layer for review sites.
   Fixed CSS themes are retired: every color, font, radius and shadow is supplied by the
   per-site generative design tokens injected as CSS variables in BaseLayout (single mode).
   This file only provides variable-driven element styling shared by all sites; per-component
   layout variety comes from each component's own data-v variants. */

body {
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

nav {
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-secondary); }

/* NOTE: no global .card / [class*="card"] rule — every component styles its own
   cards in scoped CSS. A broad attribute selector here bleeds borders/backgrounds
   into component internals (ct-card, gcard, …) and creates ghost boxes. */

a {
  color: inherit;
  transition: color 0.15s ease, opacity 0.15s ease;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-primary); }

table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th { font-weight: 600; background: var(--color-surface-alt); text-align: left; color: var(--color-text-primary); }
tr:nth-child(even) td { background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent); }
td, th { border: 1px solid var(--color-border); padding: 0.65rem 0.9rem; vertical-align: top; }

hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; opacity: 0.85; }

/* @tailwindcss/typography hardcodes its own --tw-prose-* colors on `.prose`
   (light-mode grays) which wins over a plain `.prose h2 {}` rule on specificity
   — and never reaches AI review content injected via `set:html` at all, since
   that bypasses Astro's per-component style scoping. Re-point every --tw-prose-*
   color at our own theme tokens so prose content follows the site's light/dark
   mode instead of Tailwind's fixed defaults; `body` bumps specificity above
   Tailwind's plain `.prose` rule regardless of stylesheet load order. */
body .prose {
  --tw-prose-body: var(--color-text-primary);
  --tw-prose-headings: var(--color-text-primary);
  --tw-prose-lead: var(--color-text-secondary);
  --tw-prose-links: var(--color-primary);
  --tw-prose-bold: var(--color-text-primary);
  --tw-prose-counters: var(--color-text-secondary);
  --tw-prose-bullets: var(--color-text-secondary);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--color-text-primary);
  --tw-prose-quote-borders: var(--color-border);
  --tw-prose-captions: var(--color-text-secondary);
  --tw-prose-kbd: var(--color-text-primary);
  --tw-prose-code: var(--color-text-primary);
  --tw-prose-pre-code: var(--color-text-primary);
  --tw-prose-pre-bg: var(--color-surface-alt);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border);
}