/* ── MedComply Dashboard — Shared Styles ── */ :root { /* Brand */ --mc-dark: #207d73; --mc-primary: #2da696; --mc-light: #3ac2b1; --mc-pale: #eaf7f3; /* Neutrals */ --mc-bg: #f9fafb; --mc-card: #ffffff; --mc-text: #111827; --mc-text-secondary: #6b7280; --mc-border: #e5e7eb; /* Semantic */ --mc-error: #dc2626; --mc-warning: #d97706; --mc-success: #16a34a; /* Spacing */ --mc-space-xs: 4px; --mc-space-sm: 8px; --mc-space-md: 16px; --mc-space-lg: 24px; --mc-space-xl: 32px; /* Radius */ --mc-radius-card: 12px; --mc-radius-input: 8px; --mc-radius-pill: 999px; /* Shadow */ --mc-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --mc-shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); /* Typography */ --mc-font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mc-text-xs: 12px; --mc-text-sm: 13px; --mc-text-base: 15px; --mc-text-lg: 18px; --mc-text-xl: 22px; /* Backward-compat aliases (elan-* -> mc-*) */ --elan-green: var(--mc-primary); --elan-green-light: var(--mc-light); --elan-green-dark: var(--mc-dark); --elan-teal: var(--mc-primary); --elan-teal-light: var(--mc-light); --elan-bg: var(--mc-bg); --elan-white: var(--mc-card); --elan-border: var(--mc-border); --elan-border-light: #f0f0f0; --elan-text: var(--mc-text); --elan-text-dark: #1f243c; --elan-text-light: var(--mc-text-secondary); --elan-text-muted: var(--mc-text-secondary); --elan-red: var(--mc-error); --elan-red-light: #fdecea; --elan-green-badge: #6fc99e; --elan-link: #135eb4; --elan-link-dark: #0d4a8f; --elan-radius: var(--mc-radius-card); --elan-shadow: var(--mc-shadow); --elan-font: var(--mc-font); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: #fff; } /* ══════════════════════════════════════ Google Material 3 — MedComply variant Heebo (Google Hebrew font) + teal brand ══════════════════════════════════════ */ html, body { min-height: 100vh; /* direction inherits from — i18n.js flips it per language. */ text-align: start; font-family: 'Heebo', 'Google Sans', 'Roboto', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: #1f1f1f; background: transparent; position: relative; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Background image ── Matches the pre-Cognito login visual recipe: `cover` fills the viewport, `center top` anchors the image to the top so the focal point (upper portion of the photo) stays visible and only the bottom edge crops on narrow windows. `fixed` prevents parallax-style scroll-up. Pages that want a flat surface override this in their own inline