/* =============================================================================
   HF Hub — Base
   -----------------------------------------------------------------------------
   A minimal modern reset, the typography scale, and focus handling. Depends on
   tokens.css for every colour and dimension — this file declares no hex values.
============================================================================= */

/* ---------------------------------------------------------------------------
   RESET — minimal and modern
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-primary);
  /* Tabular figures everywhere so numbers always align in columns. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
canvas {
  display: block;
  max-width: 100%;
}

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

/* =============================================================================
   TYPOGRAPHY SCALE
   Exposed both as custom properties (font shorthand + tracking) and as utility
   classes. Two shapes, one source: the classes consume the properties.

   Presti ships ONLY weights 400 and 700 — no display style may request 500 or
   600. Weights 500/600 appear only on body-font styles (h3, label, micro).
============================================================================= */
:root {
  /* Display font, weight 700 */
  --type-display-1: 700 3.5rem/1.0 var(--font-display);
  --track-display-1: -0.02em;

  --type-display-2: 700 2.5rem/1.05 var(--font-display);
  --track-display-2: -0.015em;

  /* Display font, weight 700 — the page-title level (bumped from 400 so titles read heavier; Presti
     offers no weight between 400 and 700). Tracking is size-driven (see display-1/-2), so it is unchanged. */
  --type-display-3: 700 2rem/1.15 var(--font-display);
  --track-display-3: -0.01em;

  /* Display font, weight 400 */
  --type-h1: 400 1.75rem/1.2 var(--font-display);
  --type-h2: 400 1.375rem/1.3 var(--font-display);

  /* Body font */
  --type-h3:      600 1.125rem/1.4 var(--font-body);
  --type-body-lg: 400 1.0625rem/1.6 var(--font-body);
  --type-body:    400 0.9375rem/1.55 var(--font-body);
  --type-body-sm: 400 0.84375rem/1.5 var(--font-body);

  --type-label: 500 0.6875rem/1.2 var(--font-body);
  --track-label: 0.14em;

  --type-micro: 500 0.625rem/1.2 var(--font-body);
  --track-micro: 0.18em;
}

.display-1 { font: var(--type-display-1); letter-spacing: var(--track-display-1); }
.display-2 { font: var(--type-display-2); letter-spacing: var(--track-display-2); }
.display-3 { font: var(--type-display-3); letter-spacing: var(--track-display-3); }
.h1        { font: var(--type-h1); }
.h2        { font: var(--type-h2); }
.h3        { font: var(--type-h3); }
.body-lg   { font: var(--type-body-lg); }
.body      { font: var(--type-body); }
.body-sm   { font: var(--type-body-sm); }

/* label and micro are uppercased BY THE CLASS — authors never type capitals. */
.label {
  font: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.micro {
  font: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* =============================================================================
   LINKS
   Prose links take the accent TEXT colour (caramel darkened for AA in light,
   taupe in dark) and are UNDERLINED — a link is never distinguished by colour
   alone (WCAG 1.4.1). The underline is offset clear of descenders; hover changes
   the underline, not the colour, because the colour already carries meaning.
   Visited is deliberately not differentiated — two-toned navigation in an internal
   tool reads as a mess. The global :focus-visible ring below is NOT overridden.
   .link-plain drops the underline for STRUCTURED contexts where position already
   marks the link (breadcrumbs, nav) — never for body prose.
============================================================================= */
a {
  color: var(--text-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;   /* clears descenders */
  transition: text-decoration-thickness var(--motion-micro) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }
.link-plain { text-decoration-line: none; }
.link-plain:hover { text-decoration-line: underline; }

/* ---------------------------------------------------------------------------
   PROSE MEASURE — cap running text at a comfortable line length.
--------------------------------------------------------------------------- */
.prose {
  max-width: 68ch;
}

/* =============================================================================
   FOCUS
   A 2px solid ring in --focus-ring with a 1px offset, on keyboard focus only.
   THIS IS NEVER TO BE REMOVED. Do not add `outline: none` anywhere in this
   project without an equivalent visible replacement.
============================================================================= */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* =============================================================================
   THE DIMENSION RULE — a signature horizontal divider.
   A full-width 1px line in --border-default that terminates at each end in a
   short perpendicular tick 8px tall in the same colour. Built entirely from
   pseudo-elements, so it needs no markup beyond a single empty <div class="rule">.
   Sits on the spacing scale: 24px clearance above and below.
============================================================================= */
.rule {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-5) 0;
}
.rule::before,
.rule::after {
  content: "";
  position: absolute;
  top: -3.5px;          /* centre the 8px tick on the 1px line */
  width: 1px;
  height: 8px;
  background: var(--border-default);
}
.rule::before { left: 0; }
.rule::after  { right: 0; }

/* =============================================================================
   REDUCED MOTION — honour the OS preference globally.
============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   SCROLLBARS
   A browser-level treatment (not a component), so it lives here and applies
   globally — every scrolling region inherits it: the page, the sidebar nav when it
   overflows, the filter-bar multi-select panel, drill-down regions and horizontally
   scrolling tables. Minimal by intent — ~8px, fully rounded, transparent track, a
   low-opacity neutral thumb that gains contrast on hover — but never so faint it
   cannot be found: the accessibility floor is that you locate it without hunting,
   and hover increases the contrast rather than being the only way to see it.

   Colours come from the SEMANTIC TOKENS so they resolve per theme AND per subtree —
   thumb = --text-tertiary, darkening to --text-secondary on hover (in dark themes
   "darken" means moving toward the light text, i.e. MORE contrast either way). This
   matters for the SIDEBAR, which is scoped data-theme="dark" and sits on aubergine
   in BOTH page themes: a fixed light-theme value would vanish there, but the token
   resolves to its dark value within that subtree, so the thumb stays visible.

   TWO ENGINES, NOT EQUIVALENT:
   • WebKit / Chromium support the ::-webkit-scrollbar pseudo-elements and take the
     FULL treatment (fixed 8px, transparent track, rounded thumb, hover contrast, no
     buttons, no corner). Custom properties inherit into these pseudo-elements from
     the scroll container, so the sidebar's dark scope is honoured automatically.
   • Firefox supports ONLY scrollbar-width + scrollbar-color and gets the closest
     approximation — a thin bar in the thumb/track colours, with NO fixed 8px width
     and NO hover state (there is no pseudo-element to hover). The pseudo-element
     rules DO NOT run in Firefox: do not assume they are doing the work there. The
     @supports guard keeps the standard properties OFF Chromium, because Chromium
     also supports them and setting scrollbar-width there would SUPPRESS the
     pseudo-element treatment above.

   Native popups that draw their own scrollbar (e.g. a <select> dropdown list) are
   OS-rendered and unaffected by any of this — deliberately left alone. */

/* WebKit / Chromium — the full treatment. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--radius-pill);   /* fully rounded */
  border: none;                        /* no border */
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }  /* more contrast on hover */
::-webkit-scrollbar-button { display: none; }            /* no arrow buttons */
::-webkit-scrollbar-corner { background: transparent; }  /* no corner square */

/* Firefox ONLY (via @supports: it lacks the ::-webkit-scrollbar selector). On '*' — not
   just html — so scrollbar-color re-resolves in each subtree's theme scope, including the
   dark-scoped sidebar, instead of inheriting one already-computed colour from the root. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--text-tertiary) transparent; }
}