/* type-themes.css — Four typography variations on Direction A.
   Each .dirA--<theme> overrides specific tokens locally so we don't
   pollute the global design system. */

/* Theme 01 — Bricolage refined (current, cleaner) */
.dirA--bricolage {
  /* mostly defaults, just a tighter mono pairing */
}
.dirA--bricolage .kicker { font-family: 'IBM Plex Mono', monospace; }

/* Theme 02 — Newspaper (serif headlines + sans body) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Inter:wght@300;400;500;600;700&family=Azeret+Mono:wght@400;500&display=swap');

.dirA--newspaper {
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:    'Azeret Mono', monospace;
  font-family: var(--font-body);
}
.dirA--newspaper .brand-wordmark,
.dirA--newspaper .dirA-clientname,
.dirA--newspaper h1, .dirA--newspaper h2, .dirA--newspaper h3, .dirA--newspaper h4, .dirA--newspaper h5,
.dirA--newspaper .eyebrow,
.dirA--newspaper .pill,
.dirA--newspaper .btn,
.dirA--newspaper .dirA-filter,
.dirA--newspaper .dirA-clientrow-name,
.dirA--newspaper .dirA-stat-val,
.dirA--newspaper .quick-add,
.dirA--newspaper .field label {
  font-family: var(--font-display);
}
.dirA--newspaper .dirA-clientname {
  font-weight: 400; letter-spacing: -0.025em; font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 50;
}
.dirA--newspaper .brand-wordmark {
  font-style: italic; font-weight: 700; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 96, 'wght' 700, 'SOFT' 30;
}
.dirA--newspaper .kicker { font-family: var(--font-mono); }
.dirA--newspaper .dirA-stat-val { font-weight: 600; font-style: italic; }
.dirA--newspaper .dirA-deliverable-title {
  font-family: var(--font-body); font-weight: 400; font-size: 17px;
  font-variation-settings: 'wght' 400;
}
.dirA--newspaper .pill, .dirA--newspaper .dirA-filter, .dirA--newspaper .btn,
.dirA--newspaper .eyebrow, .dirA--newspaper .quick-add, .dirA--newspaper .field label {
  font-family: var(--font-display); font-style: normal; letter-spacing: 0.14em;
}

/* Theme 03 — Workhorse (single grotesque, minimal accents) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

.dirA--workhorse {
  --font-display: 'Inter', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  font-family: var(--font-body);
}
.dirA--workhorse .brand-wordmark,
.dirA--workhorse .dirA-clientname,
.dirA--workhorse h1, .dirA--workhorse h2, .dirA--workhorse h3, .dirA--workhorse h4, .dirA--workhorse h5,
.dirA--workhorse .dirA-stat-val,
.dirA--workhorse .dirA-clientrow-name,
.dirA--workhorse .pill, .dirA--workhorse .btn, .dirA--workhorse .dirA-filter,
.dirA--workhorse .eyebrow, .dirA--workhorse .quick-add, .dirA--workhorse .field label,
.dirA--workhorse .dirA-deliverable-title {
  font-family: var(--font-display);
}
.dirA--workhorse .dirA-clientname {
  font-weight: 800; letter-spacing: -0.045em;
  font-feature-settings: 'ss01';
}
.dirA--workhorse .brand-wordmark { font-weight: 800; letter-spacing: -0.03em; }
.dirA--workhorse .kicker { font-family: var(--font-mono); }
.dirA--workhorse .pill, .dirA--workhorse .dirA-filter, .dirA--workhorse .btn,
.dirA--workhorse .eyebrow, .dirA--workhorse .field label, .dirA--workhorse .quick-add {
  letter-spacing: 0.1em;
}
.dirA--workhorse .dirA-deliverable-title {
  font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
}
.dirA--workhorse .dirA-stat-val { font-weight: 700; letter-spacing: -0.03em; }

/* Theme 04 — Mono-led ("studio software" feel) */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;700&display=swap');

.dirA--mono {
  --font-display: 'Azeret Mono', 'IBM Plex Mono', monospace;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:    'Azeret Mono', monospace;
  font-family: var(--font-body);
}
.dirA--mono .brand-wordmark,
.dirA--mono .dirA-clientname,
.dirA--mono h1, .dirA--mono h2, .dirA--mono h3, .dirA--mono h4, .dirA--mono h5,
.dirA--mono .dirA-stat-val,
.dirA--mono .dirA-clientrow-name,
.dirA--mono .pill, .dirA--mono .btn, .dirA--mono .dirA-filter,
.dirA--mono .eyebrow, .dirA--mono .quick-add, .dirA--mono .field label {
  font-family: var(--font-display);
}
.dirA--mono .dirA-clientname {
  font-weight: 700; letter-spacing: -0.05em; font-size: 80px;
}
.dirA--mono .brand-wordmark { font-weight: 700; letter-spacing: -0.03em; font-size: 22px; }
.dirA--mono .dirA-stat-val { font-weight: 700; letter-spacing: -0.03em; }
.dirA--mono .kicker { font-family: var(--font-mono); }
.dirA--mono .pill, .dirA--mono .dirA-filter, .dirA--mono .btn,
.dirA--mono .eyebrow, .dirA--mono .field label, .dirA--mono .quick-add {
  letter-spacing: 0.06em;
}
.dirA--mono .dirA-deliverable-title {
  font-family: var(--font-body); font-weight: 400; font-size: 16px;
  letter-spacing: -0.005em;
}
.dirA--mono .dirA-clientrow-name { font-weight: 600; }