/* ==========================================================
   GREG — design tokens + base classes
   The bulk of component styles live in the <style> block of
   the prototype HTML. This file provides:
     • CSS custom properties (light + dark)
     • font families & base reset
     • brand mark + name
   ========================================================== */

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body becomes the viewport flex column so siblings (broadcast banner,
   verify-email banner) reduce the available height of .app.rss instead of
   pushing it past 100vh and forcing the user to scroll. */
body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body > .broadcast-banner { flex: 0 0 auto; }
body > .app.rss {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* Prevent theme-swap flash until JS applies the saved theme */
html.preload, html.preload * {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* ---------- Design tokens ---------- */
:root {
  /* Typography — system font stack. Google Fonts (Manrope + Bricolage
   * Grotesque) were dropped (GDPR + supply-chain hygiene: no third-party
   * CDN dependency at page load, no SRI-impossible CSS, no DNS lookup to
   * fonts.googleapis.com / fonts.gstatic.com). The OS native UI font is
   * what users already perceive as "the system" — Segoe UI Variable on
   * Windows 11, SF Pro on macOS, Roboto on Android, the distro default
   * on Linux. Both --font-display and --font-sans resolve to the same
   * stack since we no longer ship a distinct heading face; surfaces that
   * want a heavier feel use font-weight: 700 instead of a separate face.
   */
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Motion */
  --ease:        cubic-bezier(.22, 1, .36, 1);   /* smooth organic easeOutQuint */
  --ease-spring: cubic-bezier(.34, 1.25, .64, 1);/* gentle spring for UI pops */
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);     /* standard material */
  --dur-fast:    180ms;
  --dur-med:     260ms;
  --dur-slow:    420ms;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Layout constants */
  --list-w: 380px;
  --ph-h: 44px;

  /* Primary (Copilot violet) */
  --primary: #6d5ef5;
  --primary-rgb: 109, 94, 245;
  --primary-12: rgba(109, 94, 245, .12);
  --primary-50: rgba(109, 94, 245, .5);

  /* Shadow */
  --shadow-main: 0 8px 30px -8px rgba(0, 0, 0, .18),
                 0 0 0 1px rgba(0, 0, 0, .04);
}

/* ---------- Light theme (default) ---------- */
html,
html.light,
body,
body[data-theme="light"] {
  --bg:            #f4f3f9;
  --card:          #ffffff;
  --cov:           #f4f3fb;
  --fg:            #111114;
  --fg-04:         rgba(17, 17, 20, .04);
  --fg-06:         rgba(17, 17, 20, .06);
  --fg-08:         rgba(17, 17, 20, .08);
  --fg-12:         rgba(17, 17, 20, .12);
  --fg-25:         rgba(17, 17, 20, .32);
  --fg-50:         rgba(17, 17, 20, .54);
  --fg-75:         rgba(17, 17, 20, .78);
  --border:        rgba(17, 17, 20, .10);
  --border-soft:   rgba(17, 17, 20, .06);
  --sidebar:       #f4f3f9;
  --nav-hover:     rgba(17, 17, 20, .05);

  --c: var(--primary);
}

/* ---------- Dark theme ---------- */
html.dark,
body[data-theme="dark"] {
  --bg:            #141416;
  --card:          #1f1f22;
  --cov:           #252528;
  --fg:            #f3f3f5;
  --fg-04:         rgba(255, 255, 255, .04);
  --fg-06:         rgba(255, 255, 255, .06);
  --fg-08:         rgba(255, 255, 255, .08);
  --fg-12:         rgba(255, 255, 255, .12);
  --fg-25:         rgba(255, 255, 255, .28);
  --fg-50:         rgba(255, 255, 255, .52);
  --fg-75:         rgba(255, 255, 255, .75);
  --border:        rgba(255, 255, 255, .08);
  --border-soft:   rgba(255, 255, 255, .05);
  --sidebar:       #141416;
  --nav-hover:     rgba(255, 255, 255, .05);

  --c: var(--primary);
}

/* ---------- Brand (sidebar logo row) ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
  /* Native button reset — clicking the brand goes back to "All articles". */
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.brand:hover .brand-name { color: var(--primary); }
.brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

.brand-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  /* Tint the logo with the user's accent color. logo.png has a
     transparent background and an opaque brain+waves silhouette in its
     alpha channel — that's exactly the shape we want as a mask. The
     mask clips the .brand-mark's solid background-color to the
     silhouette, so changing --primary instantly re-colors the logo. */
  background-color: var(--primary);
  -webkit-mask: url(/icons/logo.png) center / contain no-repeat;
  mask: url(/icons/logo.png) center / contain no-repeat;
}
/* The <img src="/icons/logo.png"> remains in the DOM (the prototype
   markup is frozen) but is hidden — the mask above renders the visual.
   Leaving the <img> request alone also means the browser warms the
   cache for the mask asset. */
.brand-mark img { display: none; }
.brand-mark svg { width: 14px; height: 14px; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--fg);
}

/* ---------- sr-only helper (used sparsely) ---------- */
.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;
}