/*
 * Meridian design tokens — authoritative source per ADR-026.
 * Translated 1:1 from docs/ux/claude-design/theme-v2.js.
 * Light is the default under :root; dark overrides via [data-theme="dark"].
 * The inline script in App.razor resolves system preference before this file loads.
 */

/* -------- Fonts (self-hosted; no remote fetches) -------------------- */

@font-face {
    font-family: 'Geist';
    src: url('/fonts/geist-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Geist';
    src: url('/fonts/geist-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Geist';
    src: url('/fonts/geist-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* -------- Light theme (default) ------------------------------------- */

:root {
    --meridian-bg:            #f3f5f8;
    --meridian-bg-panel:      #fafbfc;
    --meridian-bg-sunk:       #e7eaef;
    --meridian-bg-raised:     #ffffff;
    --meridian-border:        #d7dce4;
    --meridian-border-strong: #b7bfcc;
    --meridian-border-hair:   #e7eaef;

    --meridian-text:          #0e1116;
    --meridian-text-mid:      #3d4450;
    --meridian-text-dim:      #6c7482;
    --meridian-text-faint:    #a3abb8;

    --meridian-accent:        #18b800;
    --meridian-accent-soft:   #dcf6d1;
    /* I-audit fix — accent on accent-soft is 2.29:1 (fails AA). Darker
       lime-green for body-text usage. */
    --meridian-accent-strong: #0c6b00;
    --meridian-pass:          #108a2b;
    --meridian-pass-soft:     #d3f3d8;
    /* I-audit fix — pass on near-white background needs 4.5:1 for WCAG AA;
       the base --meridian-pass (#108a2b) gives 4.31:1 which is below
       threshold. Darker shade for body-text usage on bg-canvas / bg-sunk. */
    --meridian-pass-strong:   #0c6b21;
    --meridian-fail:          #e01f2b;
    --meridian-fail-soft:     #fcd6d8;
    /* I-audit fix — fail on bg-sunk is 3.95:1 (just below AA). Slightly
       deeper red for body-text usage. */
    --meridian-fail-strong:   #a4181f;
    --meridian-warn:          #d97706;
    --meridian-warn-soft:     #fde6c4;
    /* I-audit fix — warn on warn-soft is 2.62:1 (fails AA badly).
       Darker amber for warn-on-warn-soft body text patterns (e.g. nav badges). */
    --meridian-warn-strong:   #8a4a02;
    --meridian-info:          #0aa8c7;
    --meridian-info-soft:     #cdeff6;
    /* I-audit fix — info on info-soft is 2.32:1 (fails AA). Darker teal
       for body-text usage. */
    --meridian-info-strong:   #056478;
    --meridian-muted:         #7a8394;
    --meridian-chip-bg:       #e7eaef;

    --meridian-lane-row:      rgba(14,17,22,0.015);
    --meridian-lane-row-alt:  rgba(14,17,22,0.035);

    /* Environment identities */
    --env-dev:     #0aa8c7;
    --env-staging: #d97706;
    --env-prod:    #8b5cf6;
    --env-canary:  #18b800;
    --env-perf:    #e01f2b;

    /* Typography */
    --meridian-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --meridian-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Dimensions — density defaults per ADR-026 / principles §5 */
    --meridian-row-height: 34px;
    --meridian-radius:      2px;

    /* Layout density — driven by the per-user Profile preference. The default
       (compact) matches the design baseline; comfortable loosens vertical rhythm
       and table row height. Applied via [data-density] on <html> below. */
    --meridian-density-row-height:  var(--meridian-row-height);
    --meridian-density-main-pad:    24px;

    color-scheme: light;
}

/* Compact is the design baseline; declared explicitly so a saved preference of
   "compact" reverts cleanly from comfortable. */
html[data-density="compact"] {
    --meridian-density-row-height: 34px;
    --meridian-density-main-pad:   24px;
}

/* Comfortable — looser spacing for users who prefer a roomier layout. */
html[data-density="comfortable"] {
    --meridian-density-row-height: 44px;
    --meridian-density-main-pad:   36px;
}

/* Apply the density spacing to the primary page container and table rows so the
   change is visible app-wide after the preference loads. */
html[data-density] .m-main-with-status .mud-container {
    padding-top:    var(--meridian-density-main-pad);
    padding-bottom: var(--meridian-density-main-pad);
}

html[data-density] .mud-table-row {
    height: var(--meridian-density-row-height);
}

/* -------- Dark theme ------------------------------------------------- */

[data-theme="dark"] {
    --meridian-bg:            #0a0d12;
    --meridian-bg-panel:      #11151c;
    --meridian-bg-sunk:       #060809;
    --meridian-bg-raised:     #171c24;
    --meridian-border:        #242b36;
    --meridian-border-strong: #3a424f;
    --meridian-border-hair:   #1a1f27;

    --meridian-text:          #eef1f6;
    --meridian-text-mid:      #9aa3b1;
    --meridian-text-dim:      #6a7283;
    --meridian-text-faint:    #434b59;

    --meridian-accent:        #9cff3a;
    --meridian-accent-soft:   #223a12;
    /* Dark theme already passes AA — alias each -strong to its base token. */
    --meridian-accent-strong: #9cff3a;
    --meridian-pass:          #49e65c;
    --meridian-pass-soft:     #0e2a12;
    --meridian-pass-strong:   #49e65c;
    --meridian-fail:          #ff4757;
    --meridian-fail-soft:     #3a0f14;
    --meridian-fail-strong:   #ff4757;
    --meridian-warn:          #ffb020;
    --meridian-warn-strong:   #ffb020;
    --meridian-warn-soft:     #3a2608;
    --meridian-info:          #25d3f0;
    --meridian-info-soft:     #07323b;
    --meridian-info-strong:   #25d3f0;
    --meridian-muted:         #4a5263;
    --meridian-chip-bg:       #171c24;

    --meridian-lane-row:      rgba(255,255,255,0.015);
    --meridian-lane-row-alt:  rgba(255,255,255,0.04);

    --env-dev:     #25d3f0;
    --env-staging: #ffb020;
    --env-prod:    #b18cff;
    --env-canary:  #9cff3a;
    --env-perf:    #ff4757;

    color-scheme: dark;
}

/* -------- Baseline element styling --------------------------------- */

html, body {
    background: var(--meridian-bg);
    color: var(--meridian-text);
    font-family: var(--meridian-font-sans);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, kbd, pre, samp {
    font-family: var(--meridian-font-mono);
}

/* Tabular numerals for numeric metrics */
.meridian-tabular,
.mud-table td.mud-table-cell-numeric,
.mud-table-cell-numeric {
    font-variant-numeric: tabular-nums;
}

/* -------- MudBlazor palette variable bridge ------------------------- */
/*
 * MudBlazor exposes its theme as CSS custom properties under --mud-palette-*.
 * We bind the subset most pages read from (backgrounds, text, surfaces,
 * borders, semantic colours) to Meridian tokens so any page that reads
 * --mud-palette-* inherits Meridian theming automatically.
 * Pages that read MudTheme.* via C# take the palette set in MeridianTheme.cs —
 * the two are kept in sync by convention (see blazor-implementation-strategy.md §1.3).
 */

:root,
[data-theme="light"],
[data-theme="dark"] {
    --mud-palette-background:           var(--meridian-bg);
    --mud-palette-background-gray:      var(--meridian-bg-sunk);
    --mud-palette-surface:              var(--meridian-bg-panel);
    --mud-palette-drawer-background:    var(--meridian-bg-panel);
    --mud-palette-drawer-text:          var(--meridian-text-mid);
    --mud-palette-appbar-background:    var(--meridian-bg-panel);
    --mud-palette-appbar-text:          var(--meridian-text);

    --mud-palette-text-primary:         var(--meridian-text);
    --mud-palette-text-secondary:       var(--meridian-text-mid);
    --mud-palette-text-disabled:        var(--meridian-text-faint);

    --mud-palette-lines-default:        var(--meridian-border);
    --mud-palette-lines-inputs:         var(--meridian-border);
    --mud-palette-divider:              var(--meridian-border-hair);
    --mud-palette-divider-light:        var(--meridian-border-hair);
    --mud-palette-table-lines:          var(--meridian-border-hair);
    --mud-palette-table-striped:        var(--meridian-lane-row-alt);
    --mud-palette-table-hover:          var(--meridian-lane-row-alt);

    --mud-palette-action-default:       var(--meridian-text-mid);
    --mud-palette-action-disabled:      var(--meridian-text-faint);
    --mud-palette-action-disabled-background: var(--meridian-bg-sunk);

    --mud-palette-primary:              var(--meridian-accent);
    --mud-palette-primary-text:         var(--meridian-bg);
    --mud-palette-primary-hover:        var(--meridian-accent);
    --mud-palette-primary-lighten:      var(--meridian-accent-soft);
    --mud-palette-success:              var(--meridian-pass);
    --mud-palette-success-text:         #ffffff;
    --mud-palette-success-lighten:      var(--meridian-pass-soft);
    --mud-palette-error:                var(--meridian-fail);
    --mud-palette-error-text:           #ffffff;
    --mud-palette-error-lighten:        var(--meridian-fail-soft);
    --mud-palette-warning:              var(--meridian-warn);
    --mud-palette-warning-text:         #ffffff;
    --mud-palette-warning-lighten:      var(--meridian-warn-soft);
    --mud-palette-info:                 var(--meridian-info);
    --mud-palette-info-text:            #ffffff;
    --mud-palette-info-lighten:         var(--meridian-info-soft);

    --mud-default-borderradius:         var(--meridian-radius);
}