/**
 * tokens.css — Design system CSS custom properties (generated from design-tokens.js)
 *
 * This file provides the token-derived utility classes and typography baseline.
 * The actual :root variables are injected at runtime by tokensToCssVars().
 * This file adds semantic aliases and utility classes that reference --jb-* vars.
 */

/* ── Typography baseline ─────────────────────────────────────────── */

.jb-text-display {
  font-family: var(--jb-font-display);
  font-weight: var(--jb-fontWeight-bold);
  line-height: var(--jb-lineHeight-tight);
}

.jb-text-body {
  font-family: var(--jb-font-body);
  font-weight: var(--jb-fontWeight-normal);
  line-height: var(--jb-lineHeight-body);
}

.jb-text-mono {
  font-family: var(--jb-font-mono);
  font-weight: var(--jb-fontWeight-normal);
  line-height: var(--jb-lineHeight-compact);
}

/* ── Semantic type roles ──────────────────────────────────────────── */

.jb-type-hero {
  font-family: var(--jb-font-display);
  font-size: 2.2rem;
  font-weight: var(--jb-fontWeight-bold);
  line-height: var(--jb-lineHeight-tight);
  letter-spacing: -0.03em;
}

.jb-type-display {
  font-family: var(--jb-font-display);
  font-size: 1.8rem;
  font-weight: var(--jb-fontWeight-bold);
  line-height: var(--jb-lineHeight-tight);
  letter-spacing: -0.02em;
}

.jb-type-title {
  font-family: var(--jb-font-display);
  font-size: 1.15rem;
  font-weight: var(--jb-fontWeight-semibold);
  line-height: var(--jb-lineHeight-compact);
  letter-spacing: -0.01em;
}

.jb-type-body {
  font-family: var(--jb-font-body);
  font-size: 0.95rem;
  font-weight: var(--jb-fontWeight-normal);
  line-height: var(--jb-lineHeight-body);
}

.jb-type-small {
  font-family: var(--jb-font-body);
  font-size: 0.82rem;
  font-weight: var(--jb-fontWeight-normal);
  line-height: var(--jb-lineHeight-body);
}

.jb-type-micro {
  font-family: var(--jb-font-body);
  font-size: 0.72rem;
  font-weight: var(--jb-fontWeight-medium);
  line-height: var(--jb-lineHeight-compact);
}

.jb-type-data {
  font-family: var(--jb-font-mono);
  font-size: 0.82rem;
  font-weight: var(--jb-fontWeight-normal);
  line-height: var(--jb-lineHeight-compact);
  font-variant-numeric: tabular-nums;
}

/* ── Brand serif (editorial headlines / claims) ───────────────────── */

.jb-text-serif {
  font-family: var(--jb-font-serif);
  font-weight: var(--jb-fontWeight-semibold);
  line-height: var(--jb-lineHeight-tight);
}

.jb-type-claim {
  font-family: var(--jb-font-serif);
  font-size: 1.5rem;
  font-weight: var(--jb-fontWeight-semibold);
  line-height: var(--jb-lineHeight-tight);
  letter-spacing: -0.02em;
}

/* ── Desktop responsive type scale ────────────────────────────────── */

@media (min-width: 768px) {
  .jb-type-hero    { font-size: 3.4rem; }
  .jb-type-display { font-size: 2.6rem; }
  .jb-type-title   { font-size: 1.35rem; }
  .jb-type-body    { font-size: 1rem; }
  .jb-type-small   { font-size: 0.86rem; }
  .jb-type-micro   { font-size: 0.76rem; }
  .jb-type-claim   { font-size: 2rem; }
}

/* ── Size classes ─────────────────────────────────────────────────── */

.jb-text-xs   { font-size: var(--jb-fontSize-xs); }
.jb-text-sm   { font-size: var(--jb-fontSize-sm); }
.jb-text-base { font-size: var(--jb-fontSize-base); }
.jb-text-lg   { font-size: var(--jb-fontSize-lg); }
.jb-text-xl   { font-size: var(--jb-fontSize-xl); }
.jb-text-2xl  { font-size: var(--jb-fontSize-xxl); }
.jb-text-3xl  { font-size: var(--jb-fontSize-xxxl); }

/* ── Weight classes ───────────────────────────────────────────────── */

.jb-font-normal   { font-weight: var(--jb-fontWeight-normal); }
.jb-font-medium   { font-weight: var(--jb-fontWeight-medium); }
.jb-font-semibold { font-weight: var(--jb-fontWeight-semibold); }
.jb-font-bold     { font-weight: var(--jb-fontWeight-bold); }

/* ── Surface classes ──────────────────────────────────────────────── */

.jb-surface-0 { background-color: var(--jb-surface-s0); }
.jb-surface-1 { background-color: var(--jb-surface-s1); }
.jb-surface-2 { background-color: var(--jb-surface-s2); }
.jb-surface-3 { background-color: var(--jb-surface-s3); }
.jb-surface-4 { background-color: var(--jb-surface-s4); }

/* ── Color utility classes ────────────────────────────────────────── */

.jb-color-primary { color: var(--jb-color-primary); }
.jb-color-success { color: var(--jb-color-success); }
.jb-color-warning { color: var(--jb-color-warning); }
.jb-color-error   { color: var(--jb-color-error); }
.jb-color-info    { color: var(--jb-color-info); }
.jb-color-muted   { color: var(--jb-color-stone500); }

/* ── Spacing utility classes ──────────────────────────────────────── */

.jb-p-xs  { padding: var(--jb-space-xs); }
.jb-p-sm  { padding: var(--jb-space-sm); }
.jb-p-md  { padding: var(--jb-space-md); }
.jb-p-lg  { padding: var(--jb-space-lg); }
.jb-p-xl  { padding: var(--jb-space-xl); }

.jb-gap-xs  { gap: var(--jb-space-xs); }
.jb-gap-sm  { gap: var(--jb-space-sm); }
.jb-gap-md  { gap: var(--jb-space-md); }
.jb-gap-lg  { gap: var(--jb-space-lg); }
.jb-gap-xl  { gap: var(--jb-space-xl); }

/* ── Border radius utility ────────────────────────────────────────── */

.jb-rounded-sm   { border-radius: var(--jb-radius-sm); }
.jb-rounded-md   { border-radius: var(--jb-radius-md); }
.jb-rounded-lg   { border-radius: var(--jb-radius-lg); }
.jb-rounded-card { border-radius: var(--jb-radius-card); }
.jb-rounded-full { border-radius: var(--jb-radius-full); }

/* ── Shadow utility ───────────────────────────────────────────────── */

.jb-shadow-sm { box-shadow: var(--jb-shadow-sm); }
.jb-shadow-md { box-shadow: var(--jb-shadow-md); }
.jb-shadow-lg { box-shadow: var(--jb-shadow-lg); }

/* ── Transition utility ───────────────────────────────────────────── */

.jb-transition-fast   { transition: all var(--jb-transition-fast); }
.jb-transition-normal { transition: all var(--jb-transition-normal); }
.jb-transition-slow   { transition: all var(--jb-transition-slow); }

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .jb-transition-fast,
  .jb-transition-normal,
  .jb-transition-slow {
    transition: none !important;
  }
}