/* * Quebeecoo shared design tokens — Material Design 3 (M3 Expressive) * Seed family: teal, amber, and coral (M3 Expressive) * * Canonical source. Copied into each product's frontend/ as m3-tokens.css. * If you edit this file, re-copy it to every products/*/frontend/m3-tokens.css. * * Theme selection: defaults to system preference (prefers-color-scheme), * override with . */ :root { color-scheme: light dark; } :root { /* ---------------- Color — light (default) ---------------- */ --md-sys-color-primary: #006B5B; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #9FF2DA; --md-sys-color-on-primary-container: #00201A; --md-sys-color-secondary: #735C00; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #FFE08A; --md-sys-color-on-secondary-container: #241A00; --md-sys-color-tertiary: #8C4D2E; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFDCCB; --md-sys-color-on-tertiary-container: #351000; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-surface: #F7FAF8; --md-sys-color-on-surface: #181D1B; --md-sys-color-on-surface-variant: #3F4946; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #EFF4F1; --md-sys-color-surface-container: #E8EFEC; --md-sys-color-surface-container-high: #E1E9E5; --md-sys-color-surface-container-highest: #D9E2DE; --md-sys-color-surface-dim: #D6DBD8; --md-sys-color-surface-bright: #F7FAF8; --md-sys-color-outline: #6F7976; --md-sys-color-outline-variant: #BEC9C5; --md-sys-color-inverse-surface: #2D3230; --md-sys-color-inverse-on-surface: #EEF2EF; --md-sys-color-inverse-primary: #7FDCC5; /* ---------------- Typography ---------------- * Brand/display uses a system serif (editorial, warm) instead of the * Roboto/Segoe default stack; plain/UI text stays a clean system sans. * No webfonts are loaded — this pairing is deliberate within what every * OS already ships, not a fallback chain. */ --md-ref-typeface-brand: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Noto Serif', serif; --md-ref-typeface-plain: 'Segoe UI', -apple-system, 'Helvetica Neue', system-ui, sans-serif; --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-size: 3.5625rem; --md-sys-typescale-display-large-line-height: 4rem; --md-sys-typescale-display-large-tracking: 0; --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-size: 2.8125rem; --md-sys-typescale-display-medium-line-height: 3.25rem; --md-sys-typescale-display-medium-tracking: 0; --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-display-small-size: 2.25rem; --md-sys-typescale-display-small-line-height: 2.75rem; --md-sys-typescale-display-small-tracking: 0; --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-size: 2rem; --md-sys-typescale-headline-large-line-height: 2.5rem; --md-sys-typescale-headline-large-tracking: 0; --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-size: 1.75rem; --md-sys-typescale-headline-medium-line-height: 2.25rem; --md-sys-typescale-headline-medium-tracking: 0; --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-size: 1.5rem; --md-sys-typescale-headline-small-line-height: 2rem; --md-sys-typescale-headline-small-tracking: 0; --md-sys-typescale-title-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-large-size: 1.375rem; --md-sys-typescale-title-large-line-height: 1.75rem; --md-sys-typescale-title-large-tracking: 0; --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-size: 1rem; --md-sys-typescale-title-medium-line-height: 1.5rem; --md-sys-typescale-title-medium-tracking: 0.009375rem; --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-size: 0.875rem; --md-sys-typescale-title-small-line-height: 1.25rem; --md-sys-typescale-title-small-tracking: 0.00625rem; --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-size: 1rem; --md-sys-typescale-body-large-line-height: 1.5rem; --md-sys-typescale-body-large-tracking: 0.03125rem; --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-size: 0.875rem; --md-sys-typescale-body-medium-line-height: 1.25rem; --md-sys-typescale-body-medium-tracking: 0.015625rem; --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-size: 0.75rem; --md-sys-typescale-body-small-line-height: 1rem; --md-sys-typescale-body-small-tracking: 0.025rem; --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-size: 0.875rem; --md-sys-typescale-label-large-line-height: 1.25rem; --md-sys-typescale-label-large-tracking: 0.00625rem; --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-size: 0.75rem; --md-sys-typescale-label-medium-line-height: 1rem; --md-sys-typescale-label-medium-tracking: 0.03125rem; --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-line-height: 1rem; --md-sys-typescale-label-small-tracking: 0.03125rem; /* ---------------- Shape ---------------- */ --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-large-increased: 20px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-extra-large-increased: 32px; --md-sys-shape-corner-extra-extra-large: 48px; --md-sys-shape-corner-full: 9999px; /* ---------------- Elevation ---------------- * Shadows are tinted with the primary hue instead of neutral rgba(16,24,24,…) — * a warm cast under every raised surface, not a generic drop-shadow grey. */ --qbc-shadow-tint: color-mix(in srgb, var(--md-sys-color-primary) 22%, #101418); --md-sys-elevation-1: 0 1px 2px color-mix(in srgb, var(--qbc-shadow-tint) 18%, transparent), 0 2px 10px color-mix(in srgb, var(--qbc-shadow-tint) 10%, transparent); --md-sys-elevation-2: 0 2px 6px color-mix(in srgb, var(--qbc-shadow-tint) 20%, transparent), 0 8px 22px color-mix(in srgb, var(--qbc-shadow-tint) 12%, transparent); --md-sys-elevation-3: 0 6px 14px color-mix(in srgb, var(--qbc-shadow-tint) 22%, transparent), 0 18px 38px color-mix(in srgb, var(--qbc-shadow-tint) 14%, transparent); --md-sys-elevation-4: 0 10px 22px color-mix(in srgb, var(--qbc-shadow-tint) 24%, transparent), 0 24px 48px color-mix(in srgb, var(--qbc-shadow-tint) 16%, transparent); --md-sys-elevation-5: 0 14px 30px color-mix(in srgb, var(--qbc-shadow-tint) 26%, transparent), 0 32px 64px color-mix(in srgb, var(--qbc-shadow-tint) 18%, transparent); /* ---------------- Motion ---------------- */ --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); --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-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; /* ---------------- Spacing (4dp base grid) ---------------- */ --md-sys-spacing-xxs: 4px; --md-sys-spacing-xs: 8px; --md-sys-spacing-sm: 12px; --md-sys-spacing-md: 16px; --md-sys-spacing-lg: 24px; --md-sys-spacing-xl: 32px; --md-sys-spacing-xxl: 48px; --qbc-expressive-tint-primary: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); --qbc-expressive-tint-secondary: color-mix(in srgb, var(--md-sys-color-secondary) 18%, transparent); --qbc-expressive-tint-tertiary: color-mix(in srgb, var(--md-sys-color-tertiary) 16%, transparent); --qbc-expressive-focus-ring: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); --qbc-expressive-panel-shadow: 0 20px 60px color-mix(in srgb, var(--qbc-shadow-tint) 24%, transparent), var(--md-sys-elevation-2); /* Signature texture: a 2% grain, laid over raised surfaces via .qbc-grain (see m3-shell.css). Paired with the warm shadow tint above — the two together are the anchor-internal move that keeps this from reading as a stock Material palette swap. */ --qbc-grain-texture: url("data:image/svg+xml;utf8,"); } /* ---------------- Color — dark ---------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-sys-color-primary: #7FDCC5; --md-sys-color-on-primary: #00382F; --md-sys-color-primary-container: #005044; --md-sys-color-on-primary-container: #A0F2D9; --md-sys-color-secondary: #E8C86F; --md-sys-color-on-secondary: #3D2F00; --md-sys-color-secondary-container: #584400; --md-sys-color-on-secondary-container: #FFE28D; --md-sys-color-tertiary: #FFB59A; --md-sys-color-on-tertiary: #552100; --md-sys-color-tertiary-container: #733600; --md-sys-color-on-tertiary-container: #FFDCCB; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #101418; --md-sys-color-on-surface: #E4E8E5; --md-sys-color-on-surface-variant: #BFC9C5; --md-sys-color-surface-container-lowest: #090D10; --md-sys-color-surface-container-low: #151A1E; --md-sys-color-surface-container: #1A2025; --md-sys-color-surface-container-high: #20272D; --md-sys-color-surface-container-highest: #29333A; --md-sys-color-surface-dim: #101418; --md-sys-color-surface-bright: #353E45; --md-sys-color-outline: #899490; --md-sys-color-outline-variant: #3F4A46; --md-sys-color-inverse-surface: #E4E8E5; --md-sys-color-inverse-on-surface: #2D3230; --md-sys-color-inverse-primary: #006B5B; } } :root[data-theme="dark"] { --md-sys-color-primary: #7FDCC5; --md-sys-color-on-primary: #00382F; --md-sys-color-primary-container: #005044; --md-sys-color-on-primary-container: #A0F2D9; --md-sys-color-secondary: #E8C86F; --md-sys-color-on-secondary: #3D2F00; --md-sys-color-secondary-container: #584400; --md-sys-color-on-secondary-container: #FFE28D; --md-sys-color-tertiary: #FFB59A; --md-sys-color-on-tertiary: #552100; --md-sys-color-tertiary-container: #733600; --md-sys-color-on-tertiary-container: #FFDCCB; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #101418; --md-sys-color-on-surface: #E4E8E5; --md-sys-color-on-surface-variant: #BFC9C5; --md-sys-color-surface-container-lowest: #090D10; --md-sys-color-surface-container-low: #151A1E; --md-sys-color-surface-container: #1A2025; --md-sys-color-surface-container-high: #20272D; --md-sys-color-surface-container-highest: #29333A; --md-sys-color-surface-dim: #101418; --md-sys-color-surface-bright: #353E45; --md-sys-color-outline: #899490; --md-sys-color-outline-variant: #3F4A46; --md-sys-color-inverse-surface: #E4E8E5; --md-sys-color-inverse-on-surface: #2D3230; --md-sys-color-inverse-primary: #006B5B; }