/* ============================================================================= Material Design 3 — system tokens (CSS custom properties) Drop-in starter for Hornback IMS and future apps. - Themed to Hornback's palette: PRIMARY = orange #F97316, SECONDARY = blue #1E40AF. - Color roles are a coherent STARTER scheme (refine exact tones with Google's official theme builder if you need pixel-perfect tonal palettes). - Motion + shape values are VERIFIED from m3.material.io (2026-06-08). - Type scale = canonical M3 baseline. - This file ALIASES onto your existing vars where possible so nothing breaks. Usage: load AFTER your app.css. Reference roles as var(--md-sys-color-primary), etc. Dark mode: set . ============================================================================= */ :root { /* ---- COLOR ROLES (light) ---------------------------------------------------- Hornback V4 aliasing: where V4's app.css already defines an equivalent var (verified 2026-06-08 against app.css), reference it via var() so palette tweaks have one source of truth. Hex literals only for roles V4 lacks. */ --md-sys-color-primary: var(--brand-orange); /* #F97316 */ --md-sys-color-on-primary: #2A1500; /* dark ink on orange — white fails 4.5:1 */ --md-sys-color-primary-container: var(--orange-100); /* #FFEDD5 */ --md-sys-color-on-primary-container: #7A3B00; --md-sys-color-secondary: var(--accent); /* #1E40AF */ --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: var(--accent-soft); /* #DBEAFE */ --md-sys-color-on-secondary-container: #11295C; --md-sys-color-tertiary: var(--success); /* #15803D */ --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: var(--success-soft); /* #DCFCE7 */ --md-sys-color-on-tertiary-container: #06351A; --md-sys-color-error: var(--danger); /* #B91C1C */ --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: var(--danger-soft); /* #FEE2E2 */ --md-sys-color-on-error-container: #5A0B0B; --md-sys-color-surface: var(--paper); /* #FBFAF7 */ --md-sys-color-on-surface: var(--ink-900); /* #11181F */ --md-sys-color-on-surface-variant: var(--ink-600); /* #4A5663 */ --md-sys-color-surface-dim: #E4E1DB; --md-sys-color-surface-bright: var(--paper); --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: var(--ink-50); /* #F6F8FA */ --md-sys-color-surface-container: var(--canvas); /* #F2EFEA */ --md-sys-color-surface-container-high: var(--ink-100); /* #EEF1F4 */ --md-sys-color-surface-container-highest: var(--ink-150); /* #E4E8ED */ --md-sys-color-outline: var(--ink-400); /* #8E99A8 — decorative / 3:1 large-text only */ --md-sys-color-outline-variant: var(--ink-200); /* #D6DCE3 — dividers */ --md-sys-color-inverse-surface: var(--ink-800); /* #1B232C — snackbar bg */ --md-sys-color-inverse-on-surface: var(--ink-50); /* #F6F8FA */ --md-sys-color-inverse-primary: #FFB77C; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #0F172A; /* slate-toned, matches shadow alpha */ /* ---- TYPE SCALE (canonical M3 baseline; swap font to your stack) -------- */ --md-ref-typeface-brand: 'Antonio', 'Hanken Grotesk', system-ui, sans-serif; --md-ref-typeface-plain: 'Hanken Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif; --md-ref-typeface-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --md-sys-typescale-display-large: 400 57px/64px var(--md-ref-typeface-brand); --md-sys-typescale-display-medium: 400 45px/52px var(--md-ref-typeface-brand); --md-sys-typescale-display-small: 400 36px/44px var(--md-ref-typeface-brand); --md-sys-typescale-headline-large: 400 32px/40px var(--md-ref-typeface-plain); --md-sys-typescale-headline-medium: 400 28px/36px var(--md-ref-typeface-plain); --md-sys-typescale-headline-small: 400 24px/32px var(--md-ref-typeface-plain); --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface-plain); --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface-plain); --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface-plain); --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain); --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain); --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain); --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain); --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain); --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain); /* ---- SHAPE (corner radius scale — verified) ---------------------------- */ --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-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 (level -> shadow; verified dp heights) ------------------- */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px rgba(15,23,42,.30), 0 1px 3px 1px rgba(15,23,42,.15); --md-sys-elevation-level2: 0 1px 2px rgba(15,23,42,.30), 0 2px 6px 2px rgba(15,23,42,.15); --md-sys-elevation-level3: 0 4px 8px 3px rgba(15,23,42,.15), 0 1px 3px rgba(15,23,42,.30); --md-sys-elevation-level4: 0 6px 10px 4px rgba(15,23,42,.15), 0 2px 3px rgba(15,23,42,.30); --md-sys-elevation-level5: 0 8px 12px 6px rgba(15,23,42,.15), 0 4px 4px rgba(15,23,42,.30); /* ---- MOTION (verified CSS easing + duration tokens) -------------------- */ --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-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-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; /* ---- SPACING (4dp grid; aligns with V4 --space-*) ---------------------- */ --md-sys-spacing-1: 4px; --md-sys-spacing-2: 8px; --md-sys-spacing-3: 12px; --md-sys-spacing-4: 16px; --md-sys-spacing-5: 20px; --md-sys-spacing-6: 24px; --md-sys-spacing-8: 32px; --md-sys-spacing-10: 40px; --md-sys-spacing-12: 48px; /* ---- STATE LAYER opacities --------------------------------------------- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.10; --md-sys-state-pressed-opacity: 0.10; --md-sys-state-dragged-opacity: 0.16; } /* ===== DARK THEME — swap only the color roles ============================= */ [data-theme="dark"] { --md-sys-color-primary: #FFB77C; --md-sys-color-on-primary: #4A2400; --md-sys-color-primary-container: #6A3500; --md-sys-color-on-primary-container: #FFEDD5; --md-sys-color-secondary: #AFC6FF; --md-sys-color-on-secondary: #00214E; --md-sys-color-secondary-container: #143A8C; --md-sys-color-on-secondary-container: #DBEAFE; --md-sys-color-tertiary: #7FD99A; --md-sys-color-on-tertiary: #00391A; --md-sys-color-tertiary-container: #0C5A2C; --md-sys-color-on-tertiary-container: #DCFCE7; --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: #0F141A; --md-sys-color-on-surface: #E2E2E5; --md-sys-color-on-surface-variant: #B5BDC8; --md-sys-color-surface-dim: #0F141A; --md-sys-color-surface-bright: #353A40; --md-sys-color-surface-container-lowest: #0A0F14; --md-sys-color-surface-container-low: #171C22; --md-sys-color-surface-container: #1B2026; --md-sys-color-surface-container-high: #252A31; --md-sys-color-surface-container-highest: #30353C; --md-sys-color-outline: #8E99A8; --md-sys-color-outline-variant: #404952; --md-sys-color-inverse-surface: #E2E2E5; --md-sys-color-inverse-on-surface: #2E3137; --md-sys-color-inverse-primary: #F97316; } /* ===== Optional helper classes ========================================== */ .md-elevation-1 { box-shadow: var(--md-sys-elevation-level1); } .md-elevation-2 { box-shadow: var(--md-sys-elevation-level2); } .md-elevation-3 { box-shadow: var(--md-sys-elevation-level3); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }