# Theme

## Compact token summary

- Framework: Angular 21 standalone, Angular Material 21 M3
- Color: `mat.$green-palette` primary, `mat.$orange-palette` tertiary, light color scheme
- Typography: Roboto via Material system typography
- Surfaces: `--mat-sys-surface`, `--mat-sys-on-surface`, `--mat-sys-outline-variant`
- Actions: `--mat-sys-primary`, `--mat-sys-on-primary`
- Errors: `--mat-sys-error`
- Density: Material default `0`
- Layout: mobile-first, full-height app shell, fixed bottom navigation, 1rem page padding

## Raw global theme source

```scss
@use '@angular/material' as mat;

html {
  height: 100%;
  @include mat.theme(
    (
      color: (
        primary: mat.$green-palette,
        tertiary: mat.$orange-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

body {
  color-scheme: light;
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);
  margin: 0;
  height: 100%;
}
```