/*
 * Base styles and the type scale of the showcase.
 * The scale is the set of text styles the product uses; every size, line height, weight, tracking
 * and family is a token (tokens.css › Text styles). The product has no type scale of its own yet, so
 * every class here is proposed (design/typography.html). Display styles take --font-display, the
 * rest inherit --font-sans from the body.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* ── Type scale ── */

/* Display: the home page's line, a certificate's heading — display face, 52 / 56, medium */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

/* On a phone the display style steps down to the page title's size, so a line keeps a few words */
@media (max-width: 640px) {
  .t-display {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }
}

/* Page title: the one title of a screen, an item's name on its page — display face, 34 / 40 */
.t-page-title {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: var(--leading-page-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-page-title);
}

/* Section title: a part of a screen, an item's name on a card — display face, 24 / 28 */
.t-section-title {
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  line-height: var(--leading-section-title);
  font-weight: var(--weight-title);
}

/* Card title: the head of a card, a panel, a dialog — sans, 16 / 24, semibold */
.t-card-title {
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: var(--weight-semibold);
}

/* Body: running text, fields, table cells — sans, 14 / 20 */
.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}

/* Body strong: a value beside its label, a row's main text — sans, 14 / 20, medium */
.t-body-strong {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-medium);
}

/* Label: an overline, a column head, a card's maker · year · condition — 11 / 16, uppercase, tracked */
.t-label {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Caption (small): a hint under a field, "approximate", a date — 12 / 16, muted */
.t-caption {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}

/* Figure: a price on a listing, a total, a stat — sans, 28 / 36, tabular figures (never the display face) */
.t-figure {
  font-size: var(--text-figure);
  line-height: var(--leading-figure);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Small figure: a price on a card, an amount in a fee breakdown or a table head — 18 / 24, tabular */
.t-figure-sm {
  font-size: var(--text-figure-sm);
  line-height: var(--leading-figure-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Type pairing B, for comparison only: inside [data-type-pairing='b'] every style takes the
   alternative families (tokens.css › --font-display-alt, --font-sans-alt); design/typography.html
   shows A and B side by side. Remove with pairing B once one is picked. ── */
[data-type-pairing='b'] {
  --font-display: var(--font-display-alt);
  --font-sans: var(--font-sans-alt);
  font-family: var(--font-sans);
}

/* Pairing A spelled out, so a sample stays in A wherever it is put */
[data-type-pairing='a'] {
  font-family: var(--font-sans);
}

/* ── Reduced motion: transitions and animations end at once on their last frame; every animation
   in the product has a still end state (design/motion.html › Reduced motion) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}