/* ============================================================ OberBuilt Analysis Engine — Design Tokens ------------------------------------------------------------ Single source of truth for the OberBuilt design system as consumed by the WordPress plugin. Enqueued globally on every plugin surface. All --oae-* tokens MUST resolve here; no per-surface fragment may override these values. This build is DARK-ONLY — an instrument-cluster aesthetic modeled on a modern OEM gauge cluster. There is no light theme. Cyan is the primary because it pops on the deep steel-ink background the way a multimeter readout does on matte plastic. Racing red and caution yellow do their signaling job; everything else gets out of their way. ============================================================ */ :root { /* ---------- Color ---------- */ --oae-color-bg: #0B1620; /* ink — page background */ --oae-color-surface: #142231; /* raised steel — cards, fields, drop zones */ --oae-color-primary: #00B8D4; /* cyan-500 — CTAs, active step, focus */ --oae-color-ok: #2BBF7A; /* green — OK only, never CD */ --oae-color-warn: #F2C300; /* yellow-500 — caution, low confidence */ --oae-color-danger: #E1352B; /* red-500 — destructive, FAIL, errors */ --oae-color-neutral: #8092A4; /* steel — CANNOT_DETERMINE only */ /* Foreground text — tuned for AA on bg + surface. */ --oae-fg-1: #EAF1F8; /* primary body text */ --oae-fg-2: #B8C5D2; /* secondary text */ --oae-fg-3: #7E8C9B; /* muted / labels */ --oae-fg-on-primary: #062029; /* dark text on cyan for AA */ --oae-fg-on-danger: #FFFFFF; --oae-fg-on-warn: #2C1C00; /* dark text on yellow for AA */ --oae-border: #243648; /* card / input borders */ --oae-border-strong: #3A506B; /* hover / focused borders */ /* Tinted backgrounds for status banners (paired w/ status color) */ --oae-color-warn-bg: #2E2614; --oae-color-danger-bg: #311816; --oae-color-ok-bg: #112A20; --oae-color-neutral-bg: #1A2735; /* ---------- Typography — families ---------- */ --oae-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --oae-font-heading: "Saira", "IBM Plex Sans", system-ui, -apple-system, sans-serif; --oae-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Typography — sizes (exactly 4, descending) ---------- */ --oae-text-display: 32px; /* verdict badge headline, wizard step title */ --oae-text-heading: 20px; /* section headings, card titles */ --oae-text-body: 16px; /* body, form fields, buttons */ --oae-text-label: 13px; /* labels, status pills, micro copy */ /* ---------- Spacing — all multiples of 4 ---------- */ --oae-spacing-xs: 4px; --oae-spacing-sm: 8px; --oae-spacing-md: 16px; --oae-spacing-lg: 24px; --oae-spacing-xl: 32px; --oae-spacing-2xl: 48px; --oae-spacing-3xl: 64px; /* ---------- Component tokens ---------- */ --oae-radius: 6px; --oae-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); --oae-touch-target: 44px; --oae-progress-height: 6px; --oae-chart-height-min: 220px; /* ---- PHASE 6.1 ADDITIONS — App-Shell tokens ---- */ /* Typography — line heights Flagged as a gap during 6.1 UI-SPEC verification — no body line-height token previously existed. Top bar items use the tight variant so the bar height stays compact; content uses body. Mono retains tight by convention. */ --oae-line-height-body: 1.5; --oae-line-height-tight: 1.2; /* App-shell top bar chrome — one notch elevated above --oae-color-surface. The bar must visually separate from page content so it doesn't bleed in. */ --oae-color-topbar-bg: #0F1C29; /* Top bar shadow — sticky chrome elevation without competing with --oae-shadow-card. */ --oae-shadow-topbar: 0 1px 0 rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35); /* Account avatar — primary-adjacent tint without spending the primary budget. */ --oae-color-avatar-bg: #163848; --oae-color-avatar-fg: #7CE2F0; /* cyan-200ish, AA on avatar-bg */ /* Bell unread badge — reuses primary so notifications match focus rings. */ --oae-color-badge-unread: var(--oae-color-primary); --oae-color-badge-text: var(--oae-fg-on-primary); /* Mobile drawer scrim — semi-opaque ink. */ --oae-color-drawer-backdrop: rgba(7, 14, 21, 0.72); /* Structural sizing — top bar height and WP admin bar coexistence offset. */ --oae-topbar-height: 56px; --oae-wp-adminbar-height: 32px; /* desktop / ≥783px */ --oae-wp-adminbar-height-mobile: 46px; /* mobile / ≤782px (WP hard-coded breakpoint) */ /* Motion — drawer + dropdown timing. Single source for reduced-motion overrides. */ --oae-motion-duration: 180ms; --oae-motion-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ---- PHASE 6.4 ADDITIONS — Flat Vehicle Editor tokens ---- */ --oae-editor-max-width: 760px; --oae-color-actionbar-bg: #0F1C29; --oae-shadow-actionbar: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.40); } /* ============================================================ Defensive theme overrides ------------------------------------------------------------ The OberBuilt design system is dark-only — all text inside an OAE surface (any element with a class starting with "oae-") must use the dark-palette foreground tokens. Themes like Divi apply their own heading colors via selectors such as `.entry-content h2` (specificity 0,1,1), which beat the partials' own `.oae-foo__title` declarations (0,1,0). The compound selectors below (0,2,1) defeat that without needing !important and without modifying every partial individually. Partials may still override with a more specific selector when they intentionally want a non-fg-1 color (e.g. eyebrows that use fg-3). ============================================================ */ [class^="oae-"] h1, [class^="oae-"] h2, [class^="oae-"] h3, [class^="oae-"] h4, [class^="oae-"] h5, [class^="oae-"] h6, [class*=" oae-"] h1, [class*=" oae-"] h2, [class*=" oae-"] h3, [class*=" oae-"] h4, [class*=" oae-"] h5, [class*=" oae-"] h6 { color: var(--oae-fg-1); }