/** * OnMed brand foundation — the single source of truth for design tokens. * * Load this BEFORE main.css and every other stylesheet. main.css keeps its * legacy variable names but aliases them onto the roles defined here, so * components can migrate one at a time without breaking. * * Rule: components reference ROLES (--om-brand, --om-ink, --om-accent), never * raw hex. That is what stops a fourth blue from appearing. */ :root { /* --------------------------------------------------------------------- * Ink * ------------------------------------------------------------------- */ --om-ink: #0F0F3F; /* Iris — headings */ --om-ink-secondary: #475569; /* body copy */ --om-ink-muted: #64748B; /* captions, metadata */ --om-ink-inverse: #FFFFFF; /* text on --om-surface-dark */ --om-ink-inverse-secondary: rgba(255, 255, 255, 0.78); --om-ink-inverse-muted: rgba(255, 255, 255, 0.60); /* --------------------------------------------------------------------- * Brand * ------------------------------------------------------------------- */ --om-brand: #0C3287; /* Resolution — the only primary action color */ --om-brand-soft: #6A99C5; /* Azulina — support, illustration */ --om-accent: #08A0B8; /* Baltic Teal — focus rings, kickers */ --om-signal: #ED1651; /* Cerise — reserved, high-value moments only */ /* Brand tints, for washes and hover states. Derived, not new colors. */ --om-brand-wash: rgba(12, 50, 135, 0.06); --om-brand-wash-strong: rgba(12, 50, 135, 0.12); --om-accent-wash: rgba(8, 160, 184, 0.10); --om-signal-wash: rgba(237, 22, 81, 0.10); /* --------------------------------------------------------------------- * Surfaces * ------------------------------------------------------------------- */ --om-surface: #FFFFFF; --om-surface-sunken: #F9F9F9; /* Sea Salt */ --om-surface-dark: #0F0F3F; /* Iris — full-bleed dark bands */ --om-surface-tint: #F3F8FC; /* cool hero wash */ /* Hairlines */ --om-line: #E5E7EB; --om-line-strong: #CDD6E1; /* Storm */ --om-line-inverse: rgba(255, 255, 255, 0.16); /* --------------------------------------------------------------------- * Status * ------------------------------------------------------------------- */ --om-success: #10B981; --om-warning: #F59E0B; --om-danger: #EF4444; /* --------------------------------------------------------------------- * Type scale * Tracking is size-specific and leading tracks size inversely. * A single fixed letter-spacing is wrong somewhere. * ------------------------------------------------------------------- */ --om-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --om-size-display: clamp(2rem, 4.5vw, 3rem); --om-track-display: -0.03em; --om-lead-display: 1.05; --om-size-h1: clamp(1.75rem, 3.4vw, 2.25rem); --om-track-h1: -0.02em; --om-lead-h1: 1.15; --om-size-h2: clamp(1.5rem, 3vw, 2rem); --om-track-h2: -0.015em; --om-lead-h2: 1.2; --om-size-h3: clamp(1.125rem, 2vw, 1.35rem); --om-track-h3: -0.01em; --om-lead-h3: 1.3; --om-size-body: 1rem; --om-track-body: 0; --om-lead-body: 1.6; --om-size-body-lg: 1.125rem; --om-lead-body-lg: 1.55; --om-size-small: 0.875rem; --om-track-small: 0.005em; --om-lead-small: 1.5; --om-size-kicker: 0.8125rem; --om-track-kicker: 0.08em; /* uppercase needs air */ --om-lead-kicker: 1.2; /* Weight is part of hierarchy, not an afterthought */ --om-weight-display: 700; --om-weight-heading: 650; --om-weight-emphasis: 600; --om-weight-body: 400; /* --------------------------------------------------------------------- * Motion * Mirrors Apple's response values. Press feedback fires on pointer-down. * ------------------------------------------------------------------- */ --om-dur-press: 100ms; --om-dur-ui: 240ms; --om-dur-surface: 400ms; --om-ease: cubic-bezier(0.32, 0.72, 0, 1); --om-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --om-press-scale: 0.97; /* Bigger surfaces travel less under the same press — a card that shrank 3% would read as rubbery. Displacement scales inversely with surface size. */ --om-press-scale-card: 0.99; /* --------------------------------------------------------------------- * Materials — three tiers. Never stack glass on glass. * * 1. chrome — sticky nav / toolbars. Content scrolls underneath. * 2. sheet — dialogs, drawers, popovers. Heavier blur, deeper shadow. * 3. card — SOLID. Cards sit on top of chrome/sheet, never blur. * ------------------------------------------------------------------- */ /* Tier 1 — chrome */ --om-chrome-blur: 20px; --om-chrome-saturate: 180%; --om-chrome-bg: rgba(255, 255, 255, 0.72); --om-chrome-bg-scrolled: rgba(255, 255, 255, 0.82); --om-chrome-edge: rgba(255, 255, 255, 0.55); /* bright top edge */ --om-chrome-shadow: 0 1px 0 rgba(15, 15, 63, 0.04), 0 8px 24px rgba(15, 15, 63, 0.06); --om-chrome-fade: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); /* Tier 2 — sheet */ --om-sheet-blur: 30px; --om-sheet-saturate: 180%; --om-sheet-bg: rgba(255, 255, 255, 0.86); --om-sheet-edge: rgba(255, 255, 255, 0.65); --om-sheet-shadow: 0 24px 64px rgba(15, 15, 63, 0.22), 0 2px 8px rgba(15, 15, 63, 0.08); --om-scrim: rgba(15, 15, 63, 0.45); /* Tier 3 — solid cards. Bigger surfaces read thicker. */ --om-card-bg: #FFFFFF; --om-card-border: 1px solid var(--om-line); --om-card-shadow-flat: 0 1px 2px rgba(15, 15, 63, 0.04); --om-card-shadow-raised: 0 2px 8px rgba(15, 15, 63, 0.06), 0 1px 2px rgba(15, 15, 63, 0.04); --om-card-shadow-floating: 0 8px 24px rgba(15, 15, 63, 0.08), 0 2px 6px rgba(15, 15, 63, 0.05); --om-card-shadow-hero: 0 18px 48px rgba(15, 15, 63, 0.12), 0 4px 12px rgba(15, 15, 63, 0.06); /* Radii, sized with the surface they wrap */ --om-radius-chip: 999px; --om-radius-sm: 10px; --om-radius-md: 14px; --om-radius-lg: 20px; --om-radius-xl: 28px; /* Focus ring — one ring, one color, everywhere */ --om-focus-ring: 2px solid var(--om-accent); --om-focus-offset: 2px; /* Disclosure chevron, drawn once and masked so it inherits currentColor. Replaces the Unicode arrows that never matched the type. */ --om-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Frostier and flatter when the user asks for less transparency. */ @media (prefers-reduced-transparency: reduce) { :root { --om-chrome-blur: 0px; --om-sheet-blur: 0px; --om-chrome-bg: #FFFFFF; --om-chrome-bg-scrolled: #FFFFFF; --om-sheet-bg: #FFFFFF; } } /* Near-solid surfaces with defined borders in high-contrast mode. */ @media (prefers-contrast: more) { :root { --om-chrome-bg: #FFFFFF; --om-chrome-bg-scrolled: #FFFFFF; --om-sheet-bg: #FFFFFF; --om-line: #94A3B8; --om-ink-secondary: #334155; --om-ink-muted: #475569; } } @media (prefers-reduced-motion: reduce) { :root { --om-dur-press: 0.01ms; --om-dur-ui: 0.01ms; --om-dur-surface: 0.01ms; --om-press-scale: 1; --om-press-scale-card: 1; } }