/* ============================================================================ Marsi — Industrial Steel design tokens Ported 1:1 from the Android app (Color.kt / Type.kt / Shape.kt). Dark is the default; [data-theme="light"] overrides on . ============================================================================ */ :root { /* --- Industrial Steel (dark) --- */ --bg: #0F1419; --surface: #1A2129; --surface-variant: #1A2129; --primary: #4A90E2; --on-primary: #FFFFFF; --on-bg: #E8EDF2; --on-surface: #E8EDF2; --on-surface-variant: #8A9BA8; --outline: #384450; /* Semantic extras (derived, used by status badges / banners) */ --error: #E5484D; --error-bg: #3A2A2A; --error-fg: #E8B4B4; --tertiary: #E2A84A; /* "processing" amber */ /* --- Type scale (sp -> rem at 16px base) --- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-lg: 1.75rem; /* 28 */ --display-lg-lh: 2.25rem; /* 36 */ --headline-md: 1.375rem; /* 22 */ --headline-md-lh:1.875rem; /* 30 */ --title-lg: 1.125rem; /* 18 */ --title-lg-lh: 1.5rem; /* 24 */ --body-lg: 1rem; /* 16 */ --body-lg-lh: 1.5rem; /* 24 */ --body-md: 0.875rem; /* 14 */ --body-md-lh: 1.25rem; /* 20 */ --body-sm: 0.8125rem; /* 13 */ --label-cap: 0.6875rem; /* 11, used for ALL-CAPS field labels */ /* --- Shape (dp -> px). Sharp, industrial. --- */ --r-xs: 2px; --r-sm: 4px; --r-md: 4px; --r-lg: 8px; --r-xl: 12px; /* --- Layout --- */ --drawer-w: 280px; --content-max: 760px; --topbar-h: 56px; --ease: cubic-bezier(0.2, 0, 0, 1); } [data-theme="light"] { --bg: #F4F6F9; --surface: #FFFFFF; --surface-variant: #E8ECF1; --primary: #2F6FB0; --on-primary: #FFFFFF; --on-bg: #101620; --on-surface: #1A2129; --on-surface-variant: #55636E; --outline: #BFC9D4; --error: #C5383C; --error-bg: #F7E4E4; --error-fg: #8A2F2F; --tertiary: #B7791F; }