/* ============================================
   FONT IMPORTS
   Google Fonts for all 6 families (Phase 0)
   Phase 8: self-host Fraunces, Source Serif 4, IBM Plex Sans
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500&family=Source+Sans+3:wght@400;500&display=swap');

/* ============================================
   DESIGN TOKENS — 8pt Grid System
   All spacing uses multiples of 8 (4 for fine-tuning).
   Line-heights land on 4px or 8px multiples.
   ============================================ */
:root {
  /* === Backgrounds === */
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface2: #F0F0F0;

  /* === Text === */
  --text: #000000;
  --text2: #666666;
  --text3: #999999;

  /* === Borders === */
  --border: #E5E5E5;
  --border2: #F0F0F0;

  /* === Accents (use sparingly) === */
  --accent: #b45309;    /* amber — detail links, club identity nod */
  --accent2: #0f766e;   /* teal — status dots (e.g., "Currently Reading") */
  --star: #F5A623;      /* gold — star ratings only */
  --amber: #f59e0b;     /* amber — badges, warnings */
  --danger: #b91c1c;

  /* === CTA === */
  --cta-bg: #000000;
  --cta-text: #FFFFFF;

  /* === Elevation === */
  --shadow: 0 2px 8px rgba(0,0,0,0.06);

  /* === Radii === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 100px;   /* pill shape for CTAs */

  /* === Layout === */
  --maxw: 860px;
  --gutter: 24px;

  /* === Spacing scale (8pt grid) === */
  --s-1: 4px;     /* half-grid fine-tuning */
  --s-2: 8px;     /* tight spacing */
  --s-3: 16px;    /* standard gap */
  --s-4: 24px;    /* section-internal */
  --s-5: 32px;    /* section padding */
  --s-6: 48px;    /* major section gaps */
  --s-7: 64px;    /* page-level vertical rhythm */
  --s-8: 80px;    /* hero / feature sections */

  /* === Font sizes (type scale) === */
  --t-xs: 0.85rem;   /* captions, small labels */
  --t-sm: 0.95rem;   /* nav, secondary, buttons */
  --t-base: 1.1rem;  /* body text, form inputs */
  --t-lg: 1.25rem;   /* section emphasis */
  --t-xl: 1.65rem;   /* section headings */

  /* === Font families === */
  --font-brand: 'DM Serif Display', Georgia, serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-reading: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-ui: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-secondary: 'Source Sans 3', -apple-system, sans-serif;

  /* === Admin-specific === */
  --admin-surface: #F8F6F2;
  --admin-border: #E8E4DC;
}

/* ============================================
   DARK MODE
   Two selectors share the same overrides:
   1. OS-level preference (unless user chose "light")
   2. Manual toggle via data-theme="dark"
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a1a;
    --surface: #242424;
    --surface2: #2f2f2f;

    --text: #E5E5E5;
    --text2: #A0A0A0;
    --text3: #707070;

    --border: #333333;
    --border2: #2a2a2a;

    --accent: #d97706;
    --accent2: #14b8a6;
    --star: #F5A623;
    --amber: #f59e0b;
    --danger: #ef4444;

    --cta-bg: #FFFFFF;
    --cta-text: #000000;

    --shadow: 0 2px 8px rgba(0,0,0,0.25);

    --admin-surface: #1E1C18;
    --admin-border: #3a3630;
  }
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --surface: #242424;
  --surface2: #2f2f2f;

  --text: #E5E5E5;
  --text2: #A0A0A0;
  --text3: #707070;

  --border: #333333;
  --border2: #2a2a2a;

  --accent: #d97706;
  --accent2: #14b8a6;
  --star: #F5A623;
  --amber: #f59e0b;
  --danger: #ef4444;

  --cta-bg: #FFFFFF;
  --cta-text: #000000;

  --shadow: 0 2px 8px rgba(0,0,0,0.25);

  --admin-surface: #1E1C18;
  --admin-border: #3a3630;
}