/* ============================================================
   TINT FACTORY — brand tokens (v2: TF fonts, red-only)
   ============================================================ */

:root {
  /* core neutrals */
  --black: #0A0A0C;
  --ink: #131418;
  --steel: #25272D;
  --slate: #4A4F58;
  --glass: #C8CED6;
  --paper: #F4F4F4;
  --white: #FFFFFF;

  /* THE brand color — TF red. Used exclusively for accents. */
  --red: #D72327;
  --red-dim: #A11A1D;
  --red-soft: rgba(215,35,39,.10);

  /* functional */
  --bg: var(--black);
  --fg: #F2F3F5;
  --rule: rgba(255,255,255,.08);
  --rule-strong: rgba(255,255,255,.16);
  --muted: rgba(242,243,245,.58);

  /* type — TF's actual font stack */
  --f-display: 'Montserrat', 'Helvetica Neue', system-ui, sans-serif;
  --f-body: 'Roboto', system-ui, -apple-system, sans-serif;
  --f-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* scale — tighter, more readable */
  --t-hero: clamp(40px, 5.6vw, 84px);
  --t-h1: clamp(32px, 4vw, 56px);
  --t-h2: clamp(26px, 3vw, 40px);
  --t-h3: clamp(20px, 1.8vw, 24px);
  --t-body: 16px;
  --t-small: 13px;
  --t-eyebrow: 11px;

  /* radius / motion */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-smooth: cubic-bezier(.65,.05,.36,1);
  --t-fast: 200ms;
  --t-med: 420ms;
  --t-slow: 800ms;

  /* layout */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* light surfaces — preserves red as accent */
.surface-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --rule: rgba(11,11,14,.10);
  --rule-strong: rgba(11,11,14,.22);
  --muted: rgba(21,23,28,.62);
}