/*
 * THE BASE CAMP — Design Tokens
 * colors_and_type.css
 *
 * Near-monochrome palette with a single crimson accent.
 * Serif-first typography system for contemplative scholarly publication.
 * Intended use: slide decks for public talks.
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');

/* ─── Color Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Base surfaces */
  --color-bg:                #FAF9F6;   /* warm off-white — page/slide background */
  --color-surface:           #F2F0EA;   /* slightly warmer — used for inset panels */
  --color-surface-dark:      #1C1B18;   /* near-black — dark slide backgrounds */

  /* Text */
  --color-text:              #1C1B18;   /* primary body text — warm near-black */
  --color-text-secondary:    #6A6860;   /* captions, bylines, folios */
  --color-text-tertiary:     #9C9890;   /* very muted — dates, labels */
  --color-text-inverted:     #F0EEE8;   /* on dark backgrounds */
  --color-text-inverted-muted: #A8A49C; /* secondary text on dark bg */

  /* Accent */
  --color-accent:            #8B1A1A;   /* deep crimson — links, drop caps, emphasis */
  --color-accent-muted:      #A84040;   /* hover state */
  --color-accent-subtle:     #D4A0A0;   /* very light crimson tint — used rarely */

  /* Rules & Borders */
  --color-rule:              #D0CDC6;   /* thin horizontal rules */
  --color-rule-dark:         #3A3835;   /* rules on dark backgrounds */

  /* ─── Semantic aliases ──────────────────────────────────────────────────── */
  --bg:                      var(--color-bg);
  --fg:                      var(--color-text);
  --fg2:                     var(--color-text-secondary);
  --fg3:                     var(--color-text-tertiary);
  --accent:                  var(--color-accent);
  --rule:                    var(--color-rule);
}

/* ─── Typography Scale ──────────────────────────────────────────────────────── */
:root {
  /* Font families */
  --font-display:   'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:      'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-aux:       'Spectral', 'Georgia', serif; /* captions, bylines — tracked uppercase */

  /* Font sizes — slide scale (1rem = 16px base, scaled up for projection) */
  --text-xs:        0.75rem;    /* 12px — folios only */
  --text-sm:        0.875rem;   /* 14px — captions */
  --text-base:      1rem;       /* 16px — aux / metadata */
  --text-md:        1.125rem;   /* 18px — body (web) */
  --text-lg:        1.375rem;   /* 22px — large body / intro */
  --text-xl:        1.75rem;    /* 28px — subheads */
  --text-2xl:       2.25rem;    /* 36px — slide body */
  --text-3xl:       3rem;       /* 48px — slide title */
  --text-4xl:       4rem;       /* 64px — section opener */
  --text-5xl:       5.5rem;     /* 88px — display / masthead */
  --text-6xl:       7.5rem;     /* 120px — hero display */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose:  2.0;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.20em;  /* masthead / byline all-caps */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;
}

/* ─── Spacing Tokens ────────────────────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;
  --space-12:  256px;
}

/* ─── Semantic Typography Roles ─────────────────────────────────────────────── */

/* Masthead wordmark */
.t-masthead {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Article / slide title */
.t-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Section opener — large single line */
.t-section {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Pull quote — italic, centered, between rules */
.t-pullquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  font-style: italic;
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-align: center;
}

/* Body text — slides (heavier than web) */
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Body text — web / print scale */
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Byline — tracked uppercase */
.t-byline {
  font-family: var(--font-aux);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* Caption */
.t-caption {
  font-family: var(--font-aux);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Folio / page number */
.t-folio {
  font-family: var(--font-aux);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Greek / italic emphasis */
.t-greek,
em.greek {
  font-style: italic;
  font-family: var(--font-body);
}

/* Accent / crimson emphasis */
.t-accent {
  color: var(--color-accent);
}

/* Drop cap */
.t-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.5em;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  float: left;
  line-height: 0.8;
  margin-right: 0.08em;
  margin-top: 0.06em;
}

/* ─── Structural Rules ──────────────────────────────────────────────────────── */

.rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

.rule--dark {
  border-top-color: var(--color-rule-dark);
}

/* Pull quote wrapper — text between two rules */
.pullquote-block {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* ─── Links ─────────────────────────────────────────────────────────────────── */

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

a:hover {
  color: var(--color-accent-muted);
}

/* ─── Base reset for design system context ──────────────────────────────────── */

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}