/* ═══════════════════════════════════════════════════════════════════════════
   MUDBLAZOR BRIDGE

   MudBlazor exposes its palette as CSS variables (--mud-palette-*). This file
   redefines them in terms of our own semantic tokens, so MudBlazor components
   inherit the active theme, density and colour mode with no C# involved.

   WHY NOT A TuxoraTheme.cs WITH A MudTheme OBJECT

   Because a MudTheme takes literal colour values in C#, and the real values
   live in tokens.css. Restating them in code would create two sources of truth
   that drift the first time someone tweaks a shade — and the drift would be
   invisible, because both halves would still compile and render.

   Here there is one source. Change --brand in tokens.css and MudBlazor's
   primary follows, in both modes, for every preset, including a company's
   custom hue.

   WHY :root:root AND NOT :root

   MudThemeProvider does not only ship a stylesheet — it renders a <style> block
   into the BODY at runtime, containing its palette under a plain `:root`.
   Because it lands after every <link>, an equally specific `:root` here loses
   the cascade no matter where the file is loaded.

   Doubling the pseudo-class raises specificity from (0,1,0) to (0,2,0), which
   wins on merit rather than on position. It looks like a typo, and it is the
   difference between MudBlazor adopting the tenant's theme and quietly staying
   purple — which is exactly what happened the first time.

   !important would also work and would be worse: it would leave no way for a
   component to legitimately override a token later.
   ═══════════════════════════════════════════════════════════════════════════ */

:root:root {
    /* ── Brand ──────────────────────────────────────────────────────────── */
    --mud-palette-primary: var(--brand);
    --mud-palette-primary-text: var(--brand-ink);
    --mud-palette-primary-darken: var(--brand-hover);
    --mud-palette-primary-lighten: var(--brand-subtle);
    --mud-palette-primary-hover: color-mix(in srgb, var(--brand) 10%, transparent);

    /* Secondary is not a second brand: reusing the brand for it would create a
       second "most important" colour and leave neither reading as primary. */
    --mud-palette-secondary: var(--ink-secondary);
    --mud-palette-secondary-text: var(--surface-raised);

    --mud-palette-tertiary: var(--brand-subtle-ink);
    --mud-palette-tertiary-text: var(--brand-subtle);

    /* ── State. Identical across themes: "danger" cannot change meaning by
         industry. MudBlazor calls it error; everything else lines up. ────── */
    --mud-palette-success: var(--success);
    --mud-palette-success-text: var(--surface-raised);
    --mud-palette-success-lighten: var(--success-bg);
    --mud-palette-warning: var(--warning);
    --mud-palette-warning-text: var(--surface-raised);
    --mud-palette-warning-lighten: var(--warning-bg);
    --mud-palette-error: var(--danger);
    --mud-palette-error-text: var(--surface-raised);
    --mud-palette-error-lighten: var(--danger-bg);
    --mud-palette-info: var(--info);
    --mud-palette-info-text: var(--surface-raised);
    --mud-palette-info-lighten: var(--info-bg);

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --mud-palette-background: var(--surface-page);
    --mud-palette-background-gray: var(--surface-sunken);
    --mud-palette-surface: var(--surface-raised);
    --mud-palette-drawer-background: var(--surface-raised);
    --mud-palette-drawer-text: var(--ink-secondary);
    --mud-palette-drawer-icon: var(--ink-muted);
    --mud-palette-appbar-background: var(--surface-raised);
    --mud-palette-appbar-text: var(--ink);

    /* ── Ink ────────────────────────────────────────────────────────────── */
    --mud-palette-text-primary: var(--ink);
    --mud-palette-text-secondary: var(--ink-secondary);
    --mud-palette-text-disabled: var(--ink-muted);

    --mud-palette-action-default: var(--ink-secondary);
    --mud-palette-action-default-hover: var(--surface-hover);
    --mud-palette-action-disabled: var(--ink-muted);
    --mud-palette-action-disabled-background: var(--surface-sunken);

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --mud-palette-divider: var(--line);
    --mud-palette-divider-light: var(--line);
    --mud-palette-lines-default: var(--line);
    --mud-palette-lines-inputs: var(--line-strong);
    --mud-palette-table-lines: var(--line);
    --mud-palette-table-striped: var(--surface-sunken);
    --mud-palette-table-hover: var(--surface-hover);

    /* ── Overlays and elevation ─────────────────────────────────────────── */
    --mud-palette-overlay-dark: rgb(0 0 0 / .5);
    --mud-palette-overlay-light: rgb(255 255 255 / .5);
    --mud-elevation-1: var(--shadow-1);
    --mud-elevation-2: var(--shadow-1);
    --mud-elevation-3: var(--shadow-2);
    --mud-elevation-4: var(--shadow-2);
    --mud-elevation-8: var(--shadow-2);

    /* ── Shape and type. The radius comes from the theme, so Steel's near-square
         corners and Aqua's soft ones reach MudBlazor's components too. ───── */
    --mud-default-borderradius: var(--radius);
    --mud-typography-default-family: var(--font-ui);
    --mud-typography-default-size: var(--text-body);
    --mud-typography-body1-family: var(--font-ui);
    --mud-typography-body1-size: var(--text-body);
    --mud-typography-body2-size: var(--text-small);
    --mud-typography-button-family: var(--font-ui);
    --mud-typography-button-size: var(--text-small);
    --mud-typography-button-weight: 600;
    --mud-typography-button-transform: none;
    --mud-typography-caption-size: var(--text-caption);
    --mud-typography-h5-size: var(--text-h1);
    --mud-typography-h6-size: var(--text-h2);
    --mud-typography-subtitle1-size: var(--text-h3);
    --mud-typography-subtitle2-size: var(--text-small);
}

/* ── Density ────────────────────────────────────────────────────────────────
   MudBlazor ships its own Dense flags per component, which would mean setting
   Dense="true" on every table and field and keeping them in sync by hand. The
   row heights come from our density axis instead, so one user preference moves
   everything at once. */
.mud-table-cell,
.mud-table-row .mud-table-cell {
    height: var(--row-h);
    padding: 0 var(--pad-x);
}

.mud-table-head .mud-table-cell {
    font-size: var(--text-label);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--surface-sunken);
}

.mud-input-control .mud-input-root {
    font-size: var(--text-small);
}

.mud-nav-link {
    height: var(--row-h);
    min-height: var(--row-h);
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   R-06: focus is always visible. MudBlazor's own ring is subtle enough to lose
   on a busy screen, and anyone working a fast counter navigates by keyboard. */
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-slot:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Alerts ─────────────────────────────────────────────────────────────────
   R-03: state is never colour alone. MudBlazor already pairs an icon with each
   severity; this only keeps the surface reading as ours. */
.mud-alert-filled-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.mud-alert-filled-error {
    background: var(--danger-bg);
    color: var(--danger);
}

.mud-alert-filled-info {
    background: var(--info-bg);
    color: var(--info);
}

.mud-alert-filled-success {
    background: var(--success-bg);
    color: var(--success);
}

/* ── Numbers ────────────────────────────────────────────────────────────────
   R-04: digits line up. Comparing misaligned amounts forces reading them one
   at a time. */
.mud-table-cell.num,
.tabular {
    font-variant-numeric: tabular-nums;
    text-align: right;
}