/* ========================================================================
 * Atelier Observatory — Typography scale
 *
 * Font stacks (--at-serif, --at-sans, --at-mono) resolve through
 * styles/daylight-bridge.css → --dl-font-* (see daylight-tokens.css),
 * which use the same self-hosted Instrument Sans + Instrument Serif +
 * Fraunces + JetBrains faces imported in src/main.tsx.
 *
 * This file only defines Atelier type *scale* tokens and utility
 * classes. Do not re-declare font-family stacks on :root here — that
 * would override the bridge and split Atelier from the Boutique.
 *
 * Requirements: 15.2 (typography families and roles)
 * ======================================================================== */

:root {
  /* ------------------------------------------------------------------
   * Type scale — fixed sizes for the Atelier desktop-first layout
   * (min 1280px, no mobile breakpoints)
   * ---------------------------------------------------------------- */

  /* Display / hero titles */
  --at-display-size: 56px;
  --at-display-weight: 400;
  --at-display-leading: 1.05;
  --at-display-tracking: -0.02em;

  /* Page titles (e.g., SessionsList, Agents) */
  --at-title-size: 52px;
  --at-title-weight: 400;
  --at-title-leading: 1.08;
  --at-title-tracking: -0.02em;

  /* Section titles (e.g., card headings) */
  --at-section-size: 26px;
  --at-section-weight: 400;
  --at-section-leading: 1.2;
  --at-section-tracking: -0.015em;

  /* Agent / tool card names */
  --at-card-title-size: 24px;

  /* Body prose */
  --at-body-size: 15px;
  --at-body-weight: 400;
  --at-body-leading: 1.6;

  /* Brief prose (magazine layout) */
  --at-brief-size: 16.5px;
  --at-brief-leading: 1.65;

  /* Eyebrow labels */
  --at-eyebrow-size: 9.5px;
  --at-eyebrow-weight: 500;
  --at-eyebrow-tracking: 0.22em;

  /* Monospace code / metadata */
  --at-mono-size: 11.5px;
  --at-mono-leading: 1.7;

  /* Tab navigation */
  --at-tab-size: 16px;

  /* Tool function names */
  --at-tool-name-size: 17px;
}

/* -----------------------------------------------------------------------
 * Utility classes — optional convenience for Atelier components.
 * Components may also reference the custom properties directly.
 * ----------------------------------------------------------------------- */

.at-text-display {
  font-family: var(--at-serif);
  font-size: var(--at-display-size);
  font-weight: var(--at-display-weight);
  line-height: var(--at-display-leading);
  letter-spacing: var(--at-display-tracking);
  color: var(--at-ink-1);
}

.at-text-title {
  font-family: var(--at-serif);
  font-size: var(--at-title-size);
  font-weight: var(--at-title-weight);
  line-height: var(--at-title-leading);
  letter-spacing: var(--at-title-tracking);
  color: var(--at-ink-1);
}

.at-text-section {
  font-family: var(--at-serif);
  font-size: var(--at-section-size);
  font-weight: var(--at-section-weight);
  line-height: var(--at-section-leading);
  letter-spacing: var(--at-section-tracking);
  color: var(--at-ink-1);
}

.at-text-body {
  font-family: var(--at-sans);
  font-size: var(--at-body-size);
  font-weight: var(--at-body-weight);
  line-height: var(--at-body-leading);
  color: var(--at-ink-1);
}

.at-text-brief {
  font-family: var(--at-serif);
  font-size: var(--at-brief-size);
  line-height: var(--at-brief-leading);
  font-weight: 400;
  color: var(--at-ink-1);
}

.at-text-eyebrow {
  font-family: var(--at-mono);
  font-size: var(--at-eyebrow-size);
  font-weight: var(--at-eyebrow-weight);
  letter-spacing: var(--at-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--at-red-1);
}

.at-text-mono {
  font-family: var(--at-mono);
  font-size: var(--at-mono-size);
  line-height: var(--at-mono-leading);
  font-feature-settings: 'calt' 1, 'liga' 1;
  color: var(--at-ink-1);
}

.at-text-tab {
  font-family: var(--at-serif);
  font-style: italic;
  font-size: var(--at-tab-size);
  font-weight: 400;
  color: var(--at-ink-3);
  text-decoration: none;
  cursor: pointer;
}

.at-text-tab-active {
  color: var(--at-ink-1);
  border-bottom: 2px solid var(--at-red-1);
  padding-bottom: 6px;
}
