/** * Media Wipe — Material Design 3 Design Token Foundation * ------------------------------------------------------- * Pure CSS custom properties. No build tools required. * All component and page styles consume these tokens. * * Spec reference: https://m3.material.io/foundations/design-tokens/overview */ :root { /* ========================================================= COLOR SYSTEM — Light Scheme Primary seed: #1565C0 (Ocean Blue) ========================================================= */ /* --- Primary Role --- */ --md-sys-color-primary: #1565C0; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E4FF; --md-sys-color-on-primary-container: #001B3E; /* --- Primary Fixed (for surfaces that stay regardless of theme) --- */ --md-sys-color-primary-fixed: #D3E4FF; --md-sys-color-primary-fixed-dim: #A4C8FF; --md-sys-color-on-primary-fixed: #001B3E; --md-sys-color-on-primary-fixed-variant: #1A4876; /* --- Secondary Role (Slate Blue — neutral companion) --- */ --md-sys-color-secondary: #535F70; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #D7E3F7; --md-sys-color-on-secondary-container:#101C2B; /* --- Secondary Fixed --- */ --md-sys-color-secondary-fixed: #D7E3F7; --md-sys-color-secondary-fixed-dim: #BBC7DA; --md-sys-color-on-secondary-fixed: #101C2B; --md-sys-color-on-secondary-fixed-variant: #3B4758; /* --- Tertiary Role (Teal — accents, confidence scores) --- */ --md-sys-color-tertiary: #006874; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #97F0FF; --md-sys-color-on-tertiary-container: #001F24; /* --- Tertiary Fixed --- */ --md-sys-color-tertiary-fixed: #97F0FF; --md-sys-color-tertiary-fixed-dim: #4DD8E8; --md-sys-color-on-tertiary-fixed: #001F24; --md-sys-color-on-tertiary-fixed-variant: #004F58; /* --- Error Role (Danger actions, delete-all) --- */ --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; /* --- Surface Roles (backgrounds, cards, sheets) --- */ --md-sys-color-surface: #F8FAFE; --md-sys-color-on-surface: #191C20; --md-sys-color-surface-variant: #E0E2EC; --md-sys-color-on-surface-variant: #43474E; /* Surface container tones (lowest → highest = more emphasis) */ --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F3F5FA; --md-sys-color-surface-container: #EDF0F6; --md-sys-color-surface-container-high: #E7E9EF; --md-sys-color-surface-container-highest: #E1E3E9; /* --- Background Role --- */ --md-sys-color-background: #F8FAFE; --md-sys-color-on-background: #191C20; /* --- Outline Roles (borders, dividers) --- */ --md-sys-color-outline: #74777F; --md-sys-color-outline-variant: #C3C7CF; /* --- Inverse Roles (snackbars, tooltips) --- */ --md-sys-color-inverse-surface: #2D3039; --md-sys-color-inverse-on-surface: #EFF0F7; --md-sys-color-inverse-primary: #A4C8FF; /* --- Scrim & Shadow --- */ --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* --- Semantic Aliases (convenience shortcuts) --- */ --md-color-success: #1B6B3A; --md-color-on-success: #FFFFFF; --md-color-success-container: #A9F5C2; --md-color-on-success-container: #002111; --md-color-warning: #7A5500; --md-color-on-warning: #FFFFFF; --md-color-warning-container: #FFE0A0; --md-color-on-warning-container: #261900; /* ========================================================= TYPOGRAPHY SYSTEM Font stack: WordPress system font (same as WP admin) Scale follows MD3 type scale specification exactly. ========================================================= */ --md-sys-typescale-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Display Large — 57sp / 64 line-height / -0.25 tracking */ --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family); --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-large-weight: 400; /* Display Medium — 45sp / 52 line-height / 0 tracking */ --md-sys-typescale-display-medium-font: var(--md-sys-typescale-font-family); --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-medium-tracking: 0px; --md-sys-typescale-display-medium-weight: 400; /* Display Small — 36sp / 44 line-height / 0 tracking */ --md-sys-typescale-display-small-font: var(--md-sys-typescale-font-family); --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-display-small-tracking: 0px; --md-sys-typescale-display-small-weight: 400; /* Headline Large — 32sp / 40 line-height / 0 tracking */ --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family); --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-large-tracking: 0px; --md-sys-typescale-headline-large-weight: 400; /* Headline Medium — 28sp / 36 line-height / 0 tracking */ --md-sys-typescale-headline-medium-font: var(--md-sys-typescale-font-family); --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-medium-tracking: 0px; --md-sys-typescale-headline-medium-weight: 400; /* Headline Small — 24sp / 32 line-height / 0 tracking */ --md-sys-typescale-headline-small-font: var(--md-sys-typescale-font-family); --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-headline-small-tracking: 0px; --md-sys-typescale-headline-small-weight: 400; /* Title Large — 22sp / 28 line-height / 0 tracking */ --md-sys-typescale-title-large-font: var(--md-sys-typescale-font-family); --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-tracking: 0px; --md-sys-typescale-title-large-weight: 400; /* Title Medium — 16sp / 24 line-height / +0.15 tracking */ --md-sys-typescale-title-medium-font: var(--md-sys-typescale-font-family); --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-tracking: 0.15px; --md-sys-typescale-title-medium-weight: 500; /* Title Small — 14sp / 20 line-height / +0.1 tracking */ --md-sys-typescale-title-small-font: var(--md-sys-typescale-font-family); --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-title-small-tracking: 0.1px; --md-sys-typescale-title-small-weight: 500; /* Body Large — 16sp / 24 line-height / +0.5 tracking */ --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family); --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-tracking: 0.5px; --md-sys-typescale-body-large-weight: 400; /* Body Medium — 14sp / 20 line-height / +0.25 tracking */ --md-sys-typescale-body-medium-font: var(--md-sys-typescale-font-family); --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-tracking: 0.25px; --md-sys-typescale-body-medium-weight: 400; /* Body Small — 12sp / 16 line-height / +0.4 tracking */ --md-sys-typescale-body-small-font: var(--md-sys-typescale-font-family); --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-body-small-tracking: 0.4px; --md-sys-typescale-body-small-weight: 400; /* Label Large — 14sp / 20 line-height / +0.1 tracking */ --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family); --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-large-tracking: 0.1px; --md-sys-typescale-label-large-weight: 500; /* Label Medium — 12sp / 16 line-height / +0.5 tracking */ --md-sys-typescale-label-medium-font: var(--md-sys-typescale-font-family); --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-tracking: 0.5px; --md-sys-typescale-label-medium-weight: 500; /* Label Small — 11sp / 16 line-height / +0.5 tracking */ --md-sys-typescale-label-small-font: var(--md-sys-typescale-font-family); --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line-height: 16px; --md-sys-typescale-label-small-tracking: 0.5px; --md-sys-typescale-label-small-weight: 500; /* ========================================================= SHAPE SYSTEM (corner radius) ========================================================= */ --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; /* Component shape shortcuts */ --md-comp-shape-button: var(--md-sys-shape-corner-full); --md-comp-shape-card: var(--md-sys-shape-corner-medium); --md-comp-shape-dialog: var(--md-sys-shape-corner-extra-large); --md-comp-shape-menu: var(--md-sys-shape-corner-extra-small); --md-comp-shape-chip: var(--md-sys-shape-corner-small); --md-comp-shape-text-field: var(--md-sys-shape-corner-extra-small); --md-comp-shape-snackbar: var(--md-sys-shape-corner-extra-small); --md-comp-shape-badge: var(--md-sys-shape-corner-full); --md-comp-shape-switch: var(--md-sys-shape-corner-full); --md-comp-shape-fab: var(--md-sys-shape-corner-large); /* ========================================================= ELEVATION SYSTEM MD3 uses tonal surface color shifts + box-shadow. Levels 0–5 map to dp values: 0, 1, 3, 6, 8, 12 ========================================================= */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30); /* Tonal surface color overlays per elevation level (added on top of surface color to simulate tonal elevation) */ --md-sys-elevation-tonal-opacity-level1: 0.05; --md-sys-elevation-tonal-opacity-level2: 0.08; --md-sys-elevation-tonal-opacity-level3: 0.11; --md-sys-elevation-tonal-opacity-level4: 0.12; --md-sys-elevation-tonal-opacity-level5: 0.14; /* ========================================================= STATE LAYER OPACITIES Applied as a semi-transparent overlay on components when hovered, focused, pressed, or dragged. ========================================================= */ --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; /* Convenience: pre-composed rgba values for primary state layers */ --md-state-primary-hover: rgba(21, 101, 192, 0.08); --md-state-primary-focus: rgba(21, 101, 192, 0.12); --md-state-primary-pressed: rgba(21, 101, 192, 0.12); --md-state-error-hover: rgba(186, 26, 26, 0.08); --md-state-error-pressed: rgba(186, 26, 26, 0.12); --md-state-on-surface-hover: rgba(25, 28, 32, 0.08); --md-state-on-surface-focus: rgba(25, 28, 32, 0.12); --md-state-on-surface-pressed: rgba(25, 28, 32, 0.12); /* ========================================================= MOTION / ANIMATION TOKENS MD3 uses Material You motion — smooth, purposeful. ========================================================= */ /* Duration */ --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; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-long3: 550ms; --md-sys-motion-duration-long4: 600ms; /* Easing */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decel: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accel: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1); --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /* Shorthand transitions (duration + easing) */ --md-transition-standard: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); --md-transition-emphasized: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decel); --md-transition-quick: var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); /* ========================================================= SPACING SCALE Based on 4dp base unit (MD3 uses 4dp grid) ========================================================= */ --md-spacing-1: 4px; --md-spacing-2: 8px; --md-spacing-3: 12px; --md-spacing-4: 16px; --md-spacing-5: 20px; --md-spacing-6: 24px; --md-spacing-7: 28px; --md-spacing-8: 32px; --md-spacing-9: 36px; --md-spacing-10: 40px; --md-spacing-12: 48px; --md-spacing-16: 64px; --md-spacing-20: 80px; --md-spacing-24: 96px; /* Semantic spacing shortcuts */ --md-spacing-component-padding-sm: var(--md-spacing-3); /* 12px */ --md-spacing-component-padding: var(--md-spacing-4); /* 16px */ --md-spacing-component-padding-lg: var(--md-spacing-6); /* 24px */ --md-spacing-section-gap: var(--md-spacing-6); /* 24px */ --md-spacing-page-padding: var(--md-spacing-6); /* 24px */ /* ========================================================= Z-INDEX SCALE ========================================================= */ --md-z-surface: 0; --md-z-raised: 1; --md-z-dropdown: 100; --md-z-sticky: 200; --md-z-overlay: 300; --md-z-dialog: 400; --md-z-snackbar: 500; --md-z-tooltip: 600; /* ========================================================= ICON SIZE TOKENS ========================================================= */ --md-sys-icon-size-small: 16px; --md-sys-icon-size-medium: 20px; --md-sys-icon-size: 24px; --md-sys-icon-size-large: 40px; --md-sys-icon-size-xl: 48px; /* ========================================================= COMPONENT SIZE TOKENS ========================================================= */ /* Buttons */ --md-comp-button-height: 40px; --md-comp-button-height-sm: 32px; --md-comp-button-padding-h: 24px; --md-comp-button-padding-h-icon: 16px; --md-comp-button-icon-gap: 8px; /* Text Fields */ --md-comp-text-field-height: 56px; --md-comp-text-field-height-sm: 40px; --md-comp-text-field-padding-h: 16px; /* Chips */ --md-comp-chip-height: 32px; --md-comp-chip-padding-h: 12px; /* Cards */ --md-comp-card-padding: 16px; --md-comp-card-padding-lg: 24px; /* Dialog */ --md-comp-dialog-min-width: 280px; --md-comp-dialog-max-width: 560px; --md-comp-dialog-padding: 24px; /* Snackbar */ --md-comp-snackbar-min-width: 344px; --md-comp-snackbar-max-width: 672px; --md-comp-snackbar-padding-v: 14px; --md-comp-snackbar-padding-h: 16px; /* Switch */ --md-comp-switch-track-width: 52px; --md-comp-switch-track-height: 32px; --md-comp-switch-thumb-size-off: 16px; --md-comp-switch-thumb-size-on: 24px; /* Data Table */ --md-comp-table-header-height: 56px; --md-comp-table-row-height: 52px; --md-comp-table-cell-padding-h: 16px; --md-comp-table-cell-padding-v: 0px; } /* ========================================================= TYPOGRAPHY UTILITY CLASSES Quick-apply classes that map directly to the type scale. ========================================================= */ .md-typescale-display-large { font-family: var(--md-sys-typescale-display-large-font); font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line-height); letter-spacing: var(--md-sys-typescale-display-large-tracking); font-weight: var(--md-sys-typescale-display-large-weight); } .md-typescale-display-medium { font-family: var(--md-sys-typescale-display-medium-font); font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); font-weight: var(--md-sys-typescale-display-medium-weight); } .md-typescale-display-small { font-family: var(--md-sys-typescale-display-small-font); font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); letter-spacing: var(--md-sys-typescale-display-small-tracking); font-weight: var(--md-sys-typescale-display-small-weight); } .md-typescale-headline-large { font-family: var(--md-sys-typescale-headline-large-font); font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); font-weight: var(--md-sys-typescale-headline-large-weight); } .md-typescale-headline-medium { font-family: var(--md-sys-typescale-headline-medium-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); } .md-typescale-headline-small { font-family: var(--md-sys-typescale-headline-small-font); font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); letter-spacing: var(--md-sys-typescale-headline-small-tracking); font-weight: var(--md-sys-typescale-headline-small-weight); } .md-typescale-title-large { font-family: var(--md-sys-typescale-title-large-font); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); font-weight: var(--md-sys-typescale-title-large-weight); } .md-typescale-title-medium { font-family: var(--md-sys-typescale-title-medium-font); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: var(--md-sys-typescale-title-medium-weight); } .md-typescale-title-small { font-family: var(--md-sys-typescale-title-small-font); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: var(--md-sys-typescale-title-small-weight); } .md-typescale-body-large { font-family: var(--md-sys-typescale-body-large-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); font-weight: var(--md-sys-typescale-body-large-weight); } .md-typescale-body-medium { font-family: var(--md-sys-typescale-body-medium-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); letter-spacing: var(--md-sys-typescale-body-medium-tracking); font-weight: var(--md-sys-typescale-body-medium-weight); } .md-typescale-body-small { font-family: var(--md-sys-typescale-body-small-font); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); letter-spacing: var(--md-sys-typescale-body-small-tracking); font-weight: var(--md-sys-typescale-body-small-weight); } .md-typescale-label-large { font-family: var(--md-sys-typescale-label-large-font); font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: var(--md-sys-typescale-label-large-weight); } .md-typescale-label-medium { font-family: var(--md-sys-typescale-label-medium-font); font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-weight: var(--md-sys-typescale-label-medium-weight); } .md-typescale-label-small { font-family: var(--md-sys-typescale-label-small-font); font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); letter-spacing: var(--md-sys-typescale-label-small-tracking); font-weight: var(--md-sys-typescale-label-small-weight); }