.theme-abyssal-lab {
  --base-font-size: 24px;
  --page-font-size: var(--base-font-size);

  --site-menu-font-family: var(--page-font-family);
  --site-menu-font-size: var(--font-size-sm);

  /* Tier 1: raw palette */
  --abyssal-lab-canvas: #000c18;
  --abyssal-lab-chrome: #001526;
  --abyssal-lab-card: #001c33;
  --abyssal-lab-well: #002442;
  --abyssal-lab-hover: #003158;
  --abyssal-lab-border-subtle: rgba(146, 210, 210, 0.12);
  --abyssal-lab-border-medium: rgba(146, 210, 210, 0.22);
  --abyssal-lab-border-active: rgba(0, 240, 255, 0.45);
  --abyssal-lab-border-control: rgba(146, 210, 210, 0.5);
  --abyssal-lab-text: #e2e8f0;
  --abyssal-lab-teal: #92d2d2;
  --abyssal-lab-cyan: #00f0ff;
  --abyssal-lab-positive: #22c55e;
  --abyssal-lab-deficit: #ef4444;
  --abyssal-lab-warning: #f59e0b;
  --abyssal-lab-info: #38bdf8;
  --abyssal-lab-neutral: #94a3b8;
  --abyssal-lab-display-font: "Alumni Sans", sans-serif;
  --abyssal-lab-body-font: "Inter", sans-serif;

  /* Tier 2: map onto the generic tokens components consume */
  --surface-canvas: var(--abyssal-lab-canvas);
  --surface-canvas-text: white;
  --surface-chrome: var(--abyssal-lab-chrome);
  --surface-chrome-text: #fff;
  --surface-panel: var(--abyssal-lab-card);
  --surface-panel-text: #f3f3f3;
  --surface-inset: var(--abyssal-lab-well);
  --surface-inset-text: #f3f3f3;
  --surface-punchout: var(--abyssal-lab-canvas);
  --surface-punchout-text: #f3f3f3;
  --surface-highlight: var(--abyssal-lab-hover);
  --surface-highlight-text: #fff;

  --text-primary: var(--abyssal-lab-text);
  --text-muted: var(--abyssal-lab-teal);
  --text-emphasis: #fff;

  --color-highlight: var(--abyssal-lab-cyan);

  --border-subtle: var(--abyssal-lab-border-subtle);
  --border-medium: var(--abyssal-lab-border-medium);
  --border-active: var(--abyssal-lab-border-active);
  --border-control: var(--abyssal-lab-border-control);

  --color-positive: var(--abyssal-lab-positive);
  --color-deficit: var(--abyssal-lab-deficit);
  --color-warning: var(--abyssal-lab-warning);
  --color-info: var(--abyssal-lab-info);
  --color-neutral: var(--abyssal-lab-neutral);

  --page-font-family: "Alumni Sans", sans-serif;

  /* Header */
  --site-name-font: var(--page-font-family);
  --site-name-size: var(--font-size-3xl);

  /* Tabs */
  --tab-background-color: var(--abyssal-lab-well);
  --tab-hover-background-color: var(--surface-highlight);
  --tab-text-color: var(--text-primary);
  --tab-underline-color: var(--text-emphasis);

  /*

  Backward-compatible single-tier panel tokens, still consumed by
     components that haven't migrated to the new surface tier yet.
  --panel-background-color: var(--abyssal-lab-card);
  --panel-border-color: var(--abyssal-lab-border-medium);
  --panel-box-shadow-color: rgba(255, 255, 255, 0.1);
  --panel-padding: calc(var(--spacing-base) * 3);
  --panel-border-radius: 0;
  --panel-bracket-color: var(--abyssal-lab-teal);
  --panel-heading-underline-color: var(--abyssal-lab-border-medium);

  --page-text-emphasis-color: var(--abyssal-lab-teal);

  --feature-highlight-color: var(--abyssal-lab-cyan);

  --link-color: var(--abyssal-lab-cyan);
  --link-active: var(--abyssal-lab-teal);

  --accent-color: var(--abyssal-lab-cyan);
  --accent-color-muted: var(--abyssal-lab-teal);

  --bar-graph-primary: var(--abyssal-lab-teal);
  --bar-graph-secondary: var(--abyssal-lab-cyan);
  --bar-graph-tertiary: var(--abyssal-lab-info);
  --bar-graph-highlight: var(--abyssal-lab-cyan);
  --bar-graph-neutral: var(--abyssal-lab-border-medium);

  /* Type-scale families — Stylistic Enhancement only, size/weight/
     letter-spacing/line-height stay whatever the base (Form bucket)
     declared. Display-oriented roles get Alumni Sans; data/body roles
     get Inter, matching the mock's PRIMARY/SECONDARY font split.
  --page-hero-font-family: var(--abyssal-lab-display-font);
  --primary-stat-font-family: var(--abyssal-lab-display-font);
  --secondary-stat-font-family: var(--abyssal-lab-display-font);
  --tertiary-stat-font-family: var(--abyssal-lab-display-font);
  --section-heading-font-family: var(--abyssal-lab-display-font);
  --stat-highlight-badge-font-family: var(--abyssal-lab-display-font);
  --tabular-heading-font-family: var(--abyssal-lab-body-font);
  --body-copy-font-family: var(--abyssal-lab-body-font);

  /* =stat-tile's own component-scoped color tokens — not generic tokens,
     so they need an explicit mapping here rather than inheriting one.
  --stat-tile-value-color: var(--text-primary);
  --stat-tile-label-color: var(--abyssal-lab-teal);
  */
}

