/*
 * Teako Design Tokens — CSS custom properties
 *
 * Generated from tokens.json. Do not edit by hand.
 * Regenerate when tokens.json changes.
 *
 * Status: DRAFT (v0.1.0)
 * Pending: final accent colour, final display typeface.
 */

:root {
  /* ---------- Colour ---------- */

  --teako-color-ink: #0A0A0A;
  --teako-color-paper: #FAFAF7;
  --teako-color-accent: #C42800; /* TODO: replace with final Teako accent */
  --teako-color-rule: #1A1A1A;

  --teako-color-gray-50: #F2F2EF;
  --teako-color-gray-500: #737373;
  --teako-color-gray-900: #1F1F1F;

  --teako-color-success: #1F7A3C;
  --teako-color-warning: #B8860B;
  --teako-color-danger: #9B1B1B;

  /* ---------- Typography ---------- */

  --teako-font-display: 'Geologica', 'Geologica Fallback', system-ui, sans-serif;
  --teako-font-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, sans-serif;
  --teako-font-mono: 'Space Mono', 'Space Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --teako-weight-regular: 400;
  --teako-weight-medium: 500;
  --teako-weight-semibold: 600;

  --teako-lh-tight: 1.1;
  --teako-lh-body: 1.5;

  --teako-text-caption-size: 12px;
  --teako-text-caption-tracking: 0.02em;

  --teako-text-body-size: 16px;
  --teako-text-body-tracking: 0;

  --teako-text-lead-size: 20px;
  --teako-text-lead-tracking: -0.01em;

  --teako-text-h3-size: 28px;
  --teako-text-h3-tracking: -0.02em;

  --teako-text-h2-size: 40px;
  --teako-text-h2-tracking: -0.02em;

  --teako-text-h1-size: 56px;
  --teako-text-h1-tracking: -0.03em;

  --teako-text-display-size: 88px;
  --teako-text-display-tracking: -0.04em;

  /* ---------- Spacing (4px base) ---------- */

  --teako-space-xs: 4px;
  --teako-space-sm: 8px;
  --teako-space-md: 16px;
  --teako-space-lg: 24px;
  --teako-space-xl: 48px;
  --teako-space-2xl: 96px;

  /* ---------- Radii ---------- */

  --teako-radius-none: 0px;
  --teako-radius-sm: 2px;
  --teako-radius-md: 4px;
  --teako-radius-full: 999px;

  /* ---------- Layout ---------- */

  --teako-layout-max-width: 1280px;
  --teako-layout-gutter: 24px;
  --teako-layout-columns: 12;
}

/* ---------- Typography utility classes ---------- */
/* Optional shortcuts. Compose from the variables above when more control is needed. */

.t-caption {
  font-family: var(--teako-font-body);
  font-size: var(--teako-text-caption-size);
  line-height: var(--teako-lh-body);
  font-weight: var(--teako-weight-regular);
  letter-spacing: var(--teako-text-caption-tracking);
}

.t-body {
  font-family: var(--teako-font-body);
  font-size: var(--teako-text-body-size);
  line-height: var(--teako-lh-body);
  font-weight: var(--teako-weight-regular);
}

.t-lead {
  font-family: var(--teako-font-body);
  font-size: var(--teako-text-lead-size);
  line-height: var(--teako-lh-body);
  font-weight: var(--teako-weight-regular);
  letter-spacing: var(--teako-text-lead-tracking);
}

.t-h3 {
  font-family: var(--teako-font-display);
  font-size: var(--teako-text-h3-size);
  line-height: var(--teako-lh-tight);
  font-weight: var(--teako-weight-medium);
  letter-spacing: var(--teako-text-h3-tracking);
}

.t-h2 {
  font-family: var(--teako-font-display);
  font-size: var(--teako-text-h2-size);
  line-height: var(--teako-lh-tight);
  font-weight: var(--teako-weight-medium);
  letter-spacing: var(--teako-text-h2-tracking);
}

.t-h1 {
  font-family: var(--teako-font-display);
  font-size: var(--teako-text-h1-size);
  line-height: var(--teako-lh-tight);
  font-weight: var(--teako-weight-semibold);
  letter-spacing: var(--teako-text-h1-tracking);
}

.t-display {
  font-family: var(--teako-font-display);
  font-size: var(--teako-text-display-size);
  line-height: var(--teako-lh-tight);
  font-weight: var(--teako-weight-semibold);
  letter-spacing: var(--teako-text-display-tracking);
}