@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.

   REVISED 2026-08-24. The ladder above described weight falling with size, but
   the code ran 500/500/600/600/500/500 — a hump, where the LARGEST headings
   were the LIGHTEST and h3 outweighed h1. Two rules were in play and neither
   won cleanly. It is now monotonic: 600 for headings of consequence (h1-h4),
   500 for small labels (h5/h6), 400 body. The display end still separates
   itself by SIZE and tracking, which is what the paragraph above asks of it;
   what it no longer does is separate itself by being *lighter* than the
   smaller headings beneath it. 600 remains the ceiling. */

/* 600. This reverses the earlier "500, not 700" setting — not back toward 700,
   which stays banned, but up to the ceiling the ladder already used for h3/h4.
   The 500 was only ever visible in production: the dev-only TypeDevPanel has
   shipped a `wd: 600` default that overrode this with !important, so every
   local preview of this site has been 600 while rebase.pro rendered 500. The
   panel's constant is now telling the truth. */
.typography-h1 {
    @apply text-4xl font-headers font-semibold tracking-display;
}

.typography-h2 {
    @apply text-3xl font-headers font-semibold 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 {
    /* 500, sentence case, no tracking. Semibold + tracking-wide was the Rubik-era
       button voice and it made every control shout equally; the reference sets
       controls at 500 and lets the primary FILL carry emphasis, not the label. */
    @apply text-sm font-medium;
}

/* ---------------------------------------------------------------------------
 * 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;
}

/* The focus ring is drawn INSIDE the focused element, not around it.

   An outset ring is a box-shadow painted beyond the border box, so any ancestor
   that clips cuts it — a scroller, a truncating cell, a max-height collapse.
   That is not a corner case: the drawer's navigation groups clip for their
   collapse animation, and every row in them rendered a ring with three of its
   four sides missing. Tabbing through the panel produced stray blue slivers
   rather than an indicator. An inset ring is painted within the element's own
   box, which is inside any clip rect the element is itself inside, so nothing
   can cut it. Same 2px, same colour, same radius — 2px in rather than 2px out.

   Written as an override of `--tw-ring-shadow` rather than as `inset-ring-2`
   because that keeps one vocabulary for turning the ring off. Eleven call sites
   already say `ring-0` / `focusedDisabled` to suppress it, and `inset-ring-*`
   is a different variable that none of them would have silenced — every popover
   and bare table input that had opted out would have got a ring back.
   Not `outline` either: 65 call sites carry `outline-none` from the utilities
   layer, which outranks anything a base-layer rule sets, and those controls
   would have been left with no focus indicator at all.

   A component that wants the ring OUTSIDE (Checkbox, Slider, Avatar — small
   controls with room around them, where an inset ring would sit on the mark
   itself) still says `focus-visible:ring-2` for itself; a utility outranks
   this.

   The pseudo-class is doubled on purpose — it is not a typo to tidy up. The
   admin imports this sheet into `layer(base)`, where a utility wins whatever
   the specificity, but the docs site imports it unlayered, and there the rule
   competes with `.something:focus` on specificity alone. (0,2,0) is what the
   rule had before this was written, and dropping to (0,1,0) would quietly hand
   those ties to the other rule. */
:focus-visible:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-0 ring-offset-transparent;
    --tw-ring-shadow: inset 0 0 0 2px var(--tw-ring-color, currentcolor);
}