@media (prefers-color-scheme: light) {
  .theme-abyssal-lab {
    /* Tier 1: raw palette */
    --abyssal-lab-canvas: #eef6fb;
    --abyssal-lab-chrome: #e2eff8;
    --abyssal-lab-card: #d5e7f4;
    --abyssal-lab-well: #c5dcef;
    --abyssal-lab-hover: #b2d0e9;
    --abyssal-lab-border-subtle: rgba(10, 22, 38, 0.12);
    --abyssal-lab-border-medium: rgba(10, 22, 38, 0.22);
    --abyssal-lab-border-active: rgba(10, 74, 143, 0.55);
    --abyssal-lab-border-control: rgba(10, 22, 38, 0.55);
    --abyssal-lab-text: #0a1626;
    --abyssal-lab-link: #0a4a8f;
    --abyssal-lab-link-active: #2f4f6f;
    --abyssal-lab-teal: #1f5f66;
    --abyssal-lab-cyan: #005f6b;
    --abyssal-lab-positive: #166534;
    --abyssal-lab-deficit: #b91c1c;
    --abyssal-lab-warning: #854d0e;
    --abyssal-lab-info: #075985;
    --abyssal-lab-neutral: #475569;
    --abyssal-lab-display-font: "Alumni Sans", sans-serif;
    --abyssal-lab-body-font: "Inter", sans-serif;

    /* Tier 2: map onto the generic tokens components consume */
    --surface-canvas: var(--abyssal-lab-canvas);
    --surface-canvas-text: var(--abyssal-lab-text);
    --surface-chrome: var(--abyssal-lab-chrome);
    --surface-chrome-text: var(--abyssal-lab-text);
    --surface-panel: var(--abyssal-lab-card);
    --surface-panel-text: var(--abyssal-lab-text);
    --surface-inset: var(--abyssal-lab-well);
    --surface-inset-text: var(--abyssal-lab-text);
    --surface-punchout: var(--abyssal-lab-canvas);
    --surface-punchout-text: var(--abyssal-lab-text);
    --surface-highlight: var(--abyssal-lab-hover);
    --surface-highlight-text: var(--abyssal-lab-text);

    --text-primary: var(--abyssal-lab-text);
    --text-muted: var(--abyssal-lab-teal);
    --text-emphasis: var(--abyssal-lab-text);

    --link-color: var(--abyssal-lab-link);
    --link-active: var(--abyssal-lab-link-active);

    --color-highlight: var(--abyssal-lab-cyan);

    --border-subtle: var(--abyssal-lab-border-subtle);
    --border-medium: var(--abyssal-lab-border-medium);
    --border-active: var(--abyssal-lab-border-active);
    --border-control: var(--abyssal-lab-border-control);

    --color-positive: var(--abyssal-lab-positive);
    --color-deficit: var(--abyssal-lab-deficit);
    --color-warning: var(--abyssal-lab-warning);
    --color-info: var(--abyssal-lab-info);
    --color-neutral: var(--abyssal-lab-neutral);

    --page-font-family: "Alumni Sans", sans-serif;

    /* Header */
    --site-name-font: var(--page-font-family);
    --site-name-size: var(--font-size-3xl);

    /* Tabs */
    --tab-background-color: var(--abyssal-lab-well);
    --tab-hover-background-color: var(--surface-highlight);
    --tab-text-color: var(--text-primary);
    --tab-underline-color: var(--text-emphasis);
  }
}

/* .theme-abyssal-lab .league-pwhl {
  --accent-color: var(--abyssal-lab-teal);
}

*/