/* ============================================================================ MrMurse Design Tokens ---------------------------------------------------------------------------- The single source of truth for every visual value on the platform. Pages and components must NEVER hard-code a color, size, or duration. They reference these custom properties instead. Change a value here and it propagates everywhere — that is the entire point of Phase 0. Token layers, in order: 1. Primitive tokens — raw brand values (the literal hex, the literal px) 2. Semantic tokens — roles that describe intent (--text-primary, --surface) Components consume SEMANTIC tokens wherever a role exists, and primitives only when no role applies. This lets us re-theme (e.g. a future dark dashboard) by remapping semantic tokens without touching component CSS. ========================================================================== */ :root { /* ========================================================================== 1. PRIMITIVE COLOR TOKENS Pulled directly from the MrMurse logo and Brand Guidelines §8. These are the only places a raw brand hex should ever appear. ========================================================================== */ --c-teal: #2D9CB1; /* Primary teal — scrubs / primary accent */ --c-teal-2: #4BAFC2; /* Secondary teal — "Mr" wordmark / highlights */ --c-teal-ink: #1B6E7E; /* Darker teal for text on light teal tints */ --c-navy: #112B35; /* Deep navy — headings, primary buttons */ --c-navy-700: #1B3D4A; /* Hover/lighter navy */ --c-navy-800: #0E2731; /* Gradient dark end */ --c-charcoal: #1E2328; /* Near-black for dense UI text */ --c-white: #FFFFFF; /* Pure white — cards / primary surface */ --c-offwhite: #FAFBFC; /* Off-white — page background */ --c-gray-bg: #F5F7F8; /* Light gray — alternating section background */ --c-divider: #E6ECEF; /* Soft gray — borders, dividers, outlines */ --c-ink-soft: #3C4A52; /* Muted body text */ --c-ink-muted: #6A7884; /* Secondary / helper text */ /* Teal tints (used for icon chips, eyebrow pills, subtle fills). Pre-mixed so components stay flat and we avoid rgba() guesswork. */ --c-teal-tint-08: rgba(45, 156, 177, 0.08); --c-teal-tint-10: rgba(45, 156, 177, 0.10); --c-teal-tint-18: rgba(45, 156, 177, 0.18); /* Semantic status primitives — muted per Design System §3, never neon. */ --c-success: #2E8B6B; /* muted green */ --c-success-bg: #E8F4EF; --c-warning: #B5821F; /* muted amber */ --c-warning-bg: #FBF3E2; --c-error: #C0492F; /* muted red */ --c-error-bg: #FBECE8; --c-info: #2D6FB1; /* muted blue */ --c-info-bg: #E9F1FA; /* ========================================================================== 2. SEMANTIC COLOR ROLES Components reference THESE, not the primitives above, wherever a role fits. Why: intent is readable in the markup ("--surface", not "--c-white"), and a future theme can remap one line instead of hunting hexes. ========================================================================== */ --bg-page: var(--c-offwhite); /* default page background */ --bg-alt: var(--c-gray-bg); /* alternating section background */ --surface: var(--c-white); /* cards, header, raised panels */ --surface-sunken: var(--c-gray-bg); /* inset fields, wells */ --text-primary: var(--c-navy); /* headings, high-emphasis text */ --text-body: var(--c-ink-soft); /* paragraph text */ --text-muted: var(--c-ink-muted); /* captions, helper, metadata */ --text-on-dark: rgba(255,255,255,.92);/* body text on navy surfaces */ --text-on-accent: var(--c-white); /* text on teal/navy fills */ --accent: var(--c-teal); /* links, icons, interactive accent */ --accent-strong: var(--c-teal-ink); /* accent text needing AA on light */ --accent-2: var(--c-teal-2); /* secondary highlight */ --border: var(--c-divider); /* default 1px borders & dividers */ --border-strong: #D4DDE2; /* slightly stronger border */ --border-focus: var(--c-teal); /* focus ring color */ --action-primary-bg: var(--c-navy); --action-primary-bg-hover: var(--c-navy-700); --action-primary-text: var(--c-white); --action-secondary-border: var(--c-teal); --action-secondary-text: var(--c-navy); /* ========================================================================== 3. TYPOGRAPHY One display/body family (Plus Jakarta Sans) keeps the brand cohesive and loads fast. Hierarchy comes from SIZE + WEIGHT + SPACING, not decoration (Brand Guidelines §9, Design System §4). Sizes use a ~1.2 modular scale, expressed in rem so they respect user font settings (accessibility). ========================================================================== */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; /* Font sizes — role named, not t-shirt sized, so usage is obvious. */ --fs-display: 3.05rem; /* hero headline only */ --fs-h1: 2.4rem; /* page titles */ --fs-h2: 2.05rem; /* major section titles */ --fs-h3: 1.32rem; /* card titles */ --fs-h4: 1.05rem; /* small headings / step titles */ --fs-body-lg: 1.16rem; /* intro paragraphs / hero subhead */ --fs-body: 1rem; /* standard paragraph (16px base) */ --fs-body-sm: 0.94rem; /* supporting text */ --fs-caption: 0.82rem; /* labels, metadata, helper text */ --fs-eyebrow: 0.78rem; /* uppercase section eyebrows */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* hero / wordmark only */ --lh-tight: 1.18; /* headings */ --lh-snug: 1.4; /* subheads */ --lh-normal: 1.6; /* body — comfortable reading */ --ls-tight: -0.03em; /* large display type */ --ls-heading: -0.02em; /* headings */ --ls-normal: 0; --ls-wide: 0.08em; /* uppercase eyebrows/labels */ /* ========================================================================== 4. SPACING SCALE Locked to the Design System §6 scale. Using ONLY these values is what produces consistent vertical rhythm across pages. Named by step so a component asks for "--space-6", never an arbitrary "27px". ========================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Section vertical padding — single knob for page rhythm. Responsive override lives in base.css at the breakpoints. */ --section-py: var(--space-9); /* 96px desktop */ --section-py-tight: var(--space-8); /* 64px for denser sections */ /* ========================================================================== 5. BORDER RADIUS Three steps only (Design System §9). Mixing many radii looks unbranded. ========================================================================== */ --radius-sm: 10px; /* inputs, buttons, small chips */ --radius-md: 16px; /* default cards, panels */ --radius-lg: 24px; /* large feature cards, CTA blocks */ --radius-pill: 999px; /* pills, eyebrows, round buttons */ --radius-full: 50%; /* badges, avatars */ /* ========================================================================== 6. SHADOWS Depth only, never decoration (Design System §10). Tinted with navy so shadows feel part of the palette rather than generic gray. ========================================================================== */ --shadow-sm: 0 1px 3px rgba(17,43,53,.06), 0 1px 2px rgba(17,43,53,.04); --shadow-md: 0 10px 30px rgba(17,43,53,.07), 0 2px 8px rgba(17,43,53,.04); --shadow-lg: 0 20px 48px rgba(17,43,53,.12), 0 4px 12px rgba(17,43,53,.06); --shadow-focus: 0 0 0 3px rgba(45,156,177,.35); /* focus ring fill */ /* ========================================================================== 7. Z-INDEX LAYERS Named scale prevents the "z-index: 99999" arms race as the app grows. ========================================================================== */ --z-base: 0; --z-raised: 10; /* hover-lifted cards, sticky sub-elements */ --z-header: 100; /* sticky site header */ --z-dropdown: 200; /* select menus, nav dropdowns */ --z-overlay: 900; /* modal/menu backdrop */ --z-modal: 1000; /* modal dialog */ --z-toast: 1100; /* toasts sit above modals */ /* ========================================================================== 8. MOTION — durations & easing Subtle and consistent (Brand Guidelines §13, Design System §18). One easing curve for almost everything keeps motion feeling unified. ========================================================================== */ --dur-fast: 120ms; /* taps, focus, small state changes */ --dur-base: 200ms; /* hovers, button/card transitions */ --dur-slow: 360ms; /* accordions, menu open/close */ --dur-reveal: 700ms; /* scroll-in reveals */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* default in/out */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* decelerate (reveals)*/ --ease-in: cubic-bezier(.4, 0, 1, 1); /* accelerate (exits) */ /* ========================================================================== 9. OPACITY Shared values for disabled states, scrims, and ghosted elements so they stay consistent everywhere. ========================================================================== */ --opacity-disabled: 0.45; --opacity-muted: 0.65; --opacity-scrim: 0.55; /* modal/menu backdrop darkness */ /* ========================================================================== 10. LAYOUT — containers & reading widths ========================================================================== */ --container-max: 1180px; /* default content container */ --container-narrow: 760px; /* forms, legal, focused single-column */ --reading-max: 68ch; /* max line length for body prose (a11y) */ --container-pad: 24px; /* horizontal gutter (mobile-safe) */ --container-pad-lg: 32px; /* gutter at wide viewports */ /* ========================================================================== 11. COMPONENT-LEVEL TOKENS Shared sizing that multiple components depend on. Centralizing avoids drift (e.g. header height is referenced by sticky offsets and scroll-spy). ========================================================================== */ --header-height: 92px; --tap-min: 44px; /* WCAG 2.5.5 minimum touch target */ --focus-ring: 2px; /* outline width for keyboard focus */ --border-width: 1px; } /* ============================================================================ RESPONSIVE BREAKPOINTS ---------------------------------------------------------------------------- CSS custom properties can't be used inside @media queries, so breakpoints are documented here as the canonical values and used literally in media queries across base.css / components.css. KEEP THESE IN SYNC. --bp-xs : 480px small phones --bp-sm : 640px large phones --bp-md : 768px tablets (nav collapses to hamburger here) --bp-lg : 920px small laptops / large tablets landscape --bp-xl : 1180px desktop (container max) Philosophy (per request §6): ONE visual language that adapts. We change layout (columns, stacking, nav pattern) at breakpoints, never the brand, type system, color, or component identity. ========================================================================== */ /* ============================================================================ RESPONSIVE TOKEN OVERRIDES A few tokens scale down on small screens for better rhythm. Because these are tokens, every component that uses them adapts automatically. ========================================================================== */ @media (max-width: 768px) { :root { --fs-display: 2.3rem; --fs-h1: 1.9rem; --fs-h2: 1.65rem; --section-py: var(--space-8); /* 64px */ --section-py-tight: var(--space-7); /* 48px */ --container-pad: 20px; } } @media (max-width: 480px) { :root { --fs-display: 2rem; --fs-h1: 1.7rem; } }