/* ═══════════════════════════════════════════════════════════════════════════════
   hl-theme.css — Heroes Lounge DS ⇄ MudBlazor bridge (project-owned)

   Load order (App.razor): MudBlazor.min.css → design-system/styles.css → THIS → app.css

   The vendored DS (design-system/tokens/colors.css) declares its semantic tokens once,
   with light-mode values. This project keeps the light/dark toggle (STYLE.md §1.2), so
   the semantic layer has to flip. This file re-declares exactly those tokens in terms of
   the --mud-palette-* variables that MudThemeProvider rewrites on every toggle — the
   palette values themselves come from the DS via Theme/SubSlothTheme.cs.

   Result: one direction of truth — DS token values live in SubSlothTheme.cs (colors) and
   the vendored token files (everything else); both DS names (--surface-card) and the
   project's older --app-* names resolve to the same flipping variable.

   RULES
   - Primitives (--hl-blue-500, --space-4, --radius-md, --font-*) are mode-independent and
     are NOT touched here — they stay exactly as the DS shipped them.
   - Tokens whose DS meaning is already "on a permanently dark surface" (--surface-dark*,
     --surface-dashboard*, --fg-on-dark*, --border-dark) are NOT flipped either: they mean
     the dark band, not "the current background".
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Foreground ─────────────────────────────────────────────────────────── */
    --fg-primary:   var(--mud-palette-text-primary);
    --fg-secondary: var(--mud-palette-text-secondary);
    --fg-muted:     var(--mud-palette-text-disabled);
    --fg-link:       var(--mud-palette-primary);
    --fg-link-hover: var(--mud-palette-primary-lighten);

    /* ── Surfaces ───────────────────────────────────────────────────────────── */
    /* In dark mode these resolve to the DS dashboard surfaces (--surface-dashboard*),
       because SubSlothTheme.PaletteDark is built from exactly those values. */
    --surface-page:   var(--mud-palette-background);
    --surface-sunken: var(--mud-palette-background);
    --surface-card:   var(--mud-palette-surface);

    /* ── Accent ─────────────────────────────────────────────────────────────── */
    --surface-accent:        var(--mud-palette-primary);
    --surface-accent-hover:  var(--mud-palette-primary-lighten);
    --surface-accent-active: var(--mud-palette-primary-darken);
    --focus-ring:            var(--mud-palette-primary);

    /* ── Borders ────────────────────────────────────────────────────────────── */
    --border-subtle:  var(--mud-palette-lines-default);
    --border-default: var(--mud-palette-lines-default);
    --border-accent:  var(--mud-palette-primary);

    /* ── Status ─────────────────────────────────────────────────────────────── */
    /* Flipped so each picks the contrast-correct rung per mode (500 dark / 600 light). */
    --status-live:    var(--mud-palette-success);
    --status-win:     var(--mud-palette-success);
    --status-loss:    var(--mud-palette-error);
    --status-pending: var(--mud-palette-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   The --app-* scale, now sourced from the DS.

   STYLE.md §3 documented these tokens, but none of them were ever declared — every use
   site was running on its inline var() fallback, and the sites without one (app.css:293,
   .draft-strip__label) silently resolved to nothing. Declaring them here fixes that and
   makes the DS the single source for the values.

   Where a DS value differs from the old STYLE.md value, the DS wins (noted per line).
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Radii — DS caps at 10px, so each rung steps down one (was 6/8, theme default was 12). */
    --app-radius-sm:   var(--radius-sm);    /* 4px  (STYLE.md said 6px) */
    --app-radius-md:   var(--radius-md);    /* 6px  (STYLE.md said 8px) */
    --app-radius-lg:   var(--radius-lg);    /* 10px — matches LayoutProperties.DefaultBorderRadius */
    --app-radius-pill: var(--radius-pill);

    /* Shadows — the DS is explicitly "very soft, low-elevation, flat utility feel".
       The old values (up to 0 8px 32px rgba(0,0,0,.5)) were far heavier; DS wins. */
    --app-shadow-sm:    var(--shadow-sm);
    --app-shadow-card:  var(--shadow-sm);
    --app-shadow-hover: var(--shadow-md);
    --app-shadow-pop:   var(--shadow-lg);

    /* Font sizes — DS scale only. The DS's smallest size is 11px, so the old 10px
       "micro" floor is raised to 11px and the sub-11px tier disappears entirely. */
    --app-fs-table-head: var(--text-body-xs);  /* 11px (unchanged in effect) */
    --app-fs-micro:      var(--text-body-xs);  /* 11px (was 10px) */

    /* Weights */
    --app-fw-medium:   var(--weight-medium);
    --app-fw-semibold: var(--weight-semibold);
    --app-fw-bold:     var(--weight-bold);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Project extensions — values the DS does not define.
   Each one is a gap in the DS, not a deviation from it. Any of these that the DS
   later covers should be deleted here and taken from the DS instead.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Extra colour rungs. The DS's scales are tuned for its own dark-only dashboard and its
       light marketing site, where accents appear as fills. This app also renders them as text
       in light mode, and WCAG AA (4.5:1) then needs one rung further than the DS ships.
       Each value below is the DS hue carried one step down/up the same ramp; the ratios are
       asserted in Dashboard.Tests/ThemeContrastTests.cs, not just claimed here. */
    --hl-amber-600: #b8811f;  /* DS stops at amber-500 (#e8b23d) */
    --hl-amber-700: #96681a;  /* 4.89:1 on white — amber-600 only reaches 3.39:1 */
    --hl-green-700: #237e53;  /* 5.02:1 on white — green-600 only reaches 3.43:1 */
    --hl-red-400:   #e8615c;  /* 5.00:1 on the dark panel — red-500 only reaches 4.41:1 */
    --hl-gray-550:  #5f7079;  /* light --fg-muted; gray-400 reads 2.71:1 on white */

    /* Inter is loaded to 800; the DS --weight-* scale stops at 700 (Oswald's max).
       800 stays available for body-face emphasis only — never on display type. */
    --app-fw-black: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Typography — DS display face on MudBlazor's heading classes.

   tokens/typography.css styles bare h1–h4, but MudBlazor renders headings as
   <h4 class="mud-typography mud-h4">, and .mud-typography.mud-h4 (0,2,0) outranks a
   bare h4 (0,0,1). MudBlazor's own generated typography (from SubSlothTheme.Typography)
   already carries the DS face and sizes; these rules only make sure the DS's bare-element
   styling cannot half-apply to non-Mud markup inside pages.
   ═══════════════════════════════════════════════════════════════════════════════ */
html, body {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
}

/* Numeric/monospace contexts: scores, MMR, IDs — DS reserves --font-mono for these. */
.hl-mono,
.replay-stats-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Display face for non-Mud headings authored directly in markup. */
.hl-display {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
}

/* Uppercase micro-label — the DS's recurring section/column-header treatment
   (see ui_kits/subsloth Sidebar headings and DataTable column heads). */
.hl-label {
    font-family: var(--font-display);
    font-size: var(--text-body-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-muted);
}