/* Mensorix brand tokens: CSS custom properties. Import once at the root of the app/site. Light is the default theme; set data-theme="dark" on for dark. Never hard-code these hex values elsewhere. */ @font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } :root, [data-theme="light"] { /* Brand */ --mx-navy: #0E2A47; /* Survey Navy */ --mx-teal: #14A3A0; /* Pin Teal: fills, icons, text 24px+ only */ --mx-teal-ink: #0A6E6C; /* teal for text and links at any size */ --mx-teal-soft: #DDF2F1; --mx-brand-field: #0E2A47; /* large brand panels */ --mx-field-grid: rgba(255, 255, 255, 0.28); /* Surfaces and text */ --mx-surface: #F4F7F8; /* Mist: page background */ --mx-surface-raised: #FFFFFF; --mx-surface-sunken: #E6ECEF; --mx-line: #D5DDE3; --mx-ink: #0E2A47; --mx-ink-muted: #5B6B7A; /* Steel */ --mx-on-navy: #FFFFFF; /* Actions */ --mx-primary: var(--mx-navy); --mx-on-primary: #FFFFFF; --mx-focus: #14A3A0; --mx-link: var(--mx-teal-ink); /* Status (always shown with its word) */ --mx-status-open-bg: var(--mx-teal-soft); --mx-status-open-fg: var(--mx-teal-ink); --mx-status-progress-bg: #FFF1D6; --mx-status-progress-fg: #8A5A00; --mx-status-closed-bg: #E4F1E6; --mx-status-closed-fg: #2E6B3A; --mx-status-overdue-bg: #FBE3E1; --mx-status-overdue-fg: #A3322A; --mx-shadow-card: 0 1px 2px rgba(14, 42, 71, 0.06), 0 6px 20px rgba(14, 42, 71, 0.06); } [data-theme="dark"] { --mx-teal-ink: #3CC9C5; --mx-teal-soft: #0F3B3F; --mx-brand-field: #1B4470; --mx-field-grid: rgba(255, 255, 255, 0.22); --mx-surface: #0A1B2E; /* Deep Ink */ --mx-surface-raised: #12304F; --mx-surface-sunken: #081626; --mx-line: #2A4663; --mx-ink: #F4F7F8; --mx-ink-muted: #A9B8C6; --mx-primary: var(--mx-teal); --mx-on-primary: #0A1B2E; --mx-focus: #3CC9C5; --mx-status-progress-bg: #3D2C0A; --mx-status-progress-fg: #F2C46B; --mx-status-closed-bg: #15311C; --mx-status-closed-fg: #8FD19E; --mx-status-overdue-bg: #3E1613; --mx-status-overdue-fg: #F4A39B; --mx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); } :root { /* Type */ --mx-font-display: "Manrope", "IBM Plex Sans", system-ui, sans-serif; --mx-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mx-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* Type scale: size / line-height */ --mx-text-display-xl: 800 64px/68px var(--mx-font-display); /* letter-spacing -0.03em */ --mx-text-display-l: 800 44px/50px var(--mx-font-display); /* letter-spacing -0.02em */ --mx-text-heading: 700 28px/34px var(--mx-font-display); /* letter-spacing -0.01em */ --mx-text-title: 600 20px/28px var(--mx-font-sans); --mx-text-body-l: 400 18px/28px var(--mx-font-sans); --mx-text-body: 400 16px/24px var(--mx-font-sans); --mx-text-caption: 500 13px/18px var(--mx-font-sans); --mx-text-eyebrow: 600 13px/16px var(--mx-font-sans); /* uppercase, letter-spacing 0.14em */ --mx-text-data: 500 14px/20px var(--mx-font-mono); /* Spacing: 8px grid */ --mx-space-1: 4px; --mx-space-2: 8px; --mx-space-3: 12px; --mx-space-4: 16px; --mx-space-6: 24px; --mx-space-8: 32px; --mx-space-12: 48px; --mx-space-16: 64px; /* Radii */ --mx-radius-sm: 6px; --mx-radius-md: 12px; /* buttons, inputs, thumbnails */ --mx-radius-lg: 20px; /* cards, panels */ --mx-radius-pill: 999px; }