/* Material Design 3 system tokens. Seeded from BPD plum #5F2D6C. Consumed by Material Web Components automatically (each `` element reads --md-sys-* vars from :root). Custom CSS in this app should also reference --md-sys-* directly, not legacy aliases. */ @font-face { font-family: 'Roboto Flex'; src: url('/static/fonts/RobotoFlex.woff2') format('woff2-variations'), url('/static/fonts/RobotoFlex.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; } :root { /* ===== Reference: typeface ===== */ --md-ref-typeface-plain: 'Roboto Flex', system-ui, -apple-system, sans-serif; --md-ref-typeface-brand: 'Roboto Flex', system-ui, -apple-system, sans-serif; /* ===== Color — light scheme (plum seed) ===== */ --md-sys-color-primary: rgb(99 46 116); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(244 217 255); --md-sys-color-on-primary-container: rgb(45 9 64); --md-sys-color-inverse-primary: rgb(220 184 240); --md-sys-color-secondary: rgb(105 89 110); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(241 220 246); --md-sys-color-on-secondary-container: rgb(36 22 39); --md-sys-color-tertiary: rgb(128 81 88); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(255 217 220); --md-sys-color-on-tertiary-container: rgb(50 16 22); --md-sys-color-error: rgb(179 38 30); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(249 222 220); --md-sys-color-on-error-container: rgb(65 14 11); --md-sys-color-background: rgb(255 247 254); --md-sys-color-on-background: rgb(29 26 30); --md-sys-color-surface: rgb(255 247 254); --md-sys-color-on-surface: rgb(29 26 30); --md-sys-color-surface-variant: rgb(235 222 238); --md-sys-color-on-surface-variant: rgb(75 69 80); --md-sys-color-inverse-surface: rgb(50 47 53); --md-sys-color-inverse-on-surface: rgb(245 238 245); --md-sys-color-surface-tint: var(--md-sys-color-primary); --md-sys-color-surface-dim: rgb(224 215 224); --md-sys-color-surface-bright: rgb(255 247 254); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(250 240 248); --md-sys-color-surface-container: rgb(245 234 244); --md-sys-color-surface-container-high: rgb(239 228 238); --md-sys-color-surface-container-highest: rgb(233 222 232); --md-sys-color-outline: rgb(124 117 127); --md-sys-color-outline-variant: rgb(205 196 207); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-shadow: rgb(0 0 0); /* ===== Typescale ===== */ --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: 3.5625rem; --md-sys-typescale-display-large-line-height: 4rem; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-medium-size: 2.8125rem; --md-sys-typescale-display-medium-line-height: 3.25rem; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-size: 2.25rem; --md-sys-typescale-display-small-line-height: 2.75rem; --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-large-size: 2rem; --md-sys-typescale-headline-large-line-height: 2.5rem; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-size: 1.75rem; --md-sys-typescale-headline-medium-line-height: 2.25rem; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-size: 1.5rem; --md-sys-typescale-headline-small-line-height: 2rem; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-large-size: 1.375rem; --md-sys-typescale-title-large-line-height: 1.75rem; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-medium-size: 1rem; --md-sys-typescale-title-medium-line-height: 1.5rem; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-small-size: 0.875rem; --md-sys-typescale-title-small-line-height: 1.25rem; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-size: 1rem; --md-sys-typescale-body-large-line-height: 1.5rem; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-size: 0.875rem; --md-sys-typescale-body-medium-line-height: 1.25rem; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-size: 0.75rem; --md-sys-typescale-body-small-line-height: 1rem; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-large-size: 0.875rem; --md-sys-typescale-label-large-line-height: 1.25rem; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-medium-size: 0.75rem; --md-sys-typescale-label-medium-line-height: 1rem; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-line-height: 1rem; --md-sys-typescale-label-small-weight: 500; /* ===== Shape ===== */ --md-sys-shape-corner-none: 0; --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; /* Expressive radius scale (iteration 17). The floating look uses a slightly larger, softer ladder than the base MD3 corners. New shared components reference these; existing --md-sys-shape-corner-* callers are untouched. */ --r-xs: 10px; /* inputs, small controls */ --r-sm: 14px; /* table hover rows, snackbar */ --r-md: 20px; /* nested rows, dropzones */ --r-lg: 28px; /* floating cards, dialogs */ --r-full: 9999px; /* pills, chips, icon buttons */ /* ===== Elevation (box-shadow stacks) ===== Iteration 17: levels 1-3 are now soft, plum-tinted two-layer diffuse shadows (the "floating" look) instead of hard black drop shadows. Cards lift via shadow + surface tone, never borders. --elev-1/2/3 are the canonical names for new components; the --md-sys-elevation-level* aliases keep existing callers (and Material Web Components) working. */ --elev-1: 0 1px 2px rgba(70,30,60,0.05), 0 6px 16px rgba(70,30,60,0.06); --elev-2: 0 2px 6px rgba(70,30,60,0.07), 0 16px 36px rgba(70,30,60,0.10); --elev-3: 0 8px 28px rgba(40,20,38,0.22), 0 2px 8px rgba(40,20,38,0.14); --md-sys-elevation-level0: none; --md-sys-elevation-level1: var(--elev-1); --md-sys-elevation-level2: var(--elev-2); --md-sys-elevation-level3: var(--elev-3); --md-sys-elevation-level4: 0 2px 3px 0 rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15); --md-sys-elevation-level5: 0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15); /* ===== State-layer opacities ===== */ --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.12; --md-sys-state-pressed-state-layer-opacity: 0.12; --md-sys-state-dragged-state-layer-opacity: 0.16; /* ===== Motion ===== */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* Iteration 17: emphasized easing is now a springy/overshoot curve, used by the sliding tab pill + dialog entrance. */ --md-sys-motion-easing-emphasized: cubic-bezier(0.34, 1.2, 0.64, 1); /* Short aliases for new components. */ --ease: var(--md-sys-motion-easing-standard); --ease-emph: var(--md-sys-motion-easing-emphasized); --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-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; /* ===== Layout ===== */ --container-max: 1180px; /* Global page background glow (iteration 17). Two faint plum/pink radial gradients layered on the body (fixed attachment). Applied in base.css. */ --bg-glow: radial-gradient(1200px 600px at 80% -5%, rgba(99,46,116,0.10), transparent 60%), radial-gradient(900px 500px at -5% 110%, rgba(229,138,180,0.10), transparent 55%); /* ===== Column view sizes ===== Consumed by table cells in the contact list. Each cell sets `--col-width` to one of these, then a `.col-sized` rule reads it. Picked values reflect typical contact list content widths; adjust here without touching templates. */ --col-width-sm: 120px; --col-width-md: 200px; --col-width-lg: 320px; } /* ===== Dark palette — SCAFFOLD ONLY (iteration 17) ===== Inert until a theme toggle sets [data-theme="dark"] on . No toggle is wired this iteration (deferred); this block exists so enabling dark mode later is a wiring job, not a re-tokenize. Values mirror the iteration-17 mockup's dark scheme, mapped onto the --md-sys-* token names the app uses. */ [data-theme="dark"] { --md-sys-color-primary: rgb(239 176 229); --md-sys-color-on-primary: rgb(84 21 87); --md-sys-color-primary-container: rgb(111 42 115); --md-sys-color-on-primary-container: rgb(255 215 245); --md-sys-color-inverse-primary: rgb(139 65 143); --md-sys-color-secondary-container: rgb(86 64 79); --md-sys-color-on-secondary-container: rgb(248 218 238); --md-sys-color-tertiary-container: rgb(101 57 43); --md-sys-color-on-tertiary-container: rgb(255 219 207); --md-sys-color-error: rgb(255 180 171); --md-sys-color-on-error: rgb(105 0 5); --md-sys-color-error-container: rgb(147 0 10); --md-sys-color-on-error-container: rgb(255 218 214); --md-sys-color-background: rgb(21 16 20); --md-sys-color-on-background: rgb(234 224 230); --md-sys-color-surface: rgb(21 16 20); --md-sys-color-on-surface: rgb(234 224 230); --md-sys-color-on-surface-variant: rgb(210 194 203); --md-sys-color-inverse-surface: rgb(234 224 230); --md-sys-color-inverse-on-surface: rgb(53 47 51); --md-sys-color-surface-container-lowest: rgb(18 12 18); --md-sys-color-surface-container-low: rgb(31 26 31); --md-sys-color-surface-container: rgb(36 30 36); --md-sys-color-surface-container-high: rgb(47 40 47); --md-sys-color-surface-container-highest: rgb(58 50 58); --md-sys-color-outline: rgb(155 141 149); --md-sys-color-outline-variant: rgb(59 52 58); --md-sys-color-scrim: rgb(0 0 0); /* Dark elevation: shadows go black + deeper to read on dark surfaces. */ --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 6px 18px rgba(0,0,0,0.30); --elev-2: 0 2px 6px rgba(0,0,0,0.45), 0 18px 40px rgba(0,0,0,0.40); --elev-3: 0 10px 34px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.40); --bg-glow: radial-gradient(1200px 600px at 80% -5%, rgba(239,176,229,0.10), transparent 60%), radial-gradient(900px 500px at -5% 110%, rgba(139,65,143,0.16), transparent 55%); }