/* ═══════════════════════════════════════════════════════════════════════════ APPEX360 Reference — Token File (DEFAULT THEME) AUTHORITY --------- The verified APPEX360 visual reference set. This file is the single translation layer between those references and every themed surface: VISUAL REFERENCES ↓ THIS TOKEN FILE (the reference look = the DEFAULT theme) ↓ themes/base.css (shared components — consume tokens only) ↓ ASSESSMENTS / RESULTS / REPORTS / CHARTS / PDF / APPEXi / EXECUTIVE WHY THIS IS A THEME FILE (and not a new theme system) ---------------------------------------------------- Release 30 established the Theme Engine: one active token file per user (`active_theme_stylesheet`), all components consuming semantic tokens only. The reference look therefore ships as ONE MORE TOKEN FILE inside that existing architecture — no competing theme system, no per-component hard-coded colours. CONFIGURABILITY (permanent) --------------------------- Because every value below is a CSS custom property scoped to `body.theme-apex-reference`, a future user/admin override is a matter of overriding these variables in the `custom_brand` token file — no component edits. Users who have saved a different `theme_variant` keep it unchanged; only the platform DEFAULT resolves here. TWO FAMILIES FROM THE REFERENCES -------------------------------- 1. EXECUTIVE DARK — the product family. Surfaces, navigation, cards, interactive accent (violet), brand accent (amber). Applies to the application shell and analytical workspaces. 2. DOCUMENT LIGHT — the report/PDF family. A light "printed document" palette used for executive reports, results documents and PDF export, so a printed report visually belongs to the same product as the homepage. Exposed as `--apx-doc-*` and consumed by report styling. CHARTS ------ `--chart-1..5` (the contract every chart view already consumes) plus the extended `--chart-6..8` ramp, drawn from the reference hue family. ═══════════════════════════════════════════════════════════════════════════ */ /* ACTIVATION SCOPE — the Theme Engine emits data-theme on ; some layouts emit the body class. Both mechanisms must activate the same token set so this file stays the SINGLE SOURCE OF TRUTH for the reference theme. */ html[data-theme='apex_reference'], body.theme-apex-reference { /* ══ EXECUTIVE DARK — Surfaces ══════════════════════════════════════════ */ --surface-page: #0B1021; /* page ground */ --surface-raised: #16182B; /* raised card */ --surface-elevated: #1C1F35; /* elevated / hover card */ --background: #0B1021; --card: #16182B; --card-hover: #1C1F35; --surface-card: #16182B; --surface-card-hover: #1C1F35; --surface-inset: #070913; /* inset wells, table stripes */ --surface-deep: #0C1828; /* deep rail / side panel */ --surface-deepest: #01020D; /* deepest ground, overlays base */ --surface-overlay: rgba(1, 2, 13, 0.72); /* ══ EXECUTIVE DARK — Borders ═══════════════════════════════════════════ */ --border-width: 1px; --border: rgba(255, 255, 255, 0.08); --surface-border: rgba(255, 255, 255, 0.08); --surface-border-hover: rgba(255, 255, 255, 0.16); --border-strong: rgba(255, 255, 255, 0.14); --border-hairline: rgba(255, 255, 255, 0.05); /* ══ EXECUTIVE DARK — Typography ════════════════════════════════════════ */ --text: #E3E6EE; --text-primary: #E3E6EE; --text-secondary: #B6BDD3; --text-muted: #8A93AD; --text-link: #A79FCE; --text-on-primary: #FFFFFF; --heading: #F4F6FB; /* ══ EXECUTIVE DARK — Accents (reference: violet interactive + amber brand) */ --primary: #776FA3; --color-primary: #776FA3; --color-primary-hover: #8F87BC; --color-primary-light: rgba(119, 111, 163, 0.16); --primary-deep: #5C509F; --secondary: #3D3F53; --accent: #776FA3; --accent-hover: #8F87BC; --accent-soft: rgba(119, 111, 163, 0.14); --accent-secondary: #6D83A2; /* steel — secondary data series */ --accent-brand: #CD814A; /* amber — brand/mark accent only */ --accent-steel: #6D83A2; /* ══ EXECUTIVE DARK — Feedback ══════════════════════════════════════════ */ --success: #4FAE7E; --success-light: rgba(79, 174, 126, 0.14); --warning: #D9A05B; --warning-light: rgba(217, 160, 91, 0.14); --danger: #C9675F; --danger-light: rgba(201, 103, 95, 0.14); --info: #6D83A2; --info-light: rgba(109, 131, 162, 0.14); --focus: #8F87BC; /* ══ EXECUTIVE DARK — Shadows (deep ground → soft, high-spread) ═════════ */ --shadow-sm: 0 1px 2px rgba(1, 2, 13, 0.40); --shadow-md: 0 4px 12px rgba(1, 2, 13, 0.48); --shadow-lg: 0 14px 34px rgba(1, 2, 13, 0.56); --shadow-xl: 0 28px 64px rgba(1, 2, 13, 0.64); --shadow-hover: 0 10px 28px rgba(1, 2, 13, 0.52); /* ══ EXECUTIVE DARK — Radii ═════════════════════════════════════════════ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --btn-radius: 8px; --input-radius: 8px; --badge-radius: 999px; --modal-radius: 16px; /* ══ EXECUTIVE DARK — Navigation ════════════════════════════════════════ */ --nav-bg: rgba(7, 9, 19, 0.92); --nav-border: rgba(255, 255, 255, 0.07); --nav-text: #B6BDD3; --nav-text-hover: #F4F6FB; --nav-active-bg: rgba(119, 111, 163, 0.14); /* ══ EXECUTIVE DARK — Sidebar / rails ═══════════════════════════════════ */ --sidebar-bg: #0C1828; --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-text: #B6BDD3; --sidebar-active-bg: rgba(119, 111, 163, 0.14); /* ══ EXECUTIVE DARK — Buttons & inputs ══════════════════════════════════ */ --btn-bg: var(--accent); --btn-text: #FFFFFF; --btn-height: 44px; --input-bg: #070913; --input-border: rgba(255, 255, 255, 0.10); --input-focus: var(--accent); /* ══ CHARTS — reference hue family ═════════════════════════════════════ 1–5 are the existing contract consumed by current chart views. 6–8 extend the ramp; all derive from the reference palette. */ --chart-grid: rgba(255, 255, 255, 0.06); --chart-axis: #8A93AD; --chart-1: #776FA3; /* violet — primary series */ --chart-2: #6D83A2; /* steel — comparison series */ --chart-3: #CD814A; /* amber — emphasis / variance */ --chart-4: #5C509F; /* deep violet */ --chart-5: #3D3F53; /* slate — baseline / context */ --chart-6: #A79FCE; /* light violet */ --chart-7: #9DB6CE; /* light steel */ --chart-8: #E0B58E; /* pale amber */ --chart-tooltip-bg: #16182B; --chart-tooltip-border: rgba(255, 255, 255, 0.10); --chart-tooltip-text: #E3E6EE; /* ══ Category colours (maturity / domain identity) ══════════════════════ */ --category-financial: #CD814A; --category-risk: #C9675F; --category-governance: #776FA3; --category-intelligence: #A79FCE; --category-operations: #6D83A2; --category-executive: #5C509F; /* ══ DOCUMENT LIGHT — report / results / PDF family ════════════════════ The light "printed document" palette. Reports render on this family so an exported executive report belongs to the same product as the homepage. Consumed by report styling; never by the app shell. */ --apx-doc-ground: #F7F9FA; /* page ground */ --apx-doc-panel: #FFFFFF; /* document panel */ --apx-doc-panel-alt: #EEF2F7; /* alternating rows / bands */ --apx-doc-border: #D7DEE6; --apx-doc-border-strong: #B9C4D0; --apx-doc-ink: #16283C; /* primary text */ --apx-doc-ink-soft: #3D4F63; /* secondary text */ --apx-doc-ink-muted: #5A6B7E; /* captions, footnotes */ --apx-doc-navy: #122E4A; /* document header / headings */ --apx-doc-steel: #568BB5; /* document accent (graphics: 3:1 on light) */ --apx-doc-violet: #776FA3; /* continuity accent with the app */ --apx-doc-amber: #CD814A; /* emphasis in documents (graphics: 3:1 on light) */ /* Text members of the same families — 4.5:1 on the document ground (AA). Graphics keep the lighter values above; text consumes these. */ --apx-doc-steel-text: #3D6B94; --apx-doc-violet-text: #5E5688; --apx-doc-amber-text: #A05A26; --apx-doc-grid: #E3E9F0; /* chart grid on light ground */ --apx-doc-axis: #5A6B7E; --apx-doc-shadow: 0 6px 18px rgba(18, 46, 74, 0.10); /* ══ Reference metrics (spacing / density) ═════════════════════════════ */ --apx-card-pad: 24px; --apx-panel-gap: 24px; --apx-section-gap: 40px; --apx-hairline: rgba(255, 255, 255, 0.06); /* ══ LEGACY NAME BRIDGE — consolidation layer ═════════════════════════ Pre-Release-18 code reads --color-secondary / --color-success / etc. Those names previously resolved (via design_tokens.css :root) to the OLD indigo/emerald palette — competing values against the reference. Defining them HERE (html[data-theme] out-specifies :root) makes the reference theme the single authority for every semantic name in use. Values derive from the reference hues — no new colours introduced. */ --color-secondary: #8F87BC; /* light violet (hover tone) */ --color-success: #4FAE7E; --color-success-hover: #3F9668; --color-success-light: rgba(79, 174, 126, 0.16); --color-success-subtle: rgba(79, 174, 126, 0.07); --color-warning: #D9A05B; --color-warning-hover: #C48A44; --color-warning-light: rgba(217, 160, 91, 0.16); --color-warning-subtle: rgba(217, 160, 91, 0.07); --color-danger: #C9675F; --color-danger-hover: #B4524A; --color-danger-light: rgba(201, 103, 95, 0.16); --color-danger-subtle: rgba(201, 103, 95, 0.07); --color-info: #6D83A2; --color-info-light: rgba(109, 131, 162, 0.16); --color-primary-subtle: rgba(119, 111, 163, 0.08); /* ══ DOCUMENT LIGHT — status derivatives ═════════════════════════════ Document-tuned tones of --success/--warning/--danger/--info with adequate contrast on the light document ground. Derived from the reference palette; consumed only inside .apx-doc report surfaces. */ --apx-doc-success: #2E7D5B; --apx-doc-warning: #9A5B26; --apx-doc-danger: #B0483F; --apx-doc-info: #3E6E96; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE CONVERGENCE TOKENS — :root scope (always active) ───────────────────────────────────────────────────────────────────────── Single definition point for the approved homepage mockup convergence values. 24_homepage_enterprise.css (the `--aeb-mk-*` consumer) and 25_homepage_mockup_convergence.css (the `--apxc-*` consumer) now read THESE tokens instead of owning literal palettes — one authoritative theme-token architecture, zero competing component-level colour values. Scoped to :root (not the theme selectors) deliberately: the approved homepage composition must render identically regardless of the active user theme. A future admin override of these names (custom_brand) still flows through, because every consumer resolves via var(). ═══════════════════════════════════════════════════════════════════════════ */ :root { --apx-home-bg: #0a0d1d; /* deep navy field (mockup base) */ --apx-home-bg-2: #0d1024; /* navy gradient tail */ --apx-home-surface: #11142a; /* navy card surface */ --apx-home-surface-2: #151934; /* raised navy surface */ --apx-home-surface-3: #191d3c; /* highest navy surface */ --apx-home-nav-deep: #070A16; /* deepest nav ground (convergence layer) */ --apx-home-accent: #6d6ff5; /* mockup accent indigo */ --apx-home-accent-light: #8d8ffb; /* light accent */ --apx-home-radius: 18px; /* mockup card radius */ --apx-home-glow: 0 0 90px -30px rgba(109, 111, 245, 0.55); }