/*
 * Layered skin, opt-in via the `theme="abyssal-lab"` Layout prop — the home
 * page uses it today. Loaded as a second stylesheet only when a page
 * requests this theme (see src/components/stylesheets.astro and
 * src/themes/loader.ts); global.css's :root remains the base wireframe
 * every token here overrides.
 *
 * Two-tier structure: Tier 1 declares this theme's own raw palette
 * (namespaced --abyssal-lab-*, sourced from _mocks/design_system.html's
 * Tailwind config). Tier 2 maps each raw token onto the generic,
 * semantic-role tokens components/base actually consume — never a
 * theme-specific name. Only Stylistic Enhancement values (color,
 * font-family, decorative gradients/glows, border color/opacity) are set
 * here; no Layout/Function/Form rule may be introduced in a theme file.
 */
.theme-abyssal-lab {
  /* 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-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;

  --base-spacing: 8px;

  /* Tier 2: map onto the generic semantic tokens components/base consume */
  --surface-canvas: var(--abyssal-lab-canvas);
  --surface-chrome: var(--abyssal-lab-chrome);
  --surface-card: var(--abyssal-lab-card);
  --surface-well: var(--abyssal-lab-well);
  --surface-hover: var(--abyssal-lab-hover);

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

  --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-background-color: var(--abyssal-lab-canvas);
  /* Deliberate divergence from the mock's flat canvas — kept as-is. */
  --page-background-gradient: radial-gradient(
    circle at center,
    rgb(22, 34, 62) 0%,
    rgb(15, 25, 48) 35%,
    rgb(11, 19, 38) 70%,
    rgb(8, 14, 29) 100%
  );
  --page-text-color: #f1f1f1;

  --page-font: var(--abyssal-lab-body-font);
  --page-font-weight: 200;
  /*
   * Kept at the base's 100% (not the old 170% blanket scale-up): data-dense
   * pages (standings, team dashboard) now drive their typography from the
   * per-role type-scale tokens above, not a global body scale — a 170%
   * body font-size wrapped every rem-based table column under this theme.
   */
  --page-font-size: 100%;
  --page-font-style: normal;
  --page-character-spacing: 1px;

  /* 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(--base-spacing) * 3);
  --panel-border-radius: 0;
  --panel-bracket-color: var(--abyssal-lab-teal);
  --panel-heading-underline-color: var(--abyssal-lab-border-medium);

  --heading-vertical-spacing: calc(var(--base-spacing) * 2);
  --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);
  --eyebrow-label-font-family: var(--abyssal-lab-body-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(--page-text-color, #f1f1f1);
  --stat-tile-label-color: var(--abyssal-lab-teal);
}

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