:root {
  /* ---- Base palette (sampled from brand marks & Hot Take card) ---- */
  --d14-navy-900: #001029;   /* rink-board dark navy — primary background */
  --d14-navy-800: #041c3a;
  --d14-navy-700: #0a2847;
  --d14-blue-700: #0a3f6b;   /* deep blue ring */
  --d14-blue-500: #1785c9;   /* bright accent blue */
  --d14-blue-300: #6cc0ec;
  --d14-teal-600: #048c74;   /* primary teal/green ring + wordmark accent */
  --d14-teal-500: #05a48a;
  --d14-teal-300: #7fd9c8;
  --d14-white: #ffffff;
  --d14-paper: #f7f7f7;      /* off-white background (rink texture paper) */
  --d14-ink: #101418;        /* near-black for on-light body text */
  --d14-grey-500: #6b7680;
  --d14-grey-300: #cfd6db;
  --d14-grey-100: #eef1f2;

  /* ---- Semantic aliases ---- */
  --surface-page-dark: var(--d14-navy-900);
  --surface-page-light: var(--d14-paper);
  --surface-card-dark: var(--d14-navy-800);
  --surface-card-light: var(--d14-white);
  --surface-overlay: rgba(0, 16, 41, 0.72);

  --text-on-dark-primary: var(--d14-white);
  --text-on-dark-secondary: rgba(255, 255, 255, 0.66);
  --text-on-light-primary: var(--d14-ink);
  --text-on-light-secondary: var(--d14-grey-500);

  --brand-primary: var(--d14-teal-600);     /* CTAs, links, highlight text */
  --brand-secondary: var(--d14-blue-500);   /* secondary accents, hover glows */
  --brand-navy: var(--d14-navy-900);        /* wordmark ink, dark surfaces */

  --border-on-dark: rgba(255, 255, 255, 0.14);
  --border-on-light: var(--d14-grey-300);

  --state-hover-overlay: rgba(255, 255, 255, 0.08);
  --state-press-overlay: rgba(0, 0, 0, 0.18);
  --state-focus-ring: var(--d14-blue-300);
}