:root{
  /* ---- Brand palette (from thirdbase Design System, July 2026) ---- */
  --tb-red: #FF442B;        /* Primary Color — the signature accent */
  --tb-red-600: #E23417;    /* pressed/darker red */
  --tb-red-100: #FFE3DE;    /* soft red tint (from logo diamond highlight) */
  --tb-blue: #3355FF;       /* Primary Accent — secondary highlight */
  --tb-blue-600: #2440E0;   /* pressed/darker blue */
  --tb-blue-100: #E1E6FF;   /* soft blue tint */

  --tb-ink: #444444;        /* Primary Font Color */
  --tb-ink-muted: #9E9E9E;  /* Secondary Font Color */
  --tb-ink-strong: #1A1A1A; /* near-black for large display type */
  --tb-white: #FFFFFF;
  --tb-black: #111111;

  /* neutral surface ramp, anchored on the #F3F3F3 background accent */
  --tb-bg: #FFFFFF;
  --tb-bg-accent: #F3F3F3;  /* Background accent — section fills, cards */
  --tb-bg-sunken: #EAEAEA;
  --tb-line: #E4E4E4;       /* hairline borders */
  --tb-line-strong: #D2D2D2;

  /* ---- Semantic aliases ---- */
  --text-body: var(--tb-ink);
  --text-muted: var(--tb-ink-muted);
  --text-display: var(--tb-ink-strong);
  --text-on-dark: var(--tb-white);
  --text-accent: var(--tb-red);

  --surface-page: var(--tb-bg);
  --surface-card: var(--tb-white);
  --surface-accent: var(--tb-bg-accent);
  --surface-dark: var(--tb-ink-strong);

  --border-hairline: var(--tb-line);
  --border-strong: var(--tb-line-strong);

  --accent-primary: var(--tb-red);
  --accent-primary-hover: var(--tb-red-600);
  --accent-secondary: var(--tb-blue);
  --accent-secondary-hover: var(--tb-blue-600);

  --focus-ring: 0 0 0 3px var(--tb-red-100);
}