/* ───────────────────────────────────────────────────────────── Opareto Platform — Design Tokens Class-based dark mode (.dark on ) IBM Plex Sans / Mono · indigo #5b6abf · hairline borders · 100-150ms motion ───────────────────────────────────────────────────────────── */ :root { /* Type ────────────────────────────── */ --op-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --op-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --op-text-2xs: 12px; --op-text-xs: 13px; --op-text-sm: 14px; --op-text-base: 15px; --op-text-md: 16px; --op-text-lg: 19px; --op-text-xl: 22px; --op-text-2xl: 24px; --op-text-3xl: 30px; --op-leading-tight: 1.25; --op-leading-snug: 1.4; --op-leading-normal: 1.55; --op-tracking-tight: -0.01em; --op-tracking-normal: 0; --op-tracking-wide: 0.04em; --op-tracking-wider: 0.08em; /* Space (4px grid) ───────────────────── */ --op-space-0: 0px; --op-space-1: 2px; --op-space-2: 4px; --op-space-3: 8px; --op-space-4: 12px; --op-space-5: 16px; --op-space-6: 20px; --op-space-7: 24px; --op-space-8: 32px; --op-space-9: 40px; --op-space-10: 48px; /* Radii ─────────────────────────────── */ --op-radius-1: 3px; --op-radius-2: 5px; --op-radius-3: 7px; --op-radius-4: 10px; --op-radius-5: 14px; --op-radius-pill: 999px; /* Motion ────────────────────────────── */ --op-duration-fast: 100ms; --op-duration-base: 130ms; --op-duration-slow: 200ms; --op-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Hairlines ─────────────────────────── */ --op-hairline: 0.5px; /* ── Light theme ──────────────────────── */ --op-bg: #fbfbfa; --op-bg-subtle: #f4f4f2; --op-bg-muted: #efefec; --op-surface: #ffffff; --op-surface-raised: #ffffff; --op-surface-overlay: #ffffff; --op-surface-inset: #f7f7f5; --op-border: rgba(15, 15, 18, 0.08); --op-border-strong: rgba(15, 15, 18, 0.14); --op-border-focus: #5b6abf; --op-text: #15151a; --op-text-secondary: #52525b; --op-text-tertiary: #6f6f78; /* lifted from #8a8a93 → ~4.6:1, clears WCAG AA */ --op-text-disabled: #b8b8be; --op-text-inverse: #ffffff; --op-accent: #5b6abf; --op-accent-hover: #4f5db0; --op-accent-active: #44509e; --op-accent-soft: rgba(91, 106, 191, 0.1); --op-accent-soft-hover: rgba(91, 106, 191, 0.16); --op-accent-text: #4554a8; --op-accent-border: rgba(91, 106, 191, 0.32); /* Status — sober, premium, slightly desaturated of #3 */ --op-success: #22a06b; --op-success-soft: rgba(34, 160, 107, 0.1); --op-success-text: #197a51; --op-success-border: rgba(34, 160, 107, 0.28); --op-warning: #c08a00; --op-warning-soft: rgba(192, 138, 0, 0.12); --op-warning-text: #8f6700; --op-warning-border: rgba(192, 138, 0, 0.3); --op-danger: #d24545; --op-danger-soft: rgba(210, 69, 69, 0.1); --op-danger-text: #a83333; --op-danger-border: rgba(210, 69, 69, 0.28); --op-info: #3b82f6; --op-info-soft: rgba(59, 130, 246, 0.1); --op-info-text: #2563c4; --op-info-border: rgba(59, 130, 246, 0.28); --op-neutral: #71717a; --op-neutral-soft: rgba(113, 113, 122, 0.1); --op-neutral-text: #52525b; --op-neutral-border: rgba(113, 113, 122, 0.24); /* Selection */ --op-selection-bg: rgba(91, 106, 191, 0.18); --op-row-hover: rgba(15, 15, 18, 0.025); --op-row-selected: rgba(91, 106, 191, 0.07); --op-row-selected-strong: rgba(91, 106, 191, 0.12); /* Shadow */ --op-shadow-sm: 0 1px 2px rgba(15, 15, 18, 0.04), 0 0 0 var(--op-hairline) rgba(15, 15, 18, 0.06); --op-shadow-md: 0 4px 12px rgba(15, 15, 18, 0.06), 0 1px 2px rgba(15, 15, 18, 0.04), 0 0 0 var(--op-hairline) rgba(15, 15, 18, 0.06); --op-shadow-lg: 0 12px 32px rgba(15, 15, 18, 0.1), 0 4px 8px rgba(15, 15, 18, 0.05), 0 0 0 var(--op-hairline) rgba(15, 15, 18, 0.08); --op-shadow-overlay: 0 24px 48px rgba(15, 15, 18, 0.18), 0 0 0 var(--op-hairline) rgba(15, 15, 18, 0.1); } .dark { --op-bg: #0c0d10; --op-bg-subtle: #111317; --op-bg-muted: #15171c; --op-surface: #15171c; --op-surface-raised: #1a1c22; --op-surface-overlay: #1d1f25; --op-surface-inset: #0f1115; --op-border: rgba(255, 255, 255, 0.07); --op-border-strong: rgba(255, 255, 255, 0.14); --op-border-focus: #7c8adb; --op-text: #ebebef; --op-text-secondary: #a1a1ab; --op-text-tertiary: #83838d; /* lifted from #71717a → ~4.7:1 on dark bg */ --op-text-disabled: #4a4a52; --op-text-inverse: #0c0d10; --op-accent: #7c8adb; --op-accent-hover: #8c98e0; --op-accent-active: #6d7bcf; --op-accent-soft: rgba(124, 138, 219, 0.14); --op-accent-soft-hover: rgba(124, 138, 219, 0.2); --op-accent-text: #a4afe5; --op-accent-border: rgba(124, 138, 219, 0.36); --op-success: #3ecf8e; --op-success-soft: rgba(62, 207, 142, 0.14); --op-success-text: #6fdba9; --op-success-border: rgba(62, 207, 142, 0.32); --op-warning: #e0b04a; --op-warning-soft: rgba(224, 176, 74, 0.14); --op-warning-text: #ebc775; --op-warning-border: rgba(224, 176, 74, 0.32); --op-danger: #ee6868; --op-danger-soft: rgba(238, 104, 104, 0.14); --op-danger-text: #f08c8c; --op-danger-border: rgba(238, 104, 104, 0.32); --op-info: #5fa3f9; --op-info-soft: rgba(95, 163, 249, 0.14); --op-info-text: #8bbcfb; --op-info-border: rgba(95, 163, 249, 0.32); --op-neutral: #8a8a93; --op-neutral-soft: rgba(138, 138, 147, 0.14); --op-neutral-text: #a1a1ab; --op-neutral-border: rgba(138, 138, 147, 0.28); --op-selection-bg: rgba(124, 138, 219, 0.22); --op-row-hover: rgba(255, 255, 255, 0.025); --op-row-selected: rgba(124, 138, 219, 0.08); --op-row-selected-strong: rgba(124, 138, 219, 0.14); --op-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 var(--op-hairline) rgba(255, 255, 255, 0.05); --op-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 var(--op-hairline) rgba(255, 255, 255, 0.06); --op-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 var(--op-hairline) rgba(255, 255, 255, 0.06); --op-shadow-overlay: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 var(--op-hairline) rgba(255, 255, 255, 0.08); } /* ───────────────────────────────────────────────────────────── Reset within an .op-app artboard ───────────────────────────────────────────────────────────── */ .op-app, .op-app * { box-sizing: border-box; } .op-app { font-family: var(--op-font-sans); font-size: var(--op-text-base); line-height: var(--op-leading-snug); color: var(--op-text); background: var(--op-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv05", "cv11"; letter-spacing: -0.005em; } .op-app button { font-family: inherit; cursor: pointer; } .op-app input, .op-app select, .op-app textarea { font-family: inherit; color: inherit; } .op-mono { font-family: var(--op-font-mono); font-feature-settings: "zero", "ss01"; font-variant-numeric: tabular-nums; /* columns of figures align */ } /* ───────────────────────────────────────────────────────────── Primitives ───────────────────────────────────────────────────────────── */ /* Button */ .op-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--op-radius-2); border: var(--op-hairline) solid var(--op-border); background: var(--op-surface); color: var(--op-text); font-size: var(--op-text-sm); font-weight: 500; letter-spacing: -0.005em; transition: background var(--op-duration-fast) var(--op-ease), border-color var(--op-duration-fast) var(--op-ease), color var(--op-duration-fast) var(--op-ease); white-space: nowrap; } .op-btn:hover { background: var(--op-bg-subtle); border-color: var(--op-border-strong); } .op-btn:focus-visible { outline: 2px solid var(--op-border-focus); outline-offset: 1px; } .op-btn--primary { background: var(--op-accent); border-color: transparent; color: #fff; } .op-btn--primary:hover { background: var(--op-accent-hover); border-color: transparent; } .op-btn--ghost { background: transparent; border-color: transparent; color: var(--op-text-secondary); } .op-btn--ghost:hover { background: var(--op-bg-subtle); color: var(--op-text); border-color: transparent; } .op-btn--danger { color: var(--op-danger-text); border-color: var(--op-danger-border); background: var(--op-danger-soft); } .op-btn--sm { height: 24px; padding: 0 8px; font-size: var(--op-text-xs); } .op-btn--icon { width: 28px; padding: 0; justify-content: center; } .op-btn--icon.op-btn--sm { width: 24px; } .op-btn:disabled, .op-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Pill / Badge */ .op-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--op-radius-pill); font-size: var(--op-text-xs); font-weight: 500; letter-spacing: 0; border: var(--op-hairline) solid transparent; white-space: nowrap; } .op-pill--neutral { background: var(--op-neutral-soft); color: var(--op-neutral-text); border-color: var(--op-neutral-border); } .op-pill--success { background: var(--op-success-soft); color: var(--op-success-text); border-color: var(--op-success-border); } .op-pill--warning { background: var(--op-warning-soft); color: var(--op-warning-text); border-color: var(--op-warning-border); } .op-pill--danger { background: var(--op-danger-soft); color: var(--op-danger-text); border-color: var(--op-danger-border); } .op-pill--info { background: var(--op-info-soft); color: var(--op-info-text); border-color: var(--op-info-border); } .op-pill--accent { background: var(--op-accent-soft); color: var(--op-accent-text); border-color: var(--op-accent-border); } /* Status dot */ .op-dot { width: 6px; height: 6px; border-radius: var(--op-radius-pill); display: inline-block; flex-shrink: 0; } .op-dot--success { background: var(--op-success); } .op-dot--warning { background: var(--op-warning); } .op-dot--danger { background: var(--op-danger); } .op-dot--info { background: var(--op-info); } .op-dot--neutral { background: var(--op-neutral); } .op-dot--accent { background: var(--op-accent); } /* Input */ .op-input { height: 28px; padding: 0 10px; border-radius: var(--op-radius-2); border: var(--op-hairline) solid var(--op-border); background: var(--op-surface); color: var(--op-text); font-size: var(--op-text-sm); outline: none; width: 100%; transition: border-color var(--op-duration-fast) var(--op-ease), background var(--op-duration-fast) var(--op-ease); } .op-input:focus { border-color: var(--op-border-focus); box-shadow: 0 0 0 3px var(--op-accent-soft); } .op-input::placeholder { color: var(--op-text-tertiary); } /* Kbd */ .op-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-family: var(--op-font-mono); font-size: 10.5px; font-weight: 500; color: var(--op-text-secondary); background: var(--op-bg-subtle); border: var(--op-hairline) solid var(--op-border); border-radius: 4px; letter-spacing: 0; } /* Avatar */ .op-avatar { width: 22px; height: 22px; border-radius: var(--op-radius-pill); background: var(--op-bg-muted); color: var(--op-text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: var(--op-hairline) solid var(--op-border); flex-shrink: 0; } /* Section heading (uppercase eyebrow) */ .op-eyebrow { font-size: var(--op-text-2xs); font-weight: 600; letter-spacing: var(--op-tracking-wider); text-transform: uppercase; color: var(--op-text-tertiary); } /* Hairline divider */ .op-divider { height: var(--op-hairline); background: var(--op-border); } .op-divider--v { width: var(--op-hairline); height: 100%; background: var(--op-border); } /* Scrollbar — minimal */ .op-app *::-webkit-scrollbar { width: 8px; height: 8px; } .op-app *::-webkit-scrollbar-track { background: transparent; } .op-app *::-webkit-scrollbar-thumb { background: var(--op-border-strong); border-radius: 4px; } .op-app { scrollbar-width: thin; scrollbar-color: var(--op-border-strong) transparent; } /* Firefox */ /* Focus ring helper */ .op-focus:focus-visible { outline: 2px solid var(--op-border-focus); outline-offset: 1px; border-radius: var(--op-radius-2); } /* Text selection — uses the --op-selection-bg token (previously defined but unwired) */ .op-app ::selection { background: var(--op-selection-bg); } /* Respect reduced-motion: keep transitions snappy-to-none, drop entrance animations */ @media (prefers-reduced-motion: reduce) { .op-app *, .op-app *::before, .op-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }