/* ============================================================
   Time Sellers — Base layer: resets, document defaults,
   link styling, and a few brand utility classes.
   Shown in the design system (design-system/project/README.md).

   Import this file INTO A CASCADE LAYER that sits below utilities
   (Tailwind: `@import "…/base.css" layer(base);`). Unlayered, its element
   rules (h1–h4 weight, p margin, focus ring) would beat every utility class.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* A border that names no colour is the hairline edge (--border, shadcn's
   `* { border-color: var(--border) }` base rule). Without it a bare `border`
   / `border-b` utility, and a native control's UA border, draw in
   currentColor: on our light-on-dark text, a bright white line. Any rule
   that sets the colour (a `border-*` colour utility, a component's own
   rule, a `border:` shorthand — one that omits the colour resets it to
   currentColor) still wins: in the apps this sits in
   the base layer, under every component and utility; unlayered (the api's
   server pages, which use no layers) its `*` selector is the weakest there
   is. A border meant to follow the text names `currentColor` itself
   (`border-current`). */
*, *::before, *::after, ::backdrop, ::file-selector-button { border-color: var(--border); }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links — always defined so editor-added links aren't browser-blue */
a:not([class]) { color: var(--accent-text); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:not([class]):hover { color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Scrollbars — barely visible, thumb-only, no track/arrows ---- */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { box-shadow: none; border-color: var(--border-focus); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
p { margin: 0; text-wrap: pretty; }

/* ---- Brand utilities ---- */
.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ts-gradient-text {
  background: var(--gradient-useai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }