/* ================================================================ SALUS — Design tokens Transcribed from Figma "Current Version v0.3.2". One stylesheet, two layers: (1) TOKENS — raw Figma variable values (prefix sl-) (2) SEMANTIC — human-friendly aliases (prefix fg-, bg-, etc.) Uses Roboto from Google Fonts; Material Design Icons via CDN. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); :root { /* ── Primary & accent ─────────────────────────────────────── */ --sl-primary-darkblue: #021E33; --sl-primary-blue: #3391FF; --sl-primary-blue-hover: #1F7FE8; /* observed darken on hover */ --sl-primary-blue-light: #DCECF9; /* status-info fill */ /* ── Neutrals ─────────────────────────────────────────────── */ --sl-neutral-white: #F9FBFD; /* app canvas */ --sl-neutral-pure-white: #FFFFFF; /* cards, dialogs */ --sl-neutral-light-grey: #E5E8EA; /* dividers, chip fill */ --sl-neutral-medium-grey: #6A7781; /* secondary text */ --sl-neutral-dark-grey: #3C3C3C; /* body text on white */ --sl-neutral-black: #1B1B1B; /* chip text, extreme contrast */ --sl-neutral-202931: #202931; /* alt dark text */ /* ── Status ───────────────────────────────────────────────── */ --sl-status-light-green: #E2F9DC; --sl-status-dark-green: #41BF21; --sl-status-light-yellow: #FDF9CD; --sl-status-dark-yellow: #F4DD00; --sl-status-light-red: #FEEBEB; --sl-status-dark-red: #F50002; --sl-status-light-blue: #DCECF9; --sl-status-dark-blue: var(--sl-primary-blue); /* ── Spacing (8-pt grid) ──────────────────────────────────── */ --sl-space-1: 4px; --sl-space-2: 8px; --sl-space-3: 12px; --sl-space-4: 16px; --sl-space-5: 20px; --sl-space-6: 24px; --sl-space-8: 32px; --sl-space-10: 40px; --sl-space-12: 48px; --sl-space-16: 64px; --sl-space-20: 80px; /* ── Radii ────────────────────────────────────────────────── */ --sl-radius-xs: 2px; --sl-radius-sm: 4px; --sl-radius-md: 5px; /* some cards */ --sl-radius-btn: 6px; --sl-radius-lg: 8px; --sl-radius-pill: 32px; --sl-radius-round: 50%; /* ── Shadows ──────────────────────────────────────────────── */ /* Material dp 2 — primary button at rest */ --sl-shadow-button: 0 3px 1px -2px rgba(0,0,0,0.20), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12); /* Material dp 4 — menus */ --sl-shadow-menu: 0 2px 4px -1px rgba(0,0,0,0.20), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); /* Material dp 8 — dialogs */ --sl-shadow-dialog: 0 5px 5px -3px rgba(0,0,0,0.20), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12); /* Material dp 16 — toasts / high lift */ --sl-shadow-toast: 0 8px 10px -5px rgba(0,0,0,0.20), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12); /* ── Type system ──────────────────────────────────────────── */ --sl-font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* Sizes — token names match Figma */ --sl-fs-h1: 54px; /* 3.375rem */ --sl-fs-h2: 36px; --sl-fs-h3: 24px; --sl-fs-lg: 20px; --sl-fs-md: 16px; --sl-fs-sm: 14px; --sl-fs-xs: 12px; --sl-fs-micro: 10px; --sl-fw-regular: 400; --sl-fw-medium: 500; --sl-fw-bold: 700; --sl-lh-tight: 1.0; /* h-scale on most screens */ --sl-lh-title: 1.18; /* h3-h1 where 1.0 feels too tight */ --sl-lh-body: 1.5; /* ── Motion ───────────────────────────────────────────────── */ --sl-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ --sl-duration-fast: 100ms; --sl-duration: 200ms; --sl-duration-slow: 300ms; /* ── Dimensions — product-specific ────────────────────────── */ --sl-sidebar-width: 256px; --sl-topbar-height: 64px; /* ============================================================ SEMANTIC LAYER Use these in components. Swap the right-hand value to reskin. ============================================================ */ /* Surfaces */ --fg-primary: var(--sl-primary-darkblue); /* headings, nav */ --fg-body: var(--sl-neutral-dark-grey); --fg-secondary: var(--sl-neutral-medium-grey); --fg-muted: var(--sl-neutral-medium-grey); --fg-inverted: var(--sl-neutral-white); --fg-accent: var(--sl-primary-blue); --fg-link: var(--sl-primary-blue); --fg-error: var(--sl-status-dark-red); --fg-success: var(--sl-status-dark-green); --fg-warning: #B88A00; /* dark yellow fails on white; use darkened amber */ --bg-canvas: var(--sl-neutral-white); --bg-surface: var(--sl-neutral-pure-white); --bg-nav: var(--sl-primary-darkblue); --bg-hover: rgba(2, 30, 51, 0.04); --bg-pressed: rgba(2, 30, 51, 0.08); --bg-selected: #EEF6FF; /* faint blue wash */ --border-subtle: var(--sl-neutral-light-grey); --border-strong: var(--sl-neutral-medium-grey); --border-focus: var(--sl-primary-blue); /* Component-specific */ --chip-bg: var(--sl-neutral-light-grey); --chip-fg: var(--sl-neutral-black); --input-bg: var(--sl-neutral-pure-white); --input-border: rgba(0, 0, 0, 0.12); --input-label: var(--sl-neutral-medium-grey); /* Status pairs (fill / ink) */ --status-success-bg: var(--sl-status-light-green); --status-success-fg: var(--sl-status-dark-green); --status-warning-bg: var(--sl-status-light-yellow); --status-warning-fg: #8A7F00; --status-error-bg: var(--sl-status-light-red); --status-error-fg: var(--sl-status-dark-red); --status-info-bg: var(--sl-status-light-blue); --status-info-fg: var(--sl-primary-blue); } /* ================================================================== Semantic element styles — use as a baseline reset for SALUS pages ================================================================== */ .sl, .sl-root { font-family: var(--sl-font-sans); color: var(--fg-body); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sl-h1, h1.sl { font: var(--sl-fw-regular) var(--sl-fs-h1)/var(--sl-lh-title) var(--sl-font-sans); color: var(--fg-primary); margin: 0; } .sl-h2, h2.sl { font: var(--sl-fw-regular) var(--sl-fs-h2)/var(--sl-lh-title) var(--sl-font-sans); color: var(--fg-primary); margin: 0; } .sl-h3, h3.sl { font: var(--sl-fw-regular) var(--sl-fs-h3)/var(--sl-lh-title) var(--sl-font-sans); color: var(--fg-primary); margin: 0; } .sl-lg { font: var(--sl-fw-regular) var(--sl-fs-lg)/var(--sl-lh-tight) var(--sl-font-sans); } .sl-md { font: var(--sl-fw-regular) var(--sl-fs-md)/var(--sl-lh-body) var(--sl-font-sans); } .sl-md-medium { font: var(--sl-fw-medium) var(--sl-fs-md)/var(--sl-lh-body) var(--sl-font-sans); } .sl-md-bold { font: var(--sl-fw-bold) var(--sl-fs-md)/var(--sl-lh-body) var(--sl-font-sans); } .sl-sm { font: var(--sl-fw-regular) var(--sl-fs-sm)/var(--sl-lh-body) var(--sl-font-sans); } .sl-sm-medium { font: var(--sl-fw-medium) var(--sl-fs-sm)/var(--sl-lh-body) var(--sl-font-sans); } .sl-xs { font: var(--sl-fw-regular) var(--sl-fs-xs)/var(--sl-lh-body) var(--sl-font-sans); color: var(--fg-secondary); } /* Focus ring — Material-style, 2px offset */ .sl-focus:focus-visible, .sl :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }