/* ============================================================================
   PT Max — Performance Dark design tokens
   Source of truth: docs/design/performance-dark-system.md
   Reference implementation: docs/design/energy-dial.html (variant C)

   RULES (short form — full rules in the doc):
   - Dark-only. There is no light theme.
   - --npt-volt means NOW (live, check-in, today, streak). Budget <10% of any
     screen. Never on white.
   - Coach surfaces accent with --npt-blue; volt only for physically-live signals.
   - Documents (invoice, terms, exports, Stripe hand-off) stay white ("paper").
   - Display face (Barlow Condensed) = what the body does, one moment per screen.
     Figures/dates/codes = IBM Plex Mono, always. Everything else = Inter.
   ========================================================================== */

@import url('fonts/fonts.css');

:root {
    /* Surfaces */
    --npt-canvas: #0A111D;
    --npt-card: #101A2B;
    --npt-card-border: #1E2A3E;
    --npt-card-raised: linear-gradient(140deg, #121D30 0%, #0F1828 100%);
    --npt-nav: #0E1726;
    --npt-divider: #1E2A3E;
    --npt-divider-strong: #24334B;
    --npt-hover: rgba(255, 255, 255, .05);

    /* Text */
    --npt-text: #F2F5FA;
    --npt-text-2: #94A6C2;
    --npt-text-3: #7787A0;
    --npt-text-faint: #556479;

    /* Accents */
    --npt-volt: #D8FF3E;
    --npt-on-volt: #0A111D;
    --npt-volt-glow: radial-gradient(circle, rgba(216, 255, 62, .13), transparent 62%);
    --npt-blue: #1F5EF0;
    --npt-blue-hover: #1746BE;
    --npt-blue-tint-bg: #15233C;
    --npt-blue-tint-text: #9CC0FF;

    /* Semantic (on dark) */
    --npt-success: #4ED07E;
    --npt-success-tint-bg: #12271C;
    --npt-warning: #F0B963;
    --npt-warning-tint-bg: #2A2318;
    --npt-danger: #E45B60;
    --npt-danger-tint-bg: #2B181C;

    /* Paper (rule 4 — documents only) */
    --npt-paper: #FFFFFF;
    --npt-paper-text: #0E1726;
    --npt-paper-border: #E2E5EA;

    /* Type */
    --npt-font-display: 'Barlow Condensed', 'Inter', sans-serif;
    --npt-font-body: 'Inter', Helvetica, Arial, sans-serif;
    --npt-font-mono: 'IBM Plex Mono', Consolas, monospace;

    /* Radii */
    --npt-radius-card: 16px;
    --npt-radius-button: 11px;
    --npt-radius-chip: 7px;
}

/* --- Global type cascade ---------------------------------------------------
   Headings and dialog titles carry the display face app-wide via inheritance —
   one rule instead of a hundred per-file edits. Body copy stays Inter; figures
   go mono at the component level. */

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-dialog-title {
    font-family: var(--npt-font-display) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .015em;
}

/* --- Type utilities ------------------------------------------------------- */

.npt-display {
    font-family: var(--npt-font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1;
}

.npt-display-italic {
    font-family: var(--npt-font-display);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1;
}

.npt-mono {
    font-family: var(--npt-font-mono);
    font-variant-numeric: tabular-nums;
}

.npt-label {
    font-family: var(--npt-font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--npt-text-3);
}

    .npt-label.volt {
        color: var(--npt-volt);
    }