/* ============================================================ STEP — APPLICATION UI TOKENS (dark, quiet brand) For internal tools, dashboards, portals. Not the marketing site. ------------------------------------------------------------ Principles - Dark slate canvas. Eye-safe for all-day use. - Brand blue/yellow reserved for: primary CTAs, focus ring, selection, links, key chart accents. Never as a background fill for large surfaces. - 6px radius, 1px borders, no shadows on flat chrome, single subtle elevation on popovers/modals only. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Archivo+Black&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- SLATE CANVAS ---------- */ --s-bg-0: #0B0D12; /* deepest — page behind panels */ --s-bg-1: #10131A; /* main app background */ --s-bg-2: #161A23; /* panel / card */ --s-bg-3: #1C212C; /* elevated / hover */ --s-bg-4: #242A37; /* active / selected row */ --s-border: #242A37; --s-border-strong:#2E3543; --s-divider: #1C212C; --s-fg-1: #E7EAF0; /* primary text */ --s-fg-2: #A6AEBD; /* secondary / labels */ --s-fg-3: #6B7280; /* muted / placeholder */ --s-fg-disabled:#454B57; /* ---------- BRAND ACCENTS (used sparingly) ---------- */ --s-brand: #4F48FF; /* Step blue, slightly lifted for dark bg */ --s-brand-hover: #6A64FF; --s-brand-pressed: #3F38E6; --s-brand-weak: rgba(79,72,255,0.16); /* selection tint */ --s-brand-weak-2: rgba(79,72,255,0.08); /* row hover */ --s-accent: #FFDB00; /* yellow — focus ring, key metric */ --s-accent-weak: rgba(255,219,0,0.18); --s-link: #8C8AFF; --s-link-hover: #A8A6FF; /* ---------- SEMANTIC STATES ---------- */ --s-success: #3FF09E; --s-success-weak: rgba(63,240,158,0.15); --s-warning: #FFC24A; --s-warning-weak: rgba(255,194,74,0.15); --s-danger: #FF6B7A; --s-danger-weak: rgba(255,107,122,0.15); --s-info: #6AB9FF; --s-info-weak: rgba(106,185,255,0.15); /* ---------- TYPE ---------- */ --s-font-ui: 'Inter', system-ui, -apple-system, sans-serif; --s-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --s-font-display: 'Archivo Black', 'Inter', system-ui, sans-serif; --s-t-display: 28px; /* page title — the only "brand moment" */ --s-t-h1: 22px; --s-t-h2: 17px; --s-t-h3: 14px; --s-t-body: 14px; --s-t-small: 13px; --s-t-micro: 12px; --s-t-mono: 12.5px; /* ---------- SPACING (4pt) ---------- */ --s-sp-1: 4px; --s-sp-2: 8px; --s-sp-3: 12px; --s-sp-4: 16px; --s-sp-5: 20px; --s-sp-6: 24px; --s-sp-7: 32px; --s-sp-8: 48px; --s-sp-9: 64px; /* ---------- RADII ---------- */ --s-r-sm: 4px; --s-r-md: 6px; /* default — buttons, inputs, cards */ --s-r-lg: 10px; /* modals */ --s-r-pill: 999px; /* ---------- ELEVATION (used sparingly) ---------- */ --s-shadow-pop: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35); --s-shadow-modal: 0 16px 48px rgba(0,0,0,0.5); /* ---------- MOTION ---------- */ --s-dur-fast: 100ms; --s-dur-ui: 160ms; --s-ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- FOCUS ---------- */ --s-focus-ring: 0 0 0 2px var(--s-bg-1), 0 0 0 4px var(--s-accent); } /* ============================================================ BASE ELEMENT STYLES — opt in by applying `.app` to or ============================================================ */ .app { background: var(--s-bg-1); color: var(--s-fg-1); font-family: var(--s-font-ui); font-size: var(--s-t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } .app ::selection { background: var(--s-brand-weak); color: var(--s-fg-1); } .app *:focus-visible { outline: none; box-shadow: var(--s-focus-ring); border-radius: var(--s-r-md); } .app a { color: var(--s-link); text-decoration: none; } .app a:hover { color: var(--s-link-hover); text-decoration: underline; text-underline-offset: 3px; }