@import "./theme.css";

/* Grayscale antialiasing, not macOS's subpixel default.
   This is the single largest reason the same typeface can look like a
   different one between two pages: subpixel-antialiased text renders visibly
   heavier and slightly fuzzier, and the effect is worst for light text on dark
   backgrounds — which is most of this product and all of the marketing site.
   Design comps that set this and shipped pages that do not will never match,
   no matter how carefully the font, size, weight and tracking are aligned. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Native UI (scrollbars, form controls) must follow the active theme,
   otherwise Chrome renders light scrollbars in dark mode */
html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Optical ladder: weight comes down as size comes down, tracking tightens as
   size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
   and holding 600 all the way down to text-sm made every heading shout equally
   — a heading stops being a headline somewhere, and the scale should say where.

   The ladder spans three weights — 400/500/600 — and 600 is the ceiling. No
   tier goes to 700: the display end separates itself by SIZE and tracking, not
   by weight, and a 30px 700 next to a 30px 500 elsewhere on the same product
   reads as two different type systems rather than one ladder.

   Both faces load as VARIABLE fonts (@fontsource-variable/inter,
   @fontsource-variable/instrument-sans), so the whole axis ships either way —
   the 600 ceiling is a design decision, not a payload one.

   With a single face carrying both headings and body, weight and tracking are
   the only things separating a heading from the copy around it — so the tiers
   have to actually differ, rather than all sitting at 600. */

/* 500, not 700. This reverses the 2026-08 "700 for display" decision on
   purpose: the marketing site and the panel were running different display
   weights, which is the single most visible incoherence between them. */
.typography-h1 {
    @apply text-4xl font-headers font-medium tracking-display;
}

.typography-h2 {
    @apply text-3xl font-headers font-medium tracking-display;
}

.typography-h3 {
    @apply text-2xl font-headers font-semibold tracking-title;
}

/* Semibold, not medium: h4 is the section heading inside a page, and at 20px
   medium sits close enough to body copy that a long page reads as one
   undifferentiated column. */
.typography-h4 {
    @apply text-xl font-headers font-semibold tracking-title;
}

.typography-h5 {
    @apply text-lg font-headers font-medium tracking-heading;
}

.typography-h6 {
    @apply text-base font-headers font-medium tracking-heading;
}

.typography-subtitle1 {
    @apply text-sm font-headers font-medium tracking-heading;
}

.typography-subtitle2 {
    @apply text-sm font-headers font-medium;
}

.typography-body1 {
    @apply text-sm;
}

.typography-body2 {
    @apply text-xs;
}

.typography-caption {
    @apply text-[11px] leading-[1.4];
}

.typography-label {
    @apply text-xs font-medium tracking-wide;
}

.typography-inherit {
    @apply text-inherit;
}

.typography-button {
    @apply text-sm font-semibold tracking-wide;
}

/* ---------------------------------------------------------------------------
 * Three tiers the product kept improvising because the system had no name for
 * them. Each existed as hand-written utilities in several places before it
 * existed here, which is the definition of a missing token.
 * ------------------------------------------------------------------------- */

/* The sentence under a page title. `body2` (12px) was standing in for it, which
   made the one line explaining what a page is FOR smaller than the page's own
   table rows. A lead is read once, deliberately, and it gets room to be read. */
.typography-lead {
    @apply text-base leading-relaxed;
}

/* The micro-label above a value: SCANNED, KEPT, TOOK, WHEN. Uppercase and
   tracked so it reads as a field name rather than as copy, and small enough
   that it never competes with the value it names.

   This is the one product tier below `text-xs`. It earns the exception by never
   carrying a sentence — it is always one or two words naming the thing directly
   underneath it, and at 11px uppercase with this tracking it stays legible
   where 11px prose would not. */
.typography-micro {
    @apply text-2xs font-medium uppercase tracking-[0.08em];
}

/* A measured value: a count, a duration, a timestamp, an id, a size.
   `tabular-nums` is the point — proportional digits make a column of numbers
   ragged and a live-updating counter jitter as its glyphs change width. */
.typography-mono {
    @apply font-mono tabular-nums;
}

/* The headline number on a stat tile. Display tracking and tabular figures so a
   row of tiles shares a baseline grid. Semibold, not bold: the number is
   already the largest thing on the tile, and 600 is the system ceiling. */
.typography-stat {
    @apply text-3xl font-headers font-semibold tracking-display tabular-nums;
}

:focus-visible {
    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
}