@use '@angular/material' as mat;
@use './node_modules/highlight.js/scss/dark' as *;

/* ---------------------------------------------------------------------------
   Material 3 theme — shared across both P3X demo apps so they feel tonally
   consistent. Adobe-Color complementary pair (~180° on HSL wheel) — the
   canonical dev-tool blue/orange combo (GitHub, VS Code, etc.):
     primary  : azure   (network / tech / trust)
     tertiary : orange  (warm accent)
   Dark theme, `mat.define-theme` (M3) — no M2 `m2-define-*` calls.
--------------------------------------------------------------------------- */

$workspace-theme: mat.define-theme((
    color: (
        theme-type: dark,
        primary: mat.$azure-palette,
        tertiary: mat.$orange-palette,
    ),
    density: (
        scale: 0,
    ),
));

html {
    @include mat.all-component-themes($workspace-theme);
    @include mat.elevation-classes();
}

/* ---------------------------------------------------------------------------
   Global page styles — explicit dark grey so no light surface token can
   leak through outside the content area.
--------------------------------------------------------------------------- */

html, body {
    height: 100%;
    background-color: #212121;
}

body {
    margin: 0;
    color: rgba(255, 255, 255, 0.87);
    overflow-x: hidden;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* M3 `color="primary"` on the toolbar resolves to a light tone in dark
   mode; force the surface dark to match the page. */
.mat-toolbar {
    background-color: #2a2a2a;
    color: rgba(255, 255, 255, 0.87);
}

/* Breathing room between adjacent MDC buttons — M3 renders them block-width
   inside flow containers, so siblings otherwise touch. */
.mat-mdc-button,
.mat-mdc-outlined-button,
.mat-mdc-unelevated-button,
.mat-mdc-raised-button {
    margin: 4px;
}

.p3x-ng-http-pre {
    overflow: auto;
}