/* ============================================================ Jolu Design System — M3 Design Tokens Extracted from material-web v0.192 source Custom palette: Cobalt Blue primary, Purple secondary ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root { /* ── Reference Palette: Cobalt Blue Primary ── */ --md-ref-palette-primary0: #000; --md-ref-palette-primary10: #001849; --md-ref-palette-primary20: #002d6e; --md-ref-palette-primary30: #00429a; --md-ref-palette-primary40: #1a5fc6; --md-ref-palette-primary50: #4079e1; --md-ref-palette-primary60: #6193fc; --md-ref-palette-primary70: #8eaeff; --md-ref-palette-primary80: #b0c6ff; --md-ref-palette-primary90: #d9e2ff; --md-ref-palette-primary95: #edf0ff; --md-ref-palette-primary99: #fefbff; --md-ref-palette-primary100: #fff; /* ── Reference Palette: Purple Secondary ── */ --md-ref-palette-secondary0: #000; --md-ref-palette-secondary10: #1d192b; --md-ref-palette-secondary20: #332d41; --md-ref-palette-secondary30: #4a4458; --md-ref-palette-secondary40: #625b71; --md-ref-palette-secondary50: #7a7289; --md-ref-palette-secondary60: #958da5; --md-ref-palette-secondary70: #b0a7c0; --md-ref-palette-secondary80: #ccc2dc; --md-ref-palette-secondary90: #e8def8; --md-ref-palette-secondary95: #f6edff; --md-ref-palette-secondary99: #fffbfe; --md-ref-palette-secondary100: #fff; /* ── Reference Palette: Tertiary (Rose/Pink from M3 baseline) ── */ --md-ref-palette-tertiary0: #000; --md-ref-palette-tertiary10: #31111d; --md-ref-palette-tertiary20: #492532; --md-ref-palette-tertiary30: #633b48; --md-ref-palette-tertiary40: #7d5260; --md-ref-palette-tertiary50: #986977; --md-ref-palette-tertiary60: #b58392; --md-ref-palette-tertiary70: #d29dac; --md-ref-palette-tertiary80: #efb8c8; --md-ref-palette-tertiary90: #ffd8e4; --md-ref-palette-tertiary95: #ffecf1; --md-ref-palette-tertiary99: #fffbfa; --md-ref-palette-tertiary100: #fff; /* ── Reference Palette: Error ── */ --md-ref-palette-error0: #000; --md-ref-palette-error10: #410e0b; --md-ref-palette-error20: #601410; --md-ref-palette-error30: #8c1d18; --md-ref-palette-error40: #b3261e; --md-ref-palette-error50: #dc362e; --md-ref-palette-error60: #e46962; --md-ref-palette-error70: #ec928e; --md-ref-palette-error80: #f2b8b5; --md-ref-palette-error90: #f9dedc; --md-ref-palette-error95: #fceeee; --md-ref-palette-error99: #fffbf9; --md-ref-palette-error100: #fff; /* ── Reference Palette: Neutral (adjusted for cleaner light backgrounds) ── */ --md-ref-palette-neutral0: #000; --md-ref-palette-neutral4: #0f0d13; --md-ref-palette-neutral6: #141218; --md-ref-palette-neutral10: #1d1b20; --md-ref-palette-neutral12: #211f26; --md-ref-palette-neutral17: #2b2930; --md-ref-palette-neutral20: #322f35; --md-ref-palette-neutral22: #36343b; --md-ref-palette-neutral24: #3b383e; --md-ref-palette-neutral30: #48464c; --md-ref-palette-neutral40: #605d64; --md-ref-palette-neutral50: #79767d; --md-ref-palette-neutral60: #938f96; --md-ref-palette-neutral70: #aea9b1; --md-ref-palette-neutral80: #cac5cd; --md-ref-palette-neutral87: #e0dce3; --md-ref-palette-neutral90: #e9e5ed; --md-ref-palette-neutral92: #efecf2; --md-ref-palette-neutral94: #f5f3f7; --md-ref-palette-neutral95: #f7f5f9; --md-ref-palette-neutral96: #f9f8fb; --md-ref-palette-neutral98: #fdfcff; --md-ref-palette-neutral99: #fefeff; --md-ref-palette-neutral100: #fff; /* ── Reference Palette: Neutral Variant ── */ --md-ref-palette-neutral-variant0: #000; --md-ref-palette-neutral-variant10: #1d1a22; --md-ref-palette-neutral-variant20: #322f37; --md-ref-palette-neutral-variant30: #49454f; --md-ref-palette-neutral-variant40: #605d66; --md-ref-palette-neutral-variant50: #79747e; --md-ref-palette-neutral-variant60: #938f99; --md-ref-palette-neutral-variant70: #aea9b4; --md-ref-palette-neutral-variant80: #cac4d0; --md-ref-palette-neutral-variant90: #e7e0ec; --md-ref-palette-neutral-variant95: #f5eefa; --md-ref-palette-neutral-variant99: #fffbfe; --md-ref-palette-neutral-variant100: #fff; --md-ref-palette-black: #000; --md-ref-palette-white: #fff; /* ── System Color Tokens: Light Theme ── Mapped using M3 v0.192 light scheme formulas */ --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-primary-fixed: var(--md-ref-palette-primary90); --md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80); --md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10); --md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30); --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-secondary-fixed: var(--md-ref-palette-secondary90); --md-sys-color-secondary-fixed-dim: var(--md-ref-palette-secondary80); --md-sys-color-on-secondary-fixed: var(--md-ref-palette-secondary10); --md-sys-color-on-secondary-fixed-variant: var(--md-ref-palette-secondary30); --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-tertiary-fixed: var(--md-ref-palette-tertiary90); --md-sys-color-tertiary-fixed-dim: var(--md-ref-palette-tertiary80); --md-sys-color-on-tertiary-fixed: var(--md-ref-palette-tertiary10); --md-sys-color-on-tertiary-fixed-variant: var(--md-ref-palette-tertiary30); --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-neutral98); --md-sys-color-on-background: var(--md-ref-palette-neutral10); --md-sys-color-surface: var(--md-ref-palette-neutral98); --md-sys-color-on-surface: var(--md-ref-palette-neutral10); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90); --md-sys-color-surface-dim: var(--md-ref-palette-neutral87); --md-sys-color-surface-bright: var(--md-ref-palette-neutral98); --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100); --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96); --md-sys-color-surface-container: var(--md-ref-palette-neutral94); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90); --md-sys-color-surface-tint: var(--md-ref-palette-primary40); --md-sys-color-outline: var(--md-ref-palette-neutral-variant50); --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80); --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); --md-sys-color-shadow: var(--md-ref-palette-neutral0); --md-sys-color-scrim: var(--md-ref-palette-neutral0); /* ── Typescale ── */ --md-ref-typeface-brand: 'Google Sans', Roboto, sans-serif; --md-ref-typeface-plain: Roboto, sans-serif; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-medium: 500; --md-ref-typeface-weight-bold: 700; --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: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-large-tracking: -0.015625rem; --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: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-medium-tracking: 0; --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: var(--md-ref-typeface-weight-regular); --md-sys-typescale-display-small-tracking: 0; --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-medium); --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: var(--md-ref-typeface-weight-medium); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-regular); --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: var(--md-ref-typeface-weight-medium); --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: var(--md-ref-typeface-weight-medium); --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: var(--md-ref-typeface-weight-medium); /* ── Shape ── (from M3 v0.192) */ --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; /* ── Elevation ── */ --md-sys-elevation-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0); --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15); --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15); --md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 4px 8px 3px rgba(0, 0, 0, .15); --md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 6px 10px 4px rgba(0, 0, 0, .15); --md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, .3), 0px 8px 12px 6px rgba(0, 0, 0, .15); /* ── Motion ── (from M3 v0.192) */ --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-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --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-linear: cubic-bezier(0, 0, 1, 1); /* ── 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; } /* ── Dark Theme ── Using M3 v0.192 dark scheme palette mappings */ [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-primary-fixed: var(--md-ref-palette-primary90); --md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80); --md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10); --md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30); --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-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-on-surface-variant: var(--md-ref-palette-neutral-variant80); --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30); --md-sys-color-surface-dim: var(--md-ref-palette-neutral6); --md-sys-color-surface-bright: var(--md-ref-palette-neutral24); --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-surface-tint: var(--md-ref-palette-primary80); --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); --md-sys-color-shadow: var(--md-ref-palette-neutral0); --md-sys-color-scrim: var(--md-ref-palette-neutral0); } /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--md-ref-typeface-plain); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); font-weight: var(--md-sys-typescale-body-large-weight); color: var(--md-sys-color-on-background); background: var(--md-sys-color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }