/* * tokens.css — Asenion authoring panel design tokens * * Mirrors the Fairly main-platform token values exactly (extracted from * fairly-app/node/src/client/components/base/core/color.ts). * * Load as the LAST stylesheet in each page's so that source-order * wins over the page-inline :root blocks (equal specificity, later wins). * * DO NOT add structural vars (widths, z-index, transitions) here — * those belong to individual pages. */ /* ─── LIGHT MODE (default) ──────────────────────────────────────── */ :root { /* Brand / primary */ --brand: #144959; --brand-hover: #0E3D4B; --brand-active: #0A3340; /* Accent (clockwork orange) */ --accent: #EA580C; --accent-dark: #C2410C; --accent-hover: #9A3412; --accent-bg: rgba(234,88,12,0.08); --accent-bg-hover: rgba(234,88,12,0.12); --accent-light: rgba(234,88,12,0.12); /* replaces bootstrap --accent-light */ --info: #19C3D6; /* Canvas / backgrounds */ --bg: #F4F3F0; --panel: #FFFFFF; --surface: #FFFFFF; --surface2: #F5F4F1; --card: #FFFFFF; /* Borders */ --border: rgba(15,23,42,0.14); --border-subtle: rgba(15,23,42,0.08); /* Text */ --text: #111827; --fg: #111827; --text-secondary: #374151; --muted: #6B7280; --text-muted: #6B7280; --text-placeholder: #9AA6B2; /* Shadows */ --shadow: 0 1px 2px rgba(15,23,42,0.06), 0 2px 10px rgba(15,23,42,0.04); --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 2px 10px rgba(15,23,42,0.04); --shadow-md: 0 10px 28px rgba(15,23,42,0.10); --shadow-lg: 0 10px 28px rgba(15,23,42,0.10); /* Shape */ --radius: 8px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Fonts */ --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace; /* Shell sidebar — overrides shell.css (mirror fairly-app NAV_TOKENS). The sidebar is dark teal in both modes, so the active item uses LIGHT text + a subtle white overlay + the cyan indicator bar. active-text was #144959 (== the sidebar bg → invisible selected item); corrected to #F7F5F2. */ --shell-sidebar-bg: #144959; --shell-sidebar-text: rgba(247,245,242,0.88); --shell-sidebar-active-bg: rgba(255,255,255,0.10); --shell-sidebar-active-text: #F7F5F2; --shell-sidebar-active-indicator:#19C3D6; --shell-sidebar-hover-bg: rgba(255,255,255,0.06); --shell-topbar-bg: #F4F3F0; --shell-topbar-text: #6B7280; --shell-topbar-border: rgba(15,23,42,0.10); } /* ─── DARK MODE ──────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { /* Brand / primary — same in dark */ --brand: #144959; --brand-hover: #0E3D4B; --brand-active: #0A3340; /* Accent — same in dark */ --accent: #EA580C; --accent-dark: #C2410C; --accent-hover: #9A3412; --accent-bg: rgba(234,88,12,0.08); --accent-bg-hover: rgba(234,88,12,0.12); --accent-light: rgba(234,88,12,0.14); --info: #19C3D6; /* Canvas / backgrounds */ --bg: #111315; --panel: #191B1E; --surface: #191B1E; --surface2: #1F2124; --card: #191B1E; /* Borders */ --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.06); /* Text */ --text: #E8EAED; --fg: #E8EAED; --text-secondary: #9CA3AF; --muted: #6B7280; --text-muted: #6B7280; --text-placeholder: #4B5563; /* Shadows */ --shadow: 0 1px 3px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.30); --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.30); --shadow-md: 0 8px 24px rgba(0,0,0,0.50); --shadow-lg: 0 8px 24px rgba(0,0,0,0.50); /* Shell sidebar — overrides shell.css (sidebar stays brand teal in dark too, so the active treatment is identical to light: light text + white overlay + cyan bar). Was active-text #EA580C / active-bg dark teal. */ --shell-sidebar-bg: #144959; --shell-sidebar-text: rgba(247,245,242,0.88); --shell-sidebar-active-bg: rgba(255,255,255,0.10); --shell-sidebar-active-text: #F7F5F2; --shell-sidebar-active-indicator:#19C3D6; --shell-sidebar-hover-bg: rgba(255,255,255,0.06); --shell-topbar-bg: #111315; --shell-topbar-text: #6B7280; --shell-topbar-border: rgba(255,255,255,0.07); } } /* ─── FONT APPLICATION ──────────────────────────────────────────── */ body { font-family: var(--font-sans); } h1 { font-family: var(--font-display); }