/* * Aegis Design System — MD3 token layer * * Three-tier architecture follows the MD3 specification: * 1. Reference tokens — raw palette (md-ref-palette-*) * 2. System/role tokens — semantic roles (md-sys-color-*, md-sys-typescale-*, …) * 3. Component tokens — per-component overrides (md-comp-*); see component files * * Downstream consumers override ONLY the system-tier tokens (or component tokens) * on their :root or a scoped selector. Reference tokens are internal; do not * bind component styles to them directly. * * Dark-mode: wire --md-sys-color-* to the dark-palette variants in a * @media (prefers-color-scheme: dark) or [data-theme="dark"] block. * Token wiring is in place; the toggle UI is out of scope for archetype 1. */ /* ───────────────────────────────────────────────────────────────────────────── §1 Reference palette — Aegis brand (indigo/navy primary, teal tertiary) ───────────────────────────────────────────────────────────────────────── */ :root { --md-ref-palette-primary0: #000000; --md-ref-palette-primary10: #00006e; --md-ref-palette-primary20: #1a1a9c; --md-ref-palette-primary30: #3333b5; --md-ref-palette-primary40: #4f4fcb; --md-ref-palette-primary50: #6b6be2; --md-ref-palette-primary60: #8888f7; --md-ref-palette-primary70: #a5a5ff; --md-ref-palette-primary80: #c0c0ff; --md-ref-palette-primary90: #e1e0ff; --md-ref-palette-primary95: #f1efff; --md-ref-palette-primary99: #fffbff; --md-ref-palette-primary100: #ffffff; --md-ref-palette-secondary0: #000000; --md-ref-palette-secondary10: #1b1c2c; --md-ref-palette-secondary20: #303142; --md-ref-palette-secondary30: #474859; --md-ref-palette-secondary40: #5f5f72; --md-ref-palette-secondary50: #78788b; --md-ref-palette-secondary60: #9292a6; --md-ref-palette-secondary70: #adacc1; --md-ref-palette-secondary80: #c9c7dd; --md-ref-palette-secondary90: #e5e3f9; --md-ref-palette-secondary95: #f4f2ff; --md-ref-palette-secondary99: #fffbff; --md-ref-palette-secondary100: #ffffff; --md-ref-palette-tertiary0: #000000; --md-ref-palette-tertiary10: #002020; --md-ref-palette-tertiary20: #003737; --md-ref-palette-tertiary30: #004f4f; --md-ref-palette-tertiary40: #006969; --md-ref-palette-tertiary50: #008484; --md-ref-palette-tertiary60: #009f9f; --md-ref-palette-tertiary70: #00bbbb; --md-ref-palette-tertiary80: #35d8d8; --md-ref-palette-tertiary90: #89f3f3; --md-ref-palette-tertiary95: #c0fafa; --md-ref-palette-tertiary99: #f0feff; --md-ref-palette-tertiary100: #ffffff; --md-ref-palette-error0: #000000; --md-ref-palette-error10: #410002; --md-ref-palette-error20: #690005; --md-ref-palette-error30: #93000a; --md-ref-palette-error40: #ba1a1a; --md-ref-palette-error50: #de3730; --md-ref-palette-error60: #ff5449; --md-ref-palette-error70: #ff897d; --md-ref-palette-error80: #ffb4ab; --md-ref-palette-error90: #ffdad6; --md-ref-palette-error95: #ffedea; --md-ref-palette-error99: #fffbff; --md-ref-palette-error100: #ffffff; --md-ref-palette-neutral0: #000000; --md-ref-palette-neutral10: #1c1b1f; --md-ref-palette-neutral17: #2b2930; --md-ref-palette-neutral20: #313033; --md-ref-palette-neutral22: #36343b; --md-ref-palette-neutral24: #3b383e; --md-ref-palette-neutral30: #484649; --md-ref-palette-neutral40: #605d62; --md-ref-palette-neutral50: #787579; --md-ref-palette-neutral60: #939094; --md-ref-palette-neutral70: #aeaaae; --md-ref-palette-neutral80: #cac5ca; --md-ref-palette-neutral87: #d9d3d9; --md-ref-palette-neutral90: #e6e1e5; --md-ref-palette-neutral92: #ece6ec; --md-ref-palette-neutral94: #f2ecf2; --md-ref-palette-neutral95: #f4eff4; --md-ref-palette-neutral96: #f7f2fa; --md-ref-palette-neutral98: #fdf8fd; --md-ref-palette-neutral99: #fffbfe; --md-ref-palette-neutral100: #ffffff; --md-ref-palette-neutral-variant0: #000000; --md-ref-palette-neutral-variant10: #1d1a22; --md-ref-palette-neutral-variant20: #322f37; --md-ref-palette-neutral-variant30: #49454f; --md-ref-palette-neutral-variant40: #625b71; --md-ref-palette-neutral-variant50: #7a7289; --md-ref-palette-neutral-variant60: #958da5; --md-ref-palette-neutral-variant70: #b0a7c0; --md-ref-palette-neutral-variant80: #ccc2dc; --md-ref-palette-neutral-variant90: #e8def8; --md-ref-palette-neutral-variant95: #f6edff; --md-ref-palette-neutral-variant99: #fffbff; --md-ref-palette-neutral-variant100: #ffffff; } /* ───────────────────────────────────────────────────────────────────────────── §2 System color roles — light scheme (default) ───────────────────────────────────────────────────────────────────────── */ :root { --md-sys-color-primary: var(--md-ref-palette-primary40); --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-secondary: var(--md-ref-palette-secondary40); --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); --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); --md-sys-color-error: var(--md-ref-palette-error40); --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); --md-sys-color-background: var(--md-ref-palette-neutral99); --md-sys-color-on-background: var(--md-ref-palette-neutral10); --md-sys-color-surface: var(--md-ref-palette-neutral99); --md-sys-color-on-surface: var(--md-ref-palette-neutral10); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92); --md-sys-color-surface-container: var(--md-ref-palette-neutral94); --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96); --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100); --md-sys-color-surface-dim: var(--md-ref-palette-neutral87); --md-sys-color-surface-bright: var(--md-ref-palette-neutral98); --md-sys-color-outline: var(--md-ref-palette-neutral-variant50); --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80); --md-sys-color-shadow: var(--md-ref-palette-neutral0); --md-sys-color-scrim: var(--md-ref-palette-neutral0); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95); --md-sys-color-inverse-primary: var(--md-ref-palette-primary80); } /* Dark scheme — apply to [data-theme="dark"] or @media prefers-color-scheme: dark */ [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-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-error30); --md-sys-color-on-error-container: var(--md-ref-palette-error90); --md-sys-color-background: var(--md-ref-palette-neutral10); --md-sys-color-on-background: var(--md-ref-palette-neutral90); --md-sys-color-surface: var(--md-ref-palette-neutral6, #141218); --md-sys-color-on-surface: var(--md-ref-palette-neutral90); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17); --md-sys-color-surface-container: var(--md-ref-palette-neutral12, #1c1b20); --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10); --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4, #0f0d13); --md-sys-color-surface-dim: var(--md-ref-palette-neutral6, #141218); --md-sys-color-surface-bright: var(--md-ref-palette-neutral24); --md-sys-color-outline: var(--md-ref-palette-neutral-variant60); --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20); --md-sys-color-inverse-primary: var(--md-ref-palette-primary40); } /* ───────────────────────────────────────────────────────────────────────────── §3 System typography scale ───────────────────────────────────────────────────────────────────────── */ :root { --md-sys-typescale-font-family-brand: 'Roboto', 'Inter', system-ui, sans-serif; --md-sys-typescale-font-family-plain: 'Roboto', 'Inter', system-ui, sans-serif; --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-medium-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-tracking: 0px; --md-sys-typescale-display-small-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-display-small-tracking: 0px; --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-tracking: 0px; --md-sys-typescale-headline-medium-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-tracking: 0px; --md-sys-typescale-headline-small-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-tracking: 0px; --md-sys-typescale-title-large-font: var(--md-sys-typescale-font-family-brand); --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-large-tracking: 0px; --md-sys-typescale-title-medium-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-tracking: 0.15px; --md-sys-typescale-title-small-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-tracking: 0.1px; --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.1px; --md-sys-typescale-label-medium-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-tracking: 0.5px; --md-sys-typescale-label-small-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line-height: 16px; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-tracking: 0.5px; --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.5px; --md-sys-typescale-body-medium-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.25px; --md-sys-typescale-body-small-font: var(--md-sys-typescale-font-family-plain); --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.4px; } /* ───────────────────────────────────────────────────────────────────────────── §4 System shape ───────────────────────────────────────────────────────────────────────── */ :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 System elevation (tonal surface + drop shadow per MD3 spec) ───────────────────────────────────────────────────────────────────────── */ :root { --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0px 1px 2px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15); --md-sys-elevation-level2: 0px 1px 2px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15); --md-sys-elevation-level3: 0px 1px 3px rgba(0,0,0,.3), 0px 4px 8px 3px rgba(0,0,0,.15); --md-sys-elevation-level4: 0px 2px 3px rgba(0,0,0,.3), 0px 6px 10px 4px rgba(0,0,0,.15); --md-sys-elevation-level5: 0px 4px 4px rgba(0,0,0,.3), 0px 8px 12px 6px rgba(0,0,0,.15); /* Tonal surface overlay (primary tint at each elevation step) */ --md-sys-elevation-tonal-surface-tint-opacity-level0: 0; --md-sys-elevation-tonal-surface-tint-opacity-level1: 0.05; --md-sys-elevation-tonal-surface-tint-opacity-level2: 0.08; --md-sys-elevation-tonal-surface-tint-opacity-level3: 0.11; --md-sys-elevation-tonal-surface-tint-opacity-level4: 0.12; --md-sys-elevation-tonal-surface-tint-opacity-level5: 0.14; } /* ───────────────────────────────────────────────────────────────────────────── §6 System motion ───────────────────────────────────────────────────────────────────────── */ :root { --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; --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1); --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); } /* ───────────────────────────────────────────────────────────────────────────── §7 State-layer opacity (MD3 interaction model) ───────────────────────────────────────────────────────────────────────── */ :root { --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; --md-sys-state-disabled-container-opacity: 0.12; --md-sys-state-disabled-content-opacity: 0.38; }