@use '@angular/material' as mat;

/* ---------------------------------------------------------------------------
   Material 3 theme — angular-compile demo.

   Adobe-Color-style harmony:
     primary  : spring-green  (fresh / "dynamic compile")
     tertiary : magenta       (complementary accent — ~180° on HSL wheel)

   Dark theme, no per-component overrides — M3 derives secondary, surface,
   and on-colors automatically, giving consistent contrast across the app.
--------------------------------------------------------------------------- */

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

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

/* ---------------------------------------------------------------------------
   Global page styles
--------------------------------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    margin: 0;
    color: mat.get-theme-color($workspace-theme, on-surface);
    background-color: mat.get-theme-color($workspace-theme, surface);
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* 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-compile-template-intent {
    color: mat.get-theme-color($workspace-theme, tertiary);
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

.p3x-ng-compile-template {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}