:root {
  /* ---- Base palette ---- */
  --black: #111111;
  --white: #ffffff;
  --gray-950: #1a1a1a;
  --gray-800: #303030;
  --gray-600: #565656;
  --gray-500: #707072;
  --gray-400: #9e9ea0;
  --gray-300: #cacacb;
  --gray-200: #e5e5e5;
  --gray-100: #f5f5f5;
  --gray-50:  #f7f7f7;

  /* Brand accent — sampled from the Tryout logo */
  --brand-navy: #28508b;
  --brand-navy-dark: #1d3c69;
  --brand-navy-tint: #e9eef6;

  /* Semantic accents */
  --sale-red: #c8102e;
  --success-green: #128a09;
  --warning-orange: #d97706;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--black);
  --text-secondary: var(--gray-500);
  --text-inverse: var(--white);
  --text-link: var(--black);
  --text-sale: var(--sale-red);
  --text-brand: var(--brand-navy);

  --surface-page: var(--white);
  --surface-card: var(--gray-100);
  --surface-band: var(--gray-50);
  --surface-inverse: var(--black);
  --surface-brand: var(--brand-navy);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-input: var(--gray-300);
  --border-input-focus: var(--black);
}