/*
"default" theme: an M3-inspired baseline. This file is fully self-contained
(tokens + part overrides) — swapping the in index.html for another
theme file is the entire "drop-in replace" mechanism, so nothing here may
depend on another stylesheet being loaded underneath it.
*/
:root {
/* Color roles (M3-inspired) */
--md-sys-color-primary: #386a20;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #b7f397;
--md-sys-color-on-primary-container: #052100;
--md-sys-color-surface: #fdfdf6;
--md-sys-color-on-surface: #1a1c18;
--md-sys-color-surface-variant: #e0e4d6;
--md-sys-color-on-surface-variant: #44483d;
--md-sys-color-outline: #74796c;
--md-sys-color-error: #ba1a1a;
--md-sys-color-on-error: #ffffff;
/* Shape scale */
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-full: 9999px;
/* Type scale */
--md-sys-typescale-body-medium-size: 0.875rem;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-label-large-size: 0.875rem;
--md-sys-typescale-label-large-weight: 500;
--md-sys-typescale-title-medium-size: 1rem;
--md-sys-typescale-title-medium-weight: 600;
--md-sys-typescale-headline-small-size: 1.5rem;
--md-sys-typescale-headline-small-weight: 500;
--md-sys-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* App-specific spacing scale (not an official M3 token category) */
--gcn-space-1: 4px;
--gcn-space-2: 8px;
--gcn-space-3: 12px;
--gcn-space-4: 16px;
--gcn-space-6: 24px;
--gcn-space-8: 32px;
/* Elevation */
--md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
height: 100%;
overflow: hidden;
background: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
font-family: var(--md-sys-font-family);
}
/* Part-level overrides. These restate the components' own defaults, proving
the ::part() hook is wired even in the "default" theme — a second theme
(example-theme.css) uses the same hooks to go further.
NOTE: ::part() only punches through ONE shadow boundary per selector, so a
deeply-nested part (e.g. m3-button's internal