breadcrumb-the-shire/web/css/base/typography.tokens.css

@charset "UTF-8";

/*
 * Typography tokens — single source of truth for the type system.
 *
 * ┌─────────┬──────────┬────────────────────────────────────────────┐
 * │ Token   │ Size     │ Notes                                      │
 * ├─────────┼──────────┼────────────────────────────────────────────┤
 * │ --text-2xs │ 11px  │ base ÷ 1.25²·⁵ (rounded)                  │
 * │ --text-xs  │ 12px  │ base ÷ 1.25²                              │
 * │ --text-sm  │ 13px  │ base ÷ 1.25                               │
 * │ --text-base│ 14px  │ ← anchor (enterprise admin density)       │
 * │ --text-md  │ 15px  │ escape hatch between base and lg           │
 * │ --text-lg  │ 16px  │ base × 1.25 (rounded to whole px)         │
 * │ --text-xl  │ 18px  │ base × 1.25²                              │
 * │ --text-2xl │ 18–22px│ fluid via clamp()                        │
 * │ --text-3xl │ 22–28px│ fluid via clamp()                        │
 * │ --text-4xl │ 26–34px│ fluid via clamp()                        │
 * │ --text-5xl │ 32–44px│ fluid via clamp()                        │
 * └─────────┴──────────┴────────────────────────────────────────────┘
 *
 * Scale ratio: ~1.25× (major third) from a 14px base.
 * Fluid tokens (2xl+) use clamp(min, preferred, max) with a vw component.
 *
 * Semantic aliases:
 *   Use semantic aliases for role-based sizing (e.g. "this is a label").
 *   Use primitives when the size is context-independent (e.g. "make it 12px").
 */

@layer tokens {
:host,
:root {
  /* ── Size scale (primitives) ──────────────────────────────────── */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px — enterprise admin baseline */
  --text-md: 0.9375rem;   /* 15px — escape hatch */
  --text-lg: 1rem;         /* 16px */
  --text-xl: 1.125rem;    /* 18px */
  --text-2xl: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* 18–22px */
  --text-3xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);  /* 22–28px */
  --text-4xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);    /* 26–34px */
  --text-5xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);       /* 32–44px */

  /* ── Semantic aliases ─────────────────────────────────────────── */
  --text-caption: var(--text-xs);       /* small annotations, hints */
  --text-label: var(--text-sm);         /* form labels, nav items */
  --text-body: var(--text-base);        /* default body text */
  --text-title: var(--text-xl);         /* section headings (h2) */
  --text-page-title: var(--text-3xl);   /* page headings (h1) */

  /* ── Line-height tokens ─────────────────────────────────────── */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* ── Font-weight tokens ─────────────────────────────────────── */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ── Letter-spacing tokens ──────────────────────────────────── */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
}

/* ── Reduced-motion fallback ──────────────────────────────────── */
/* Lock fluid heading sizes to fixed midpoints for users who      */
/* prefer reduced motion — viewport-responsive text can feel      */
/* jarring when resizing.                                         */
@media (prefers-reduced-motion: reduce) {
  :host,
  :root {
    --text-2xl: 1.25rem;     /* midpoint of 1.125–1.375rem */
    --text-3xl: 1.5625rem;   /* midpoint of 1.375–1.75rem */
    --text-4xl: 1.875rem;    /* midpoint of 1.625–2.125rem */
    --text-5xl: 2.375rem;    /* midpoint of 2–2.75rem */
  }
}
}