/* * ════════════════════════════════════════════════════════════════════ * STERK PLATFORM — Material Design 3 Token System * Gebaseerd op: https://m3.material.io/develop/web * * Gebruik: importeer ná app.css via in base.html * Doel: één centrale bron van waarheid voor kleur, typografie, * vorm, elevatie en motion — consistent over alle templates. * * Architectuur: * m3-tokens.css → definieert primitives + sys-tokens + comp-tokens * app.css → verwijst naar sys-tokens via --clr-* aliassen * templates → gebruiken uitsluitend --md-comp-* of --clr-* * ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── 1. PRIMITIEVE KLEURPALETTEN (nooit direct gebruiken in templates) Gebaseerd op Material amber-tonal palette voor Sterk-goud brand ────────────────────────────────────────────────────────────────── */ :root { /* Amber / primary palette */ --md-ref-palette-primary0: #000000; --md-ref-palette-primary10: #2D1600; --md-ref-palette-primary20: #4D2700; --md-ref-palette-primary30: #6E3A00; --md-ref-palette-primary40: #924E00; --md-ref-palette-primary50: #B86500; --md-ref-palette-primary60: #D97706; /* ← Sterk primary */ --md-ref-palette-primary70: #F59E0B; --md-ref-palette-primary80: #FBD38D; --md-ref-palette-primary90: #FEF3C7; --md-ref-palette-primary95: #FFF9EB; --md-ref-palette-primary99: #FFFDF7; --md-ref-palette-primary100: #FFFFFF; /* Orange / secondary palette (Sterk accent) */ --md-ref-palette-secondary0: #000000; --md-ref-palette-secondary10: #3B0A00; --md-ref-palette-secondary20: #5E1500; --md-ref-palette-secondary30: #862200; --md-ref-palette-secondary40: #B23200; --md-ref-palette-secondary50: #D84500; --md-ref-palette-secondary60: #EA580C; --md-ref-palette-secondary70: #FB923C; --md-ref-palette-secondary80: #FDBA74; --md-ref-palette-secondary90: #FFF7ED; --md-ref-palette-secondary95: #FFF4E8; --md-ref-palette-secondary100: #FFFFFF; /* Teal / tertiary palette (informatieve acties, links) */ --md-ref-palette-tertiary0: #000000; --md-ref-palette-tertiary10: #001831; --md-ref-palette-tertiary20: #002D5C; --md-ref-palette-tertiary30: #1D4ED8; --md-ref-palette-tertiary40: #2563EB; --md-ref-palette-tertiary50: #3B82F6; --md-ref-palette-tertiary60: #60A5FA; --md-ref-palette-tertiary70: #93C5FD; --md-ref-palette-tertiary80: #BFDBFE; --md-ref-palette-tertiary90: #EFF6FF; --md-ref-palette-tertiary100: #FFFFFF; /* Error / danger palette */ --md-ref-palette-error0: #000000; --md-ref-palette-error10: #410002; --md-ref-palette-error20: #690005; --md-ref-palette-error40: #B91C1C; --md-ref-palette-error60: #DC2626; --md-ref-palette-error80: #FCA5A5; --md-ref-palette-error90: #FEE2E2; --md-ref-palette-error100: #FFFFFF; /* Neutral palette (achtergronden, oppervlakken, tekst) */ --md-ref-palette-neutral0: #000000; --md-ref-palette-neutral4: #0F0F0E; --md-ref-palette-neutral6: #18181A; --md-ref-palette-neutral10: #1C1A17; --md-ref-palette-neutral12: #211F1B; --md-ref-palette-neutral17: #2D2B28; --md-ref-palette-neutral20: #312F2B; --md-ref-palette-neutral22: #363330; --md-ref-palette-neutral24: #3A3835; --md-ref-palette-neutral87: #DDD9D4; --md-ref-palette-neutral90: #E3E2E0; --md-ref-palette-neutral92: #EAEAE8; --md-ref-palette-neutral94: #EFEEEC; --md-ref-palette-neutral95: #F2F1EF; --md-ref-palette-neutral96: #F4F3F1; --md-ref-palette-neutral98: #F7F7F6; --md-ref-palette-neutral99: #FAFAF8; --md-ref-palette-neutral100: #FFFFFF; /* Neutral-variant palette (borders, subtekst) */ --md-ref-palette-neutral-variant20: #3D3A35; --md-ref-palette-neutral-variant30: #54504A; --md-ref-palette-neutral-variant50: #6F6F6D; --md-ref-palette-neutral-variant60: #8A8784; --md-ref-palette-neutral-variant80: #C8C5C0; --md-ref-palette-neutral-variant90: #E3E2E0; --md-ref-palette-neutral-variant95: #F0EDE8; } /* ────────────────────────────────────────────────────────────────── 2. SYSTEEM KLEURROLLEN — Light theme (gebruik deze in components) ────────────────────────────────────────────────────────────────── */ :root { /* Primary roles */ --md-sys-color-primary: var(--md-ref-palette-primary60); --md-sys-color-on-primary: var(--md-ref-palette-primary100); --md-sys-color-primary-container: var(--md-ref-palette-primary90); --md-sys-color-on-primary-container: var(--md-ref-palette-primary10); --md-sys-color-inverse-primary: var(--md-ref-palette-primary80); /* Secondary roles */ --md-sys-color-secondary: var(--md-ref-palette-secondary60); --md-sys-color-on-secondary: var(--md-ref-palette-secondary100); --md-sys-color-secondary-container: var(--md-ref-palette-secondary90); --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10); /* Tertiary roles */ --md-sys-color-tertiary: var(--md-ref-palette-tertiary40); --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100); --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90); --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10); /* Error roles */ --md-sys-color-error: var(--md-ref-palette-error60); --md-sys-color-on-error: var(--md-ref-palette-error100); --md-sys-color-error-container: var(--md-ref-palette-error90); --md-sys-color-on-error-container: var(--md-ref-palette-error10); /* Surface roles */ --md-sys-color-background: var(--md-ref-palette-neutral98); --md-sys-color-on-background: var(--md-ref-palette-neutral6); --md-sys-color-surface: var(--md-ref-palette-neutral98); --md-sys-color-on-surface: var(--md-ref-palette-neutral6); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant95); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100); --md-sys-color-surface-container-low: var(--md-ref-palette-neutral99); --md-sys-color-surface-container: var(--md-ref-palette-neutral96); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral94); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral92); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95); /* Outline roles */ --md-sys-color-outline: var(--md-ref-palette-neutral-variant50); --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant90); /* Scrim + shadow */ --md-sys-color-scrim: var(--md-ref-palette-neutral0); --md-sys-color-shadow: var(--md-ref-palette-neutral0); /* Semantic convenience aliases */ --md-sys-color-success: #16A34A; --md-sys-color-on-success: #FFFFFF; --md-sys-color-success-container: #F0FDF4; --md-sys-color-warning: #CA8A04; --md-sys-color-on-warning: #FFFFFF; --md-sys-color-warning-container: #FFFBEB; } /* ────────────────────────────────────────────────────────────────── 2b. SYSTEEM KLEURROLLEN — Dark theme override ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --md-sys-color-primary: var(--md-ref-palette-primary80); --md-sys-color-on-primary: var(--md-ref-palette-primary20); --md-sys-color-primary-container: var(--md-ref-palette-primary30); --md-sys-color-on-primary-container: var(--md-ref-palette-primary90); --md-sys-color-inverse-primary: var(--md-ref-palette-primary60); --md-sys-color-secondary: var(--md-ref-palette-secondary80); --md-sys-color-on-secondary: var(--md-ref-palette-secondary20); --md-sys-color-secondary-container: var(--md-ref-palette-secondary30); --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90); --md-sys-color-tertiary: var(--md-ref-palette-tertiary80); --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20); --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30); --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90); --md-sys-color-error: var(--md-ref-palette-error80); --md-sys-color-on-error: var(--md-ref-palette-error20); --md-sys-color-error-container: var(--md-ref-palette-error40); --md-sys-color-on-error-container: var(--md-ref-palette-error90); --md-sys-color-background: var(--md-ref-palette-neutral6); --md-sys-color-on-background: var(--md-ref-palette-neutral90); --md-sys-color-surface: var(--md-ref-palette-neutral6); --md-sys-color-on-surface: var(--md-ref-palette-neutral90); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant20); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80); --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4); --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10); --md-sys-color-surface-container: var(--md-ref-palette-neutral12); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20); --md-sys-color-outline: var(--md-ref-palette-neutral-variant60); --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant20); --md-sys-color-success: #4ADE80; --md-sys-color-success-container: #052E16; --md-sys-color-warning: #FCD34D; --md-sys-color-warning-container: #422006; } /* ────────────────────────────────────────────────────────────────── 3. TYPOGRAFIE SCHAAL Gebaseerd op M3 type scale — Inter font (al geladen in app.css) Token formaat: --md-sys-typescale-{role}-{property} ────────────────────────────────────────────────────────────────── */ :root { --md-sys-typescale-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display */ --md-sys-typescale-display-large-size: 3.5625rem; /* 57px */ --md-sys-typescale-display-large-line: 4rem; --md-sys-typescale-display-large-tracking: -0.015625rem; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-medium-size: 2.8125rem; /* 45px */ --md-sys-typescale-display-medium-line: 3.25rem; --md-sys-typescale-display-medium-tracking: 0; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-small-size: 2.25rem; /* 36px */ --md-sys-typescale-display-small-line: 2.75rem; --md-sys-typescale-display-small-tracking: 0; --md-sys-typescale-display-small-weight: 400; /* Headline */ --md-sys-typescale-headline-large-size: 2rem; /* 32px */ --md-sys-typescale-headline-large-line: 2.5rem; --md-sys-typescale-headline-large-tracking: 0; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-medium-size: 1.75rem; /* 28px */ --md-sys-typescale-headline-medium-line: 2.25rem; --md-sys-typescale-headline-medium-tracking: 0; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-small-size: 1.5rem; /* 24px */ --md-sys-typescale-headline-small-line: 2rem; --md-sys-typescale-headline-small-tracking: 0; --md-sys-typescale-headline-small-weight: 400; /* Title */ --md-sys-typescale-title-large-size: 1.375rem; /* 22px */ --md-sys-typescale-title-large-line: 1.75rem; --md-sys-typescale-title-large-tracking: 0; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-medium-size: 1rem; /* 16px */ --md-sys-typescale-title-medium-line: 1.5rem; --md-sys-typescale-title-medium-tracking: 0.009375rem; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-small-size: 0.875rem; /* 14px */ --md-sys-typescale-title-small-line: 1.25rem; --md-sys-typescale-title-small-tracking: 0.00625rem; --md-sys-typescale-title-small-weight: 500; /* Body */ --md-sys-typescale-body-large-size: 1rem; /* 16px */ --md-sys-typescale-body-large-line: 1.5rem; --md-sys-typescale-body-large-tracking: 0.03125rem; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-medium-size: 0.875rem; /* 14px */ --md-sys-typescale-body-medium-line: 1.25rem; --md-sys-typescale-body-medium-tracking: 0.015625rem; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-small-size: 0.75rem; /* 12px */ --md-sys-typescale-body-small-line: 1rem; --md-sys-typescale-body-small-tracking: 0.025rem; --md-sys-typescale-body-small-weight: 400; /* Label */ --md-sys-typescale-label-large-size: 0.875rem; /* 14px */ --md-sys-typescale-label-large-line: 1.25rem; --md-sys-typescale-label-large-tracking: 0.00625rem; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-medium-size: 0.75rem; /* 12px */ --md-sys-typescale-label-medium-line: 1rem; --md-sys-typescale-label-medium-tracking: 0.03125rem; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-small-size: 0.6875rem; /* 11px */ --md-sys-typescale-label-small-line: 1rem; --md-sys-typescale-label-small-tracking: 0.03125rem; --md-sys-typescale-label-small-weight: 500; } /* ────────────────────────────────────────────────────────────────── 4. SHAPE SCHAAL ────────────────────────────────────────────────────────────────── */ :root { --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; } /* ────────────────────────────────────────────────────────────────── 5. ELEVATIE (tonal + shadow) M3 gebruikt primaire kleur als tint op surfaces (geen zware schaduwen) ────────────────────────────────────────────────────────────────── */ :root { /* Shadow tokens */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); --md-sys-elevation-level2: 0 2px 6px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04); --md-sys-elevation-level3: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05); --md-sys-elevation-level4: 0 6px 16px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.06); --md-sys-elevation-level5: 0 8px 24px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.07); /* Tonal overlay percentages (primaire kleur op surface) */ --md-sys-elevation-tonal-level1: 5%; --md-sys-elevation-tonal-level2: 8%; --md-sys-elevation-tonal-level3: 11%; --md-sys-elevation-tonal-level4: 12%; --md-sys-elevation-tonal-level5: 14%; } [data-theme="dark"] { --md-sys-elevation-level1: 0 1px 3px rgba(0,0,0,.30); --md-sys-elevation-level2: 0 2px 6px rgba(0,0,0,.40); --md-sys-elevation-level3: 0 4px 12px rgba(0,0,0,.50); --md-sys-elevation-level4: 0 6px 16px rgba(0,0,0,.55); --md-sys-elevation-level5: 0 8px 24px rgba(0,0,0,.60); } /* ────────────────────────────────────────────────────────────────── 6. MOTION / TRANSITIE ────────────────────────────────────────────────────────────────── */ :root { /* Duratie */ --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-long1: 350ms; --md-sys-motion-duration-long2: 400ms; /* Easing curven */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1); } /* ────────────────────────────────────────────────────────────────── 7. STATE LAYERS (interactieve feedback-lagen) Gebruik als ::before of ::after pseudo-element op components. Kleur = --md-sys-color-on-{surface}, opacity = token hieronder. ────────────────────────────────────────────────────────────────── */ :root { --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; --md-sys-state-dragged-opacity: 0.16; --md-sys-state-disabled-opacity: 0.38; } /* ────────────────────────────────────────────────────────────────── 8. COMPONENT TOKENS (vlakke mapping primitief → component) Templates gebruiken uitsluitend --md-comp-* of --clr-* aliassen. ────────────────────────────────────────────────────────────────── */ :root { /* --- Filled Button (primaire CTA) --- */ --md-comp-filled-button-bg: var(--md-sys-color-primary); --md-comp-filled-button-fg: var(--md-sys-color-on-primary); --md-comp-filled-button-shape: var(--md-sys-shape-corner-full); --md-comp-filled-button-height: 40px; --md-comp-filled-button-padding: 0 24px; --md-comp-filled-button-font-size: var(--md-sys-typescale-label-large-size); --md-comp-filled-button-font-weight: var(--md-sys-typescale-label-large-weight); --md-comp-filled-button-tracking: var(--md-sys-typescale-label-large-tracking); /* --- Tonal Button (secundaire CTA) --- */ --md-comp-tonal-button-bg: var(--md-sys-color-secondary-container); --md-comp-tonal-button-fg: var(--md-sys-color-on-secondary-container); --md-comp-tonal-button-shape: var(--md-sys-shape-corner-full); /* --- Outlined Button --- */ --md-comp-outlined-button-border: var(--md-sys-color-outline); --md-comp-outlined-button-fg: var(--md-sys-color-primary); --md-comp-outlined-button-shape: var(--md-sys-shape-corner-full); /* --- Text Button --- */ --md-comp-text-button-fg: var(--md-sys-color-primary); /* --- Icon Button --- */ --md-comp-icon-button-size: 40px; --md-comp-icon-button-shape: var(--md-sys-shape-corner-full); /* --- Card (Elevated) --- */ --md-comp-card-bg: var(--md-sys-color-surface-container-lowest); --md-comp-card-shape: var(--md-sys-shape-corner-medium); --md-comp-card-elevation: var(--md-sys-elevation-level1); /* --- Card (Filled) --- */ --md-comp-card-filled-bg: var(--md-sys-color-surface-container-highest); --md-comp-card-filled-shape: var(--md-sys-shape-corner-medium); /* --- Card (Outlined) --- */ --md-comp-card-outlined-border: var(--md-sys-color-outline-variant); --md-comp-card-outlined-shape: var(--md-sys-shape-corner-medium); /* --- Text Field (Outlined) --- */ --md-comp-text-field-border: var(--md-sys-color-outline); --md-comp-text-field-border-focused: var(--md-sys-color-primary); --md-comp-text-field-bg: transparent; --md-comp-text-field-shape: var(--md-sys-shape-corner-extra-small); --md-comp-text-field-label-color: var(--md-sys-color-on-surface-variant); --md-comp-text-field-label-focused: var(--md-sys-color-primary); --md-comp-text-field-height: 56px; /* --- Text Field (Filled) --- */ --md-comp-text-field-filled-bg: var(--md-sys-color-surface-container-highest); --md-comp-text-field-filled-shape: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0; /* --- Chip (Filter/Assist) --- */ --md-comp-chip-border: var(--md-sys-color-outline); --md-comp-chip-fg: var(--md-sys-color-on-surface-variant); --md-comp-chip-shape: var(--md-sys-shape-corner-small); --md-comp-chip-height: 32px; /* --- Badge --- */ --md-comp-badge-bg: var(--md-sys-color-error); --md-comp-badge-fg: var(--md-sys-color-on-error); --md-comp-badge-shape: var(--md-sys-shape-corner-full); /* --- Navigation Drawer (sidebar) --- */ --md-comp-nav-drawer-bg: var(--md-sys-color-surface-container-low); --md-comp-nav-item-shape: var(--md-sys-shape-corner-full); --md-comp-nav-item-active-bg: var(--md-sys-color-secondary-container); --md-comp-nav-item-active-fg: var(--md-sys-color-on-secondary-container); --md-comp-nav-item-inactive-fg: var(--md-sys-color-on-surface-variant); /* --- List item --- */ --md-comp-list-item-height: 48px; --md-comp-list-item-shape: var(--md-sys-shape-corner-extra-small); /* --- Dialog --- */ --md-comp-dialog-bg: var(--md-sys-color-surface-container-high); --md-comp-dialog-shape: var(--md-sys-shape-corner-extra-large); --md-comp-dialog-elevation: var(--md-sys-elevation-level3); /* --- Snackbar (toast-notificatie) --- */ --md-comp-snackbar-bg: var(--md-sys-color-inverse-surface); --md-comp-snackbar-fg: var(--md-sys-color-inverse-on-surface); --md-comp-snackbar-shape: var(--md-sys-shape-corner-extra-small); /* --- FAB (Floating Action Button) --- */ --md-comp-fab-bg: var(--md-sys-color-primary-container); --md-comp-fab-fg: var(--md-sys-color-on-primary-container); --md-comp-fab-shape: var(--md-sys-shape-corner-large); --md-comp-fab-elevation: var(--md-sys-elevation-level3); /* --- Divider --- */ --md-comp-divider-color: var(--md-sys-color-outline-variant); --md-comp-divider-thickness: 1px; /* --- Top App Bar --- */ --md-comp-top-app-bar-bg: var(--md-sys-color-surface); --md-comp-top-app-bar-fg: var(--md-sys-color-on-surface); --md-comp-top-app-bar-height: 64px; /* --- Progress Indicator --- */ --md-comp-progress-track: var(--md-sys-color-surface-container-highest); --md-comp-progress-indicator: var(--md-sys-color-primary); } /* ────────────────────────────────────────────────────────────────── 9. BACKWARDS-COMPAT BRUG (--clr-* aliassen verwijzen naar M3 tokens) Hierdoor werkt bestaande app.css/templates zonder rewrite. Vervang geleidelijk --clr-* → --md-sys-color-* in nieuwe code. ────────────────────────────────────────────────────────────────── */ :root { --clr-primary: var(--md-sys-color-primary); --clr-primary-hover: var(--md-ref-palette-primary50); --clr-primary-light: var(--md-sys-color-primary-container); --clr-bg: var(--md-sys-color-background); --clr-surface: var(--md-sys-color-surface-container-lowest); --clr-surface-2: var(--md-sys-color-surface-container-low); --clr-text: var(--md-sys-color-on-background); --clr-muted: var(--md-sys-color-on-surface-variant); --clr-border: var(--md-sys-color-outline-variant); --clr-success: var(--md-sys-color-success); --clr-success-light: var(--md-sys-color-success-container); --clr-warning: var(--md-sys-color-warning); --clr-warning-light: var(--md-sys-color-warning-container); --clr-danger: var(--md-sys-color-error); --clr-info: var(--md-sys-color-tertiary); --radius: var(--md-sys-shape-corner-small); --radius-lg: var(--md-sys-shape-corner-medium); --shadow-sm: var(--md-sys-elevation-level1); --shadow: var(--md-sys-elevation-level2); }