/* ============================================================ Octacer Design System — canonical bridge layer (single source of truth) Origin: octa-id (id.octacer.info). Copy this file verbatim into each satellite's wwwroot/css/ so every Octacer app looks identical. Plain CSS component layer alongside Tailwind browser CDN utilities. Loaded after the CDN-generated utilities so these semantic tokens win. Deep indigo / slate brand. Light + dark both supported. ============================================================ */ :root { color-scheme: light; /* Brand — deep indigo */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-800: #3730a3; /* Public brand tokens. Apps may override these once in their own theme layer. */ --primary: var(--brand-600); --primary-active: var(--brand-700); --primary-foreground: #ffffff; /* Ink / slate neutrals */ --ink-900: #0f172a; --ink-700: #334155; --ink-600: #475569; --ink-500: #64748b; --ink-400: #94a3b8; --line: #e2e8f0; --line-2: #f1f5f9; --line-strong: #dbe1ea; /* slightly darker hairline — card hover / active borders */ --surface: #ffffff; --popover: #ffffff; /* elevated surface (menus/popovers) — a distinct rung in dark */ --bg: #f8fafc; --surface-muted: #f8fafc; --input: var(--line); /* field border; lighter than --line in dark so inputs read editable */ --overlay: rgb(15 23 42 / 0.5); /* modal / drawer / sidebar scrim */ /* State — solid (fill), foreground (text on solid), subtle (tinted bg) + subtle-foreground. Solids/foregrounds are mode-invariant (coloured chips/buttons); subtles flip in .dark. */ --success: #059669; --success-foreground: #ffffff; --warning: #d97706; --warning-foreground: #ffffff; --danger: #dc2626; --danger-foreground: #ffffff; --info: #2563eb; --info-foreground: #ffffff; --success-subtle: #ecfdf5; --success-subtle-foreground: #065f46; --warning-subtle: #fffbeb; --warning-subtle-foreground: #92400e; --danger-subtle: #fef2f2; --danger-subtle-foreground: #991b1b; --info-subtle: #eff6ff; --info-subtle-foreground: #1e40af; /* Chart palette — distinct, accessible hues (surfaced to Tailwind as --color-chart-N, consumed by octacer-charts.js / _ChartCard). Lightened in .dark for dark canvases. */ --chart-1: var(--brand-600); --chart-2: #22c55e; --chart-3: #f59e0b; --chart-4: #ec4899; --chart-5: #06b6d4; /* Typography: use semantic classes for values/code so content remains intentional. */ --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tracking-normal: -0.01em; /* body default; base of the Tailwind tracking-* scale */ /* Brand/mono gradients. Apps can replace these variables without changing components. */ --gradient-brand: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 52%, var(--brand-500) 100%); --gradient-mono: linear-gradient(135deg, #0f172a 0%, #334155 52%, #64748b 100%); --gradient-surface: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); --radius: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --ring: 0 0 0 4px rgba(79, 70, 229, .15); --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .04), 0 1px 3px 0 rgba(15, 23, 42, .06); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05); --shadow-lg: 0 12px 30px -8px rgba(15, 23, 42, .18); /* Motion — durations + easing curves for consistent transitions. */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Dark mode: shared class applied to by octacer-theme-init.js. */ .dark { color-scheme: dark; /* AA-contrast primary: indigo-600 as text on near-black fails; use a lighter fill + dark text. */ --primary: #818cf8; --primary-active: #6366f1; --primary-foreground: #1e1b4b; --ink-900: #f8fafc; --ink-700: #cbd5e1; --ink-600: #94a3b8; --ink-500: #94a3b8; --ink-400: #64748b; --line: #334155; --line-2: #1e293b; --line-strong: #475569; --surface: #0f172a; --popover: #172338; /* elevated rung above --surface for menus/popovers */ --surface-muted: #1e293b; --bg: #020617; --input: #475569; /* lighter than --line so inputs read as editable on dark cards */ --overlay: rgb(0 0 0 / 0.7); /* Status subtle fills inverted for dark canvases (solids/foregrounds stay mode-invariant). */ --success-subtle: #0c2417; --success-subtle-foreground: #86efac; --warning-subtle: #2b1d05; --warning-subtle-foreground: #fcd34d; --danger-subtle: #2a1215; --danger-subtle-foreground: #fca5a5; --info-subtle: #0b2434; --info-subtle-foreground: #7dd3fc; /* Lighter chart hues for dark canvases. */ --chart-1: var(--brand-500); --chart-2: #10b981; --chart-3: #fbbf24; --chart-4: #f472b6; --chart-5: #22d3ee; --gradient-brand: linear-gradient(135deg, #312e81 0%, #4338ca 52%, #6366f1 100%); --gradient-mono: linear-gradient(135deg, #020617 0%, #1e293b 52%, #475569 100%); --gradient-surface: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } /* Decorative widget backgrounds for the partial library (branded stat tile, CTA card, profile cover). Default to neutral brand gradients — NO external image request (keeps the zero-external-calls policy). Apps may override any of these once with a first-party image, e.g. .oc-profile-cover{background-image:url(/img/cover.jpg)}. */ .channel-stats-bg { background-image: linear-gradient(135deg, var(--brand-50), transparent 60%); } .entry-callout-bg { background-image: radial-gradient(120% 120% at 100% 0%, var(--brand-100), transparent 55%); } .oc-profile-cover { background-image: linear-gradient(120deg, var(--brand-600), var(--brand-800)); } .dark .channel-stats-bg { background-image: linear-gradient(135deg, rgba(99,102,241,.15), transparent 60%); } .dark .entry-callout-bg { background-image: radial-gradient(120% 120% at 100% 0%, rgba(99,102,241,.18), transparent 55%); } /* Decorative keyframes (migrated out of the old inline