/* ============================================================ InSync365 Design System — Colors & Type Source: HR101BL Blazor app (wwwroot/css/site.css), brand assets ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------------------------------------------------------- BRAND COLORS — from logo + sidebar gradient + login styles ---------------------------------------------------------- */ --is-brand-blue: #0494da; /* Primary brand blue (logo, sidebar) */ --is-brand-blue-600: #097cb9; /* Darker shade used in collapsed sidebar */ --is-brand-blue-700: #066894; --is-brand-blue-300: #3cc4d8; --is-brand-blue-100: #e6f4fb; --is-brand-orange: #f59e2c; /* Logo accent (top swirl) */ --is-brand-orange-600: #e0851a; --is-brand-orange-100: #fef1e0; --is-brand-purple: #3a0647; /* Sidebar gradient end, login headings */ --is-brand-purple-deep: #052767; /* Old gradient start, used for dark surfaces */ --is-brand-navy: #191d45; /* Mobile logout bar */ /* Bootstrap-aligned accents already in use across the app */ --is-link: #0366d6; --is-action-blue: #007bff; /* checkbox, focus borders, active tab indicator */ /* ---------------------------------------------------------- SEMANTIC — text, surfaces, borders ---------------------------------------------------------- */ --is-fg-1: #1a1f2e; /* primary text */ --is-fg-2: #4a5468; /* secondary text */ --is-fg-3: #7a8395; /* tertiary / metadata */ --is-fg-muted: #9aa3b3; --is-fg-on-brand: #ffffff; --is-bg-app: #f5f7fa; /* page background */ --is-bg-surface: #ffffff; /* cards, panels */ --is-bg-surface-2: #f7f7f7; /* top bar, alt rows (matches site.css) */ --is-bg-surface-3: #f8f9fa; /* table headers, list hover */ --is-bg-row-hover: #d4d1cf; /* matches existing tr:hover */ --is-border-1: #e6e9ef; --is-border-2: #d6d5d5; /* matches site.css top-row border */ --is-border-3: #b9bfca; --is-border-focus: #007bff; /* ---------------------------------------------------------- STATUS / SEMANTIC SIGNAL ---------------------------------------------------------- */ --is-success: #26b050; /* matches valid.modified outline */ --is-success-bg: #e6f7ec; --is-warning: #e6a700; --is-warning-bg: #fff5d6; --is-danger: #d92c2c; /* matches existing red */ --is-danger-bg: #fde7e7; --is-info: #0d8fd9; --is-info-bg: #e6f4fb; /* ---------------------------------------------------------- SIDEBAR — gradient sourced from site.css line 791 ---------------------------------------------------------- */ --is-sidebar-grad: linear-gradient(103deg, #0494da 0%, #3a0647 95%); --is-sidebar-bg-solid: #097cb9; --is-sidebar-fg: #d7d7d7; --is-sidebar-fg-active: #ffffff; --is-sidebar-item-hover: rgba(255,255,255,0.10); --is-sidebar-item-active: rgba(255,255,255,0.25); /* ---------------------------------------------------------- RADII — current app uses 3-5px on inputs/buttons, 8px on TFA ---------------------------------------------------------- */ --is-radius-xs: 3px; --is-radius-sm: 6px; --is-radius-md: 10px; --is-radius-lg: 14px; --is-radius-pill: 999px; /* ---------------------------------------------------------- SHADOWS — card surfaces and modals ---------------------------------------------------------- */ --is-shadow-1: 0 1px 2px rgba(20, 28, 50, 0.06); --is-shadow-2: 0 2px 6px rgba(20, 28, 50, 0.08), 0 1px 2px rgba(20, 28, 50, 0.04); --is-shadow-3: 0 8px 24px rgba(20, 28, 50, 0.10), 0 2px 6px rgba(20, 28, 50, 0.06); --is-shadow-pop: 0 16px 48px rgba(20, 28, 50, 0.18); /* Matches login card existing shadow */ --is-shadow-legacy-card: 0 2px 5px rgba(0,0,0,0.30); /* ---------------------------------------------------------- LAYOUT — chrome heights Used by sticky table headers, sticky breadcrumbs, scroll-into-view offsets, etc. Always reference via var(). ---------------------------------------------------------- */ --is-topbar-h: 0px; /* App top header. 0 if no topbar; set to actual height (e.g. 56px) to push every sticky header below it. */ --is-tabbar-h: 44px; /* Tab strip below topbar (when present) */ /* ---------------------------------------------------------- SPACING ---------------------------------------------------------- */ --is-space-1: 4px; --is-space-2: 8px; --is-space-3: 12px; --is-space-4: 16px; --is-space-5: 24px; --is-space-6: 32px; --is-space-7: 48px; --is-space-8: 64px; /* ---------------------------------------------------------- TYPE — current app: Helvetica Neue / Helvetica / Arial. Refresh: Plus Jakarta Sans (geometric humanist, modern SaaS feel, pairs cleanly with existing blue). JetBrains Mono for tabular data. ---------------------------------------------------------- */ --is-font-sans: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --is-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --is-font-legacy: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Type scale (px, rem-friendly) Existing app sizes preserved in fs-xs..fs-xxl utilities (12-24px). */ --is-text-xs: 12px; --is-text-sm: 13px; --is-text-body: 14px; /* table rows currently 15px → 14 keeps density similar */ --is-text-md: 15px; /* matches .is-textbox / .is-label */ --is-text-lg: 17px; --is-text-xl: 20px; --is-text-2xl: 24px; --is-text-3xl: 30px; --is-text-4xl: 38px; --is-text-5xl: 48px; --is-leading-tight: 1.2; --is-leading-snug: 1.35; --is-leading-body: 1.5; --is-leading-loose: 1.65; --is-tracking-tight: -0.01em; --is-tracking-display: -0.02em; --is-tracking-eyebrow: 0.08em; /* ---------------------------------------------------------- SEMANTIC TYPOGRAPHY VARS (consume in components) ---------------------------------------------------------- */ --is-display: 700 var(--is-text-5xl)/var(--is-leading-tight) var(--is-font-sans); --is-h1: 700 var(--is-text-4xl)/var(--is-leading-tight) var(--is-font-sans); --is-h2: 600 var(--is-text-3xl)/var(--is-leading-snug) var(--is-font-sans); --is-h3: 600 var(--is-text-2xl)/var(--is-leading-snug) var(--is-font-sans); --is-h4: 600 var(--is-text-xl)/var(--is-leading-snug) var(--is-font-sans); --is-h5: 600 var(--is-text-lg)/var(--is-leading-snug) var(--is-font-sans); --is-body: 400 var(--is-text-body)/var(--is-leading-body) var(--is-font-sans); --is-body-md: 400 var(--is-text-md)/var(--is-leading-body) var(--is-font-sans); --is-label: 500 var(--is-text-sm)/var(--is-leading-snug) var(--is-font-sans); --is-eyebrow: 600 var(--is-text-xs)/var(--is-leading-snug) var(--is-font-sans); --is-mono: 400 var(--is-text-sm)/var(--is-leading-body) var(--is-font-mono); } /* ============================================================ BASE ELEMENT STYLES — opt-in via class .is-typography ============================================================ */ .is-typography { font-family: var(--is-font-sans); color: var(--is-fg-1); font-size: var(--is-text-body); line-height: var(--is-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .is-typography h1, .is-h1 { font: var(--is-h1); letter-spacing: var(--is-tracking-display); } .is-typography h2, .is-h2 { font: var(--is-h2); letter-spacing: var(--is-tracking-tight); } .is-typography h3, .is-h3 { font: var(--is-h3); letter-spacing: var(--is-tracking-tight); } .is-typography h4, .is-h4 { font: var(--is-h4); } .is-typography h5, .is-h5 { font: var(--is-h5); } .is-typography p, .is-p { font: var(--is-body); color: var(--is-fg-2); } .is-eyebrow { font: var(--is-eyebrow); letter-spacing: var(--is-tracking-eyebrow); text-transform: uppercase; color: var(--is-fg-3); } .is-mono { font: var(--is-mono); } .is-display { font: var(--is-display); letter-spacing: var(--is-tracking-display); }