/* ── Design Tokens ──────────────────────────────────────────────────────────── Single source of truth for all CSS custom properties used across both standalone and executive dashboards. Chrome tokens follow the PrimaForja brand (2026-08-10 restyle): coal sidebar/page, forge-orange primary (deep #C25E00 on light for AA contrast, ember #FFB347 on dark). The chart-series palette below is deliberately NOT rebranded — categorical data colors must stay distinguishable, and an all-orange series ramp would destroy that. ────────────────────────────────────────────────────────────────────────────── */ :root { /* ── Layout tokens ─────────────────────────────────────────────────────── */ --color-primary: #C25E00; --color-primary-dark: #A54E00; --color-primary-light: #FF7A00; --color-accent-green: #28A745; --color-accent-red: #DC3545; --color-accent-amber: #FFC107; --color-accent-teal: #00B4D8; --color-bg-page: #EEF1F5; --color-bg-card: #FFFFFF; --color-bg-sidebar: #0B1220; --color-sidebar-text: #C0C6CF; --color-sidebar-active: #FFB347; --color-text-primary: #111827; --color-text-secondary: #6B7280; --color-border: #E2E6EC; --color-shadow: rgba(0,0,0,0.08); --sidebar-width: 220px; /* ── Chart series palette ──────────────────────────────────────────────── */ --primaforja-blue: #4E79A7; --primaforja-teal: #76B7B2; --primaforja-amber: #EDC948; --primaforja-red: #E15759; --primaforja-green: #59A14F; --primaforja-purple: #B07AA1; --primaforja-slate: #5A6A7A; --primaforja-orange: #F28E2B; /* ── Traffic-light KPI bands ───────────────────────────────────────────── */ --primaforja-kpi-green: #28A745; --primaforja-kpi-amber: #FFC107; --primaforja-kpi-red: #DC3545; /* ── KPI gauge band presets ────────────────────────────────────────────── */ --primaforja-gauge-green: #28A745; --primaforja-gauge-amber: #FFC107; --primaforja-gauge-red: #DC3545; /* ── Chart typography ──────────────────────────────────────────────────── */ --primaforja-chart-title-size: 14px; --primaforja-chart-title-weight: 600; --primaforja-axis-label-size: 12px; --primaforja-axis-label-weight: 400; --primaforja-kpi-value-size: 28px; --primaforja-kpi-value-weight: 700; --primaforja-kpi-label-size: 12px; --primaforja-kpi-label-weight: 400; /* ── Shared font family ────────────────────────────────────────────────── */ --primaforja-font-sans: 'DM Sans', sans-serif; --primaforja-font-mono: 'DM Mono', monospace; } /* ============================================================ DARK MODE — system preference ============================================================ */ @media (prefers-color-scheme: dark) { :root { --color-primary: #FFB347; --color-primary-dark: #FF7A00; --color-primary-light: #FFC36B; --color-accent-green: #34D058; --color-accent-red: #F85149; --color-accent-amber: #E3B341; --color-accent-teal: #39D2F5; --color-bg-page: #0B1220; --color-bg-card: #111827; --color-bg-sidebar: #080D16; --color-sidebar-text: #9CA3AF; --color-sidebar-active: #FFB347; --color-text-primary: #F3F4F6; --color-text-secondary: #9CA3AF; --color-border: #2A3648; --color-shadow: rgba(0,0,0,0.3); --primaforja-blue: #6B9BD2; --primaforja-teal: #8DD0CB; --primaforja-amber: #F0D96B; --primaforja-red: #E87577; --primaforja-green: #7ABF72; --primaforja-purple: #C49ABB; --primaforja-slate: #8B949E; --primaforja-orange: #F5A656; --primaforja-kpi-green: #34D058; --primaforja-kpi-amber: #E3B341; --primaforja-kpi-red: #F85149; --primaforja-gauge-green: #34D058; --primaforja-gauge-amber: #E3B341; --primaforja-gauge-red: #F85149; } } /* ============================================================ DARK MODE — manual toggle override Data attribute set by JS: ============================================================ */ [data-theme="dark"] { --color-primary: #FFB347; --color-primary-dark: #FF7A00; --color-primary-light: #FFC36B; --color-accent-green: #34D058; --color-accent-red: #F85149; --color-accent-amber: #E3B341; --color-accent-teal: #39D2F5; --color-bg-page: #0B1220; --color-bg-card: #111827; --color-bg-sidebar: #080D16; --color-sidebar-text: #9CA3AF; --color-sidebar-active: #FFB347; --color-text-primary: #F3F4F6; --color-text-secondary: #9CA3AF; --color-border: #2A3648; --color-shadow: rgba(0,0,0,0.3); --primaforja-blue: #6B9BD2; --primaforja-teal: #8DD0CB; --primaforja-amber: #F0D96B; --primaforja-red: #E87577; --primaforja-green: #7ABF72; --primaforja-purple: #C49ABB; --primaforja-slate: #8B949E; --primaforja-orange: #F5A656; --primaforja-kpi-green: #34D058; --primaforja-kpi-amber: #E3B341; --primaforja-kpi-red: #F85149; --primaforja-gauge-green: #34D058; --primaforja-gauge-amber: #E3B341; --primaforja-gauge-red: #F85149; } /* Explicit light overrides (restores defaults if system prefers dark) */ [data-theme="light"] { --color-primary: #C25E00; --color-primary-dark: #A54E00; --color-primary-light: #FF7A00; --color-accent-green: #28A745; --color-accent-red: #DC3545; --color-accent-amber: #FFC107; --color-accent-teal: #00B4D8; --color-bg-page: #EEF1F5; --color-bg-card: #FFFFFF; --color-bg-sidebar: #0B1220; --color-sidebar-text: #C0C6CF; --color-sidebar-active: #FFB347; --color-text-primary: #111827; --color-text-secondary: #6B7280; --color-border: #E2E6EC; --color-shadow: rgba(0,0,0,0.08); --primaforja-blue: #4E79A7; --primaforja-teal: #76B7B2; --primaforja-amber: #EDC948; --primaforja-red: #E15759; --primaforja-green: #59A14F; --primaforja-purple: #B07AA1; --primaforja-slate: #5A6A7A; --primaforja-orange: #F28E2B; --primaforja-kpi-green: #28A745; --primaforja-kpi-amber: #FFC107; --primaforja-kpi-red: #DC3545; --primaforja-gauge-green: #28A745; --primaforja-gauge-amber: #FFC107; --primaforja-gauge-red: #DC3545; }