/* OpSys merged brand tokens Light mode: OpSys WIP Board dense operational UI Dark mode: Live SDM / Halo Insights style-guide package Usage: or Default is light mode. */ :root, [data-theme="light"] { color-scheme: light; --opsys-mode: light; --opsys-bg: #f3f6f4; --opsys-panel: #ffffff; --opsys-panel-2: #f8faf8; --opsys-card: #fbfcfb; --opsys-card-hover: #f4f8f2; --opsys-text: #1b1f1d; --opsys-muted: #65706c; --opsys-line: #d8dfdb; --opsys-accent: #91c11e; --opsys-accent-dark: #567a0a; --opsys-accent-soft: #edf6dc; --opsys-danger: #b4233a; --opsys-warning: #a56b00; --opsys-success: #289d4f; --opsys-shadow: 0 12px 28px rgb(31 41 36 / 10%); --opsys-logo-full: url("../assets/logos/light/opsys-logo.png"); --opsys-logo-mark: url("../assets/logos/light/opsys-mark.png"); } [data-theme="dark"] { color-scheme: dark; --opsys-mode: dark; --opsys-bg: #111212; --opsys-panel: #181919; --opsys-panel-2: #202221; --opsys-card: #1c1d1d; --opsys-card-hover: #242625; --opsys-text: #f5f5f2; --opsys-muted: #a7aaa5; --opsys-line: #323433; --opsys-accent: #91c11e; --opsys-accent-dark: #719b11; --opsys-accent-soft: #253019; --opsys-danger: #c96868; --opsys-warning: #d2a43b; --opsys-success: #a7ee45; --opsys-shadow: 0 22px 60px rgba(0, 0, 0, .28); --opsys-logo-full: url("../assets/logos/dark/opsys-logo.png"); --opsys-logo-mark: url("../assets/logos/dark/opsys-mark.png"); } :root { --opsys-font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --opsys-radius-xs: 3px; --opsys-radius-sm: 4px; --opsys-radius-md: 6px; --opsys-radius-lg: 10px; --opsys-type-eyebrow: 0.68rem; --opsys-type-small: 0.78rem; --opsys-type-body: 0.92rem; --opsys-type-h1: clamp(2rem, 4vw, 4.2rem); --opsys-type-h2: 1.25rem; } .opsys-app { min-height: 100vh; margin: 0; color: var(--opsys-text); background: var(--opsys-bg); font-family: var(--opsys-font); } .opsys-panel { background: var(--opsys-card); border: 1px solid var(--opsys-line); border-radius: var(--opsys-radius-md); box-shadow: var(--opsys-shadow); } .opsys-eyebrow { margin: 0; color: var(--opsys-accent); font-size: var(--opsys-type-eyebrow); font-weight: 900; letter-spacing: .11em; text-transform: uppercase; } .opsys-button-primary { border: 0; border-radius: var(--opsys-radius-sm); min-height: 34px; padding: 7px 11px; background: var(--opsys-accent); color: #11150f; font: 850 var(--opsys-type-body) / 1 var(--opsys-font); cursor: pointer; } .opsys-button-ghost { border: 1px solid var(--opsys-line); border-radius: var(--opsys-radius-sm); min-height: 34px; padding: 7px 11px; background: transparent; color: var(--opsys-accent-dark); font: 850 var(--opsys-type-body) / 1 var(--opsys-font); cursor: pointer; } .opsys-input { width: 100%; min-height: 34px; padding: 8px 10px; border: 1px solid var(--opsys-line); border-radius: var(--opsys-radius-xs); background: var(--opsys-panel); color: var(--opsys-text); font: inherit; } .opsys-input:focus { border-color: var(--opsys-accent); outline: 2px solid color-mix(in srgb, var(--opsys-accent), transparent 78%); outline-offset: 1px; } .opsys-pill { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; background: var(--opsys-accent-soft); color: var(--opsys-accent-dark); font-size: .62rem; font-weight: 900; text-transform: uppercase; }