/*
  TemplaBee Design System — design tokens as CSS custom properties.
  Source of truth: "TemplaBee Design System.md" (alpha).
  No compiled component bundle exists for this system yet — these tokens
  are the guideline layer: colors, type, spacing, radii, and a small set
  of illustrative chrome classes matching the documented components.
*/

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500&family=Fraunces:ital@1&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  /* Color — Brand & Accent */
  --color-primary: #F2CD00;
  --color-on-primary: #000000;

  /* Color — Surface */
  --color-canvas: #000000;
  --color-canvas-soft: #141414;
  --color-hairline: #2A2A2A;

  /* Color — Text */
  --color-ink: #F7F5F1;
  --color-body-strong: #DAD5CB;
  --color-body: #A8A29A;
  --color-mute: #726C63;

  /* Color — Semantic */
  --color-accent-coral: #FF6658;
  --color-accent-violet: #A382FF;
  --color-accent-mint: #96FABF;

  /* Font families */
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --type-display-xl-size: 64px;   --type-display-xl-weight: 400; --type-display-xl-line: 70.4px; --type-display-xl-tracking: -1.6px;
  --type-display-lg-size: 48px;   --type-display-lg-weight: 400; --type-display-lg-line: 52.8px; --type-display-lg-tracking: -1.2px;
  --type-display-md-size: 32px;   --type-display-md-weight: 500; --type-display-md-line: 40px;   --type-display-md-tracking: -0.8px;
  --type-display-sm-size: 24px;   --type-display-sm-weight: 500; --type-display-sm-line: 32px;   --type-display-sm-tracking: -0.4px;
  --type-display-serif-size: 48px; --type-display-serif-weight: 400; --type-display-serif-line: 52px; --type-display-serif-tracking: -0.5px;
  --type-body-lg-size: 18px;      --type-body-lg-weight: 400;    --type-body-lg-line: 28px;
  --type-body-md-size: 16px;      --type-body-md-weight: 400;    --type-body-md-line: 24px;
  --type-body-md-strong-size: 16px; --type-body-md-strong-weight: 500; --type-body-md-strong-line: 24px;
  --type-body-sm-size: 14px;      --type-body-sm-weight: 400;    --type-body-sm-line: 20px;
  --type-body-sm-strong-size: 14px; --type-body-sm-strong-weight: 500; --type-body-sm-strong-line: 20px;
  --type-caption-size: 12px;      --type-caption-weight: 400;    --type-caption-line: 16px;
  --type-code-size: 13px;         --type-code-weight: 400;       --type-code-line: 18px;
  --type-code-md-size: 14px;      --type-code-md-weight: 400;    --type-code-md-line: 20px;
  --type-button-md-size: 14px;    --type-button-md-weight: 500;  --type-button-md-line: 20px;

  /* Radius scale */
  --radius-none: 0px;
  --radius-xxs: 1px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Spacing scale (4px base) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
}

/* ── Base ─────────────────────────────────────────────────────────── */

body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

.font-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── Type utility classes ─────────────────────────────────────────── */

.text-display-xl { font: var(--type-display-xl-weight) var(--type-display-xl-size)/var(--type-display-xl-line) var(--font-sans); letter-spacing: var(--type-display-xl-tracking); }
.text-display-lg { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-line) var(--font-sans); letter-spacing: var(--type-display-lg-tracking); }
.text-display-md { font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-line) var(--font-sans); letter-spacing: var(--type-display-md-tracking); }
.text-display-sm { font: var(--type-display-sm-weight) var(--type-display-sm-size)/var(--type-display-sm-line) var(--font-sans); letter-spacing: var(--type-display-sm-tracking); }
.text-display-serif { font: var(--type-display-serif-weight) var(--type-display-serif-size)/var(--type-display-serif-line) var(--font-serif); letter-spacing: var(--type-display-serif-tracking); font-style: italic; }
.text-body-lg { font: var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-line) var(--font-sans); }
.text-body-md { font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-line) var(--font-sans); }
.text-body-md-strong { font: var(--type-body-md-strong-weight) var(--type-body-md-strong-size)/var(--type-body-md-strong-line) var(--font-sans); }
.text-body-sm { font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans); }
.text-body-sm-strong { font: var(--type-body-sm-strong-weight) var(--type-body-sm-strong-size)/var(--type-body-sm-strong-line) var(--font-sans); }
.text-caption { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-line) var(--font-sans); }
.text-code { font: var(--type-code-weight) var(--type-code-size)/var(--type-code-line) var(--font-mono); }
.text-code-md { font: var(--type-code-md-weight) var(--type-code-md-size)/var(--type-code-md-line) var(--font-mono); }
.text-button-md { font: var(--type-button-md-weight) var(--type-button-md-size)/var(--type-button-md-line) var(--font-sans); }

/* ── Illustrative component chrome (guideline reference, not compiled components) ── */

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  font: var(--type-button-md-weight) var(--type-button-md-size)/var(--type-button-md-line) var(--font-sans);
  cursor: pointer;
}

.btn-secondary-ghost {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  font: var(--type-button-md-weight) var(--type-button-md-size)/var(--type-button-md-line) var(--font-sans);
  cursor: pointer;
}

.btn-icon-circular {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-full);
  padding: var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-line) var(--font-sans);
}

.card-mockup {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font: var(--type-code-weight) var(--type-code-size)/var(--type-code-line) var(--font-mono);
}

.download-tile, .partner-logo-tile, .testimonial-card {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.text-input {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans);
}

.nav-bar {
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: var(--space-md) var(--space-xl);
}

.nav-link {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font: var(--type-body-sm-strong-weight) var(--type-body-sm-strong-size)/var(--type-body-sm-strong-line) var(--font-sans);
}

.footer {
  background: var(--color-canvas);
  color: var(--color-body);
  padding: var(--space-3xl) var(--space-xl);
  font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans);
}

.hero-band, .content-band {
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: var(--space-5xl) var(--space-xl);
}

.press-row, .job-row {
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  padding: var(--space-lg) 0;
}

.press-row { color: var(--color-body); font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-line) var(--font-sans); }
.job-row { color: var(--color-ink); font: var(--type-body-md-strong-weight) var(--type-body-md-strong-size)/var(--type-body-md-strong-line) var(--font-sans); }