/*@import url('./main-layout.css');*/ /* Global root variables (extend Lumo) */ :root { /* Brand */ --cc-brand-hue: 210; --cc-brand-sat: 90%; --cc-brand: hsl(var(--cc-brand-hue), var(--cc-brand-sat), 42%); --cc-brand-600: hsl(var(--cc-brand-hue), var(--cc-brand-sat), 36%); --cc-brand-700: hsl(var(--cc-brand-hue), var(--cc-brand-sat), 30%); --cc-accent: hsl(28, 90%, 55%); /* Lumo overrides (primary/success/error) */ --lumo-primary-color: var(--cc-brand); --lumo-primary-color-50pct: hsla(var(--cc-brand-hue), var(--cc-brand-sat), 42%, .5); --lumo-primary-color-10pct: hsla(var(--cc-brand-hue), var(--cc-brand-sat), 42%, .1); --lumo-success-color: hsl(145, 65%, 40%); --lumo-error-color: hsl(355, 75%, 50%); /* Radii & elevation */ --cc-radius-s: 6px; --cc-radius-m: 10px; --cc-radius-l: 14px; --cc-shadow-s: 0 1px 2px rgba(0,0,0,.06); --cc-shadow-m: 0 4px 16px rgba(0,0,0,.08); --cc-shadow-l: 0 10px 30px rgba(0,0,0,.12); /* Layout */ --cc-content-max: 1200px; --cc-bg: #f8fafc; --cc-surface: #ffffff; --cc-border: #e5e7eb; --lumo-app-drawer-z-index: 50000; } vaadin-app-layout::part(drawer) { z-index: 50000 !important; } /* Global reset-ish + base */ html, body { background: var(--cc-bg); } /* Dark mode (toggle by setting theme="dark" on or ) */ :host([theme~="dark"]), [theme~="dark"] { --cc-bg: #0f172a; /* slate-900 */ --cc-surface: #0b1222; /* near-slate with brand tint */ --cc-border: #21304f; --lumo-base-color: var(--cc-surface); --lumo-body-text-color: hsla(0,0%,100%,0.92); --lumo-primary-color: hsl(var(--cc-brand-hue), var(--cc-brand-sat), 52%); --lumo-primary-contrast-color: #0a1020; --lumo-contrast-5pct: rgba(255,255,255,0.06); --lumo-contrast-10pct: rgba(255,255,255,0.1); --lumo-contrast-20pct: rgba(255,255,255,0.2); } /* Import split files */ @import "typography.css"; @import "utilities.css"; /* Global images/icons sanity */ img, svg { max-width: 100%; height: auto; }