/* ============================================================================ AI DECK · SHARED SEMANTIC TOKEN CONTRACT (experiment — prototyps/theming-superapp) ---------------------------------------------------------------------------- ONE vocabulary every app + every theme speaks. Apps consume ONLY these names; themes (presets.css) supply the VALUES. This is the whole idea of the experiment: components reference semantics, never raw colours. Axes (all set on ): data-theme = mission | neon | trading | aurora (the design system) data-mode = dark | light (the ground) data-brand = neutral | bkw | qynn | powerflow | sbb (white-label accent) NAMING RULE: semantic, never literal. `--surface` not `--panel-dark-blue`. BRAND vs SEMANTIC: brand (--brand*) may re-tint per customer; semantics (--ok/--warn/--danger) are FIXED so a red brand never masks a red error. ============================================================================ */ :root { /* ---- 1. GROUND — surfaces & ink (8) ----------------------------------- */ --bg: #0b0e12; /* app/page background (lowest layer) */ --surface: #12171d; /* panel / card fill (elevation 1) */ --surface-2: #1a2027; /* raised or inset instrument (elevation 2) */ --fg: #e7eef2; /* primary text / icons */ --fg-muted: #9aa7b0; /* secondary text (labels, meta) — AA ≥4.5 */ --fg-faint: #6b7680; /* tertiary / DECORATIVE only — never data */ --line: rgba(255,255,255,.12); /* hairline divider / border */ --line-strong: rgba(255,255,255,.20); /* section keyline / column rule */ /* ---- 2. BRAND — the ONE re-tintable slot (4) -------------------------- */ --brand: #5b8cff; /* vivid brand accent (fills, active marks) */ --brand-ink: #9ab6ff; /* brand AS TEXT on a surface — AA ≥4.5 */ --brand-on: #0b0e12; /* text/icon ON a solid --brand fill */ --brand-grad: linear-gradient(90deg,#5b8cff,#8f7cff); /* gradient brands */ /* ---- 3. SEMANTICS — FIXED, off-brand (3) ------------------------------ */ --ok: #37e0a0; /* success */ --warn: #f5b942; /* warning */ --danger: #ff5a6a; /* error / destructive */ /* ---- 4. FORM — shape & depth (3) -------------------------------------- */ --radius: 10px; /* base corner radius (2px Trading … 18 Aurora)*/ --shadow: 0 12px 34px -18px rgba(0,0,0,.7); /* elevation ("none" ok)*/ --focus: #7fb0ff; /* focus ring — brand-INDEPENDENT, always AA */ /* ---- 5. TYPE (2) ------------------------------------------------------ */ --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace; /* ============================ EXTENDED (opt-in) ======================== */ /* Not part of the daily-20; presets set them, most components inherit. */ --font-display: var(--font-ui); /* headings (Aurora=rounded etc.)*/ --space: 1; /* density multiplier: .85 dense … 1.15 airy */ --glow: none; /* "live" glow box-shadow; flat systems = none */ --brand-glow: none; /* signature colored glow (Neon/Aurora) or none*/ --radius-lg: calc(var(--radius) * 1.6);/* cards / large panes */ --radius-pill: 999px; --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05); /* top light on wells */ --tab: border-bottom; /* active-marker idiom hook (doc)*/ } /* ---------------------------------------------------------------------------- NEUTRAL FALLBACK — if no data-theme is set, the app still renders sanely (calm dark neutral). Light neutral for prefers-color-scheme / no-JS. ---------------------------------------------------------------------------- */ :where([data-mode="light"]) { --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f4; --fg:#111820; --fg-muted:#586470; --fg-faint:#8a949e; --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.2); --brand-on:#ffffff; --focus:#1e5bd6; --shadow:0 10px 30px -18px rgba(0,20,40,.35); } /* ============================================================================ SHADCN BRIDGE (admin-ui + conversation-processing already speak shadcn) ---------------------------------------------------------------------------- Import this AFTER shadcn's own :root so our contract drives its tokens. This is how the two Tailwind apps get themed for free — no component edits. Wrapped in @layer so app overrides still win where intended. ============================================================================ */ @layer aideck-bridge { :root, .dark { --background: var(--bg); --foreground: var(--fg); --card: var(--surface); --card-foreground: var(--fg); --popover: var(--surface-2); --popover-foreground: var(--fg); --primary: var(--brand); --primary-foreground: var(--brand-on); --secondary: var(--surface-2); --secondary-foreground: var(--fg); --muted: var(--surface-2); --muted-foreground: var(--fg-muted); --accent: var(--surface-2); --accent-foreground: var(--fg); --destructive: var(--danger); --border: var(--line); --input: var(--line); --ring: var(--focus); --sidebar: var(--surface); --sidebar-foreground: var(--fg); --sidebar-primary: var(--brand); --sidebar-accent: var(--surface-2); --sidebar-border: var(--line); --sidebar-ring: var(--focus); --radius: var(--radius); /* shadcn radius scale keys off this */ } } /* ---------------------------------------------------------------------------- BESPOKE-APP BRIDGE (projectmanager / wiki / htmleditor legacy names) ---------------------------------------------------------------------------- Drop-in aliases so a legacy app is themed WITHOUT renaming every rule at once. Migrate rules onto the canonical names over time, then delete a line. ---------------------------------------------------------------------------- */ :root { --background-legacy: var(--bg); /* projectmanager */ --surface-legacy: var(--surface); --text: var(--fg); --text-muted: var(--fg-muted); --accent-legacy: var(--brand); --on-accent: var(--brand-on); --border-legacy: var(--line); /* wiki */ --bg-elev: var(--surface); --danger-legacy: var(--danger); /* htmleditor */ --panel: var(--surface); --ink: var(--fg); --line-legacy: var(--line); --flame: var(--brand); --ok-legacy: var(--ok); }