/* * Morse Labs shared theme — design tokens + base components. * * Adopted from swiftloop/frontend/themes/morse.css (the Morse Labs brand): teal * #75E6DA, deep teal #189AB4, navy #0D1F2D. Light is the default; dark follows the * OS (prefers-color-scheme) and can be forced with data-color-scheme on . * * Served at /branding/morse-theme.css. Apps link it and use the --ms-* tokens * (or the .ms-* helper classes). Pair with branding-toggle.js for the toggle. */ :root { color-scheme: light dark; --ms-bg: #FFFFFF; --ms-bg-pattern: url("/branding/morse-tile-light.svg"); --ms-surface: #FFFFFF; --ms-surface-2: #F4F5F7; --ms-text: #1F2933; --ms-text-muted: #6B7785; --ms-text-faint: #9AA5B1; --ms-accent: #189AB4; /* deep teal */ --ms-accent-hover: #137E94; --ms-accent-contrast:#FFFFFF; --ms-link: #137E94; --ms-border: #E3E6EA; --ms-input-bg: #FFFFFF; --ms-input-border: #CDD3DA; --ms-focus: #189AB4; --ms-focus-ring: rgba(24,154,180,0.18); --ms-radius: 6px; --ms-radius-card: 12px; --ms-shadow: 0 4px 24px rgba(15,23,32,0.08), 0 1px 2px rgba(15,23,32,0.06); --ms-error: #C62828; --ms-error-bg: rgba(239,83,80,0.08); --ms-warning: #B7791F; --ms-info: #189AB4; --ms-logo: url("/branding/logo-light.svg"); --ms-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark — Morse "Signal Intelligence". Follows the OS unless forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { color-scheme: dark; --ms-bg: #080C14; --ms-bg-pattern: url("/branding/morse-tile-dark.svg"); --ms-surface: #0D1321; --ms-surface-2: #111827; --ms-text: #E8F4F8; --ms-text-muted: #9AA5B1; --ms-text-faint: #7A8FA0; --ms-accent: #75E6DA; --ms-accent-hover: #4FB8AE; --ms-accent-contrast:#080C14; --ms-link: #75E6DA; --ms-border: #15262C; --ms-input-bg: #080C14; --ms-input-border: #15262C; --ms-focus: #75E6DA; --ms-focus-ring: rgba(117,230,218,0.25); --ms-shadow: 0 0 40px rgba(117,230,218,0.12), 0 1px 2px rgba(0,0,0,0.4); --ms-error: #F87171; --ms-error-bg: rgba(248,113,113,0.15); --ms-warning: #FBBF24; --ms-info: #75E6DA; --ms-logo: url("/branding/logo-dark.svg"); } } /* Explicit dark (toggle override). */ :root[data-color-scheme="dark"] { --ms-bg: #080C14; --ms-bg-pattern: url("/branding/morse-tile-dark.svg"); --ms-surface: #0D1321; --ms-surface-2: #111827; --ms-text: #E8F4F8; --ms-text-muted: #9AA5B1; --ms-text-faint: #7A8FA0; --ms-accent: #75E6DA; --ms-accent-hover: #4FB8AE; --ms-accent-contrast:#080C14; --ms-link: #75E6DA; --ms-border: #15262C; --ms-input-bg: #080C14; --ms-input-border: #15262C; --ms-focus: #75E6DA; --ms-focus-ring: rgba(117,230,218,0.25); --ms-shadow: 0 0 40px rgba(117,230,218,0.12), 0 1px 2px rgba(0,0,0,0.4); --ms-error: #F87171; --ms-error-bg: rgba(248,113,113,0.15); --ms-warning: #FBBF24; --ms-info: #75E6DA; --ms-logo: url("/branding/logo-dark.svg"); } /* ── Base ─────────────────────────────────────────────────────────────────── */ .ms-body { background: var(--ms-bg); color: var(--ms-text); font-family: var(--ms-font); -webkit-font-smoothing: antialiased; } .ms-logo { width: 160px; height: 44px; background: var(--ms-logo) no-repeat center / contain; } .ms-card { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-card); box-shadow: var(--ms-shadow); } .ms-input { width: 100%; height: 40px; padding: 8px 12px; background: var(--ms-input-bg); color: var(--ms-text); border: 1px solid var(--ms-input-border); border-radius: var(--ms-radius); font-size: 14px; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .ms-input:focus { border-color: var(--ms-focus); box-shadow: 0 0 0 3px var(--ms-focus-ring); } .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; background: var(--ms-accent); color: var(--ms-accent-contrast); border: 1px solid var(--ms-accent); border-radius: var(--ms-radius); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, transform .1s; } .ms-btn:hover { background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); } .ms-btn:active { transform: translateY(1px); } .ms-link { color: var(--ms-link); text-decoration: none; } .ms-link:hover { text-decoration: underline; } /* ── Light/dark toggle ────────────────────────────────────────────────────── */ .ms-toggle { display: inline-flex; align-items: center; gap: 6px; width: 34px; height: 34px; justify-content: center; background: var(--ms-surface); color: var(--ms-text-muted); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); cursor: pointer; transition: color .15s, border-color .15s; } .ms-toggle:hover { color: var(--ms-accent); border-color: var(--ms-accent); } .ms-theme-toggle .ms-sun { display: none; } .ms-theme-toggle .ms-moon { display: inline; } :root[data-color-scheme="dark"] .ms-theme-toggle .ms-sun { display: inline; } :root[data-color-scheme="dark"] .ms-theme-toggle .ms-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) .ms-theme-toggle .ms-sun { display: inline; } :root:not([data-color-scheme="light"]) .ms-theme-toggle .ms-moon { display: none; } }