/* ========================================================================= Loggicare Design System — tokens Colors, type, spacing, radii, shadows, motion. Import this file at the root of any Loggicare-branded surface. ========================================================================= */ /* ---------- Webfonts ---------- */ /* Oswald and Inter are loaded via Google Fonts CDN in the HTML . The font file is also included in assets/fonts/ for offline fallback — add an @font-face block here pointing to it if you need fully offline use. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* ===================================================================== COLORS ===================================================================== */ /* Primary — institutional blue */ --color-blue-50: #F4F8FC; --color-blue-100: #EAF1F9; --color-blue-200: #D1DFEF; --color-blue-300: #A6BFDC; --color-blue-400: #7298C5; --color-blue-500: #2E68A8; --color-blue-600: #1E5BA8; /* primary */ --color-blue-700: #174A8B; --color-blue-800: #103968; --color-blue-900: #0B2945; /* Neutrals — cool slate */ --color-slate-50: #FCFCFD; --color-slate-100: #F6F7F9; --color-slate-200: #EEF0F3; --color-slate-300: #E6E8EC; --color-slate-400: #CBD0D8; --color-slate-500: #98A0AD; --color-slate-600: #6B7280; --color-slate-700: #475467; --color-slate-800: #2D3748; --color-slate-900: #1A2233; --color-slate-1000: #0F172A; /* Semantic — desaturated, never neon */ --color-success-50: #ECF5EF; --color-success-500: #3F8F5F; /* on-time, delivered */ --color-success-700: #2E6B47; --color-warning-50: #FAF1DD; --color-warning-500: #C68A1E; /* approaching SLA */ --color-warning-700: #936618; --color-danger-50: #F8E5E5; --color-danger-500: #B83A3A; /* breached, canceled */ --color-danger-700: #8A2C2C; --color-info-50: #E8EEF7; --color-info-500: #3B6CB0; /* informational, links in dense UI */ --color-info-700: #2A5188; /* Semantic role tokens (use these in components, not raw scales) */ --color-bg: var(--color-slate-50); --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-sunken: var(--color-slate-100); --color-overlay: rgba(15, 23, 42, 0.40); --color-border: var(--color-slate-300); --color-border-strong: var(--color-slate-400); --color-border-subtle: var(--color-slate-200); --color-fg: var(--color-slate-1000); /* primary text */ --color-fg-muted: var(--color-slate-700); /* secondary text */ --color-fg-subtle: var(--color-slate-600); /* tertiary, captions */ --color-fg-disabled: var(--color-slate-500); --color-fg-on-primary: #FFFFFF; --color-primary: var(--color-blue-600); --color-primary-hover: var(--color-blue-500); --color-primary-press: var(--color-blue-700); --color-primary-soft: var(--color-blue-100); --color-primary-soft-hover: var(--color-blue-200); --color-focus-ring: rgba(30, 91, 168, 0.35); /* blue @ 35% */ /* ===================================================================== TYPOGRAPHY ===================================================================== */ --font-display: 'Oswald', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Scale: size / line-height pairs */ --text-display-size: 40px; --text-display-line: 48px; --text-h1-size: 28px; --text-h1-line: 36px; --text-h2-size: 22px; --text-h2-line: 30px; --text-h3-size: 17px; --text-h3-line: 24px; --text-body-size: 14px; --text-body-line: 22px; --text-small-size: 13px; --text-small-line: 20px; --text-caption-size: 12px; --text-caption-line: 16px; --text-mono-size: 13px; --text-mono-line: 20px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; /* ALL-CAPS labels & status badges */ /* ===================================================================== SPACING (4px base grid) ===================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ===================================================================== RADII ===================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ===================================================================== SHADOWS / ELEVATION ===================================================================== */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* ===================================================================== MOTION ===================================================================== */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 320ms; /* @kind other */ /* ===================================================================== LAYOUT CONSTANTS ===================================================================== */ --rail-collapsed: 72px; --rail-expanded: 240px; --topbar-h: 56px; --tabbar-h: 64px; } /* ========================================================================= SEMANTIC HELPERS — apply these directly to elements ========================================================================= */ html, body { font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; /* Inter's nicer defaults */ } .display, h1.display { font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); text-transform: uppercase; } h1, .h1 { font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--color-fg); } h2, .h2 { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--weight-medium); letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-fg); } h3, .h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--weight-semibold); color: var(--color-fg); } p, .body { font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-fg); } .small, .text-small { font-size: var(--text-small-size); line-height: var(--text-small-line); color: var(--color-fg-muted); } .caption { font-family: var(--font-display); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle); } .muted { color: var(--color-fg-muted); } .subtle { color: var(--color-fg-subtle); } code, .mono, .tabular { font-family: var(--font-mono); font-size: var(--text-mono-size); line-height: var(--text-mono-line); font-variant-numeric: tabular-nums; } .tnum { font-variant-numeric: tabular-nums; } /* Focus ring — applied universally for keyboard users */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }