/* ============================================================================= BRAND TOKENS (folded from brand-tokens.css — Phase 8.1 / B6) Canonical brand primitives; also still loadable via brand-tokens.css alias. ============================================================================= */ /* ============================================================================= AIO ERP — BRAND TOKENS (single source of truth) ----------------------------------------------------------------------------- Part of the AIO Nexus family design system. AIO ERP = the navy node. LOAD THIS FIRST in the cascade, before bundle-foundation.css and all themes. Everything downstream consumes these via var(--brand-*). Sections: 1. Brand primitives — raw palette, never used directly in components 2. Compatibility shims — bridge legacy --nx-* / --gold during migration 3. Module → product colors — KPI tiles, sidebar glyphs, charts Spec: docs/brand-theme/SPEC.md §2 ============================================================================= */ /* ── 1. BRAND PRIMITIVES ──────────────────────────────────────────────────── */ :root { /* Core */ --brand-ink: #0A1733; --brand-ink-2: #142849; --brand-navy: #1E3A6F; --brand-navy-soft: #2C4F8A; --brand-navy-light: #EEF2F9; --brand-gold: #D4A24C; --brand-gold-2: #B8862E; --brand-gold-light: #FAF3E2; --brand-blue: var(--brand-navy); /* legacy alias — navy (was #147CBB); do not reintroduce old blue */ /* Product / status hues */ --brand-teal: #0F766E; --brand-teal-light: #E6F4F2; --brand-green: #15803D; --brand-green-light: #E8F5EC; --brand-violet: #6D28D9; --brand-violet-light:#F1ECFB; --brand-violet-2: #4C1D95; --brand-violet-soft: #7C3AED; --brand-red: #DC2626; --brand-red-light: #FCEDED; --brand-wa: #25D366; /* Neutrals + text scale */ --brand-surface: #F6F8FB; --brand-paper: #FCFCFD; --brand-line: #E5E9F0; --brand-line-2: #D5DBE5; --brand-t1: #0A1733; --brand-t2: #3D4D6B; --brand-t3: #7A8AA6; --brand-t4: #A8B3C6; /* Type — Inter for UI, JetBrains Mono for code/currency codes. No italic. */ --brand-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --brand-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Display font — used for headings, KPIs, hero text. Defaults to sans (no display font). */ --brand-font-display: var(--brand-font-sans); /* Semantic leading scale — role-based line-height aliases */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-body: 1.6; --leading-relaxed: 1.75; /* Motion */ --brand-ease: cubic-bezier(.4, 0, .2, 1); --brand-dur-fast: 150ms; --brand-dur: 250ms; --brand-dur-slow: 400ms; } /* ── 2. COMPATIBILITY SHIMS ─────────────────────────────────────────────────── Keep existing pages working while callers migrate to --brand-*. Removed in PR-7 once nothing references these directly. */ :root { --nx-ink: var(--brand-ink); --nx-ink-2: var(--brand-ink-2); --nx-navy: var(--brand-navy); --nx-navy-soft:var(--brand-navy-soft); --nx-gold: var(--brand-gold); --nx-gold-dark:var(--brand-gold-2); --nx-surface: var(--brand-surface); --nx-paper: var(--brand-paper); --nx-border: var(--brand-line); --nx-shadow: var(--brand-shadow-lg); --nx-r: var(--brand-r); --nx-r-sm: var(--brand-r-sm); /* Legacy theme-layer alias used widely today */ --gold: var(--brand-gold); } /* ── 3. MODULE → PRODUCT COLOR MAP ──────────────────────────────────────────── Drives KPI tiles, sidebar module glyphs, and chart series per module. */ :root { --mod-erp: var(--brand-navy); --mod-remit: var(--brand-gold); --mod-market: var(--brand-teal); --mod-crm: var(--brand-green); --mod-accounting: var(--brand-violet); --mod-tax: var(--brand-red); --mod-legal: var(--brand-teal); --mod-marketing: var(--brand-gold-2); --mod-dev: var(--brand-navy); --mod-hosting: var(--brand-green); --mod-wa-api: var(--brand-wa); --mod-loc-api: var(--brand-red); } /* === end folded brand-tokens === */ /* ============================================================================= AIO ERP — MASTER DESIGN TOKENS (tokens.css) ----------------------------------------------------------------------------- Single source of truth for every design value in the app. Load this file FIRST in the CSS cascade, before all other app stylesheets. All other stylesheets should consume these variables via var(--token-name). Theme overrides live in premium-themes.css (per [data-theme] selector). Dark-mode component rules live in dark-mode.css. ============================================================================= SECTIONS 0. Color Primitives — raw palette, never used directly in components 1. Semantic Color Aliases — light-mode defaults 2. Elevation / Shadows 3. Shape / Radii 4. Spacing Scale 5. Typography Scale 6. Motion / Transitions 7. Z-Index Layers 8. Form & Input Tokens 9. Button Tokens 10. Card / Panel Tokens 11. Sidebar Accent Tokens 12. Dark-Mode Token Overrides ============================================================================= */ /* ============================================================================= 0. COLOR PRIMITIVES Raw palette values — only referenced by Section 1 semantic aliases. Components must never use primitives directly. ============================================================================= */ :root { /* Brand blues */ --palette-blue-50: #eff6ff; --palette-blue-100: #dbeafe; --palette-blue-200: #bfdbfe; --palette-blue-400: #60a5fa; --palette-blue-500: #3b82f6; --palette-blue-600: #2563eb; --palette-blue-700: #1d4ed8; --palette-blue-800: #1e40af; --palette-blue-900: #1e3a8a; /* Brand (AIO house blue) */ --palette-aio-400: #2C4F8A; --palette-aio-500: #1E3A6F; --palette-aio-600: #0A1733; --palette-aio-100: #e0f2fe; /* Slate neutrals */ --palette-slate-50: #f8fafc; --palette-slate-100: #f1f5f9; --palette-slate-200: #e2e8f0; --palette-slate-300: #cbd5e1; --palette-slate-400: #94a3b8; --palette-slate-500: #64748b; --palette-slate-600: #475569; --palette-slate-700: #334155; --palette-slate-800: #1e293b; --palette-slate-900: #0f172a; /* Semantic status */ --palette-green-100: #dcfce7; --palette-green-500: #22c55e; --palette-green-700: #15803d; --palette-green-900: #166534; --palette-red-100: #fee2e2; --palette-red-400: #f87171; --palette-red-500: #ef4444; --palette-red-700: #b91c1c; --palette-red-900: #991b1b; --palette-yellow-100:#fef3c7; --palette-yellow-500:#f59e0b; --palette-yellow-700:#b45309; --palette-yellow-900:#92400e; --palette-orange-500:#fca424; --palette-cyan-100: #cffafe; --palette-cyan-400: #22d3ee; --palette-cyan-500: #06b6d4; /* Dark surfaces */ --palette-dark-50: #1e2125; --palette-dark-100: #282c30; --palette-dark-200: #1a1d20; --palette-dark-900: #121416; } /* ============================================================================= 1. SEMANTIC COLOR ALIASES — LIGHT-MODE DEFAULTS These are what components should reference. Theme overrides (premium-themes.css) will replace these per [data-theme] selector with higher specificity. ============================================================================= */ :root { /* Brand / Primary — navy house color (ADR-001); do not reintroduce #147cbb here */ --primary: var(--palette-aio-500); --primary-dark: var(--palette-aio-600); --primary-light: var(--palette-aio-100); --primary-color: var(--palette-aio-500); /* was palette-blue-600; aligned to navy 2026-07-30 */ --accent-color: #7c3aed; /* Secondary & Status */ --secondary: var(--palette-slate-500); --warning: var(--palette-orange-500); --danger: var(--palette-red-500); --success: var(--palette-green-500); --info: var(--palette-cyan-500); --gold: #D4A24C; /* AIO Nexus canonical brand gold — aligned 2026-07-15, was drifted (#bca474) */ --soft-blue: #8090b4; --highlight: #ff9048; /* Backgrounds */ --bg-body: #f3f4f6; --bg-surface: #ffffff; --bg-sidebar: var(--palette-slate-800); --bg-input: #ffffff; --bg-white: #ffffff; --bg-card: #ffffff; --bg-card-alt: #f8fbff; --surface-raised: #ffffff; --surface-muted: #eef4ff; /* Text */ --text-main: #1f2937; --text-color: #1f2937; /* premium-themes alias */ --text-muted: var(--palette-slate-400); --text-inverse: #ffffff; /* Borders */ --border-color: var(--palette-slate-200); --border-focus: var(--primary); /* Badges */ --badge-success-bg: var(--palette-green-100); --badge-success-text: var(--palette-green-900); --badge-danger-bg: var(--palette-red-100); --badge-danger-text: var(--palette-red-900); --badge-warning-bg: var(--palette-yellow-100); --badge-warning-text: var(--palette-yellow-900); --badge-info-bg: var(--palette-blue-100); --badge-info-text: var(--palette-blue-800); } /* ============================================================================= 2. ELEVATION / SHADOWS ============================================================================= */ :root { --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14); } /* ============================================================================= 3. SHAPE / RADII ============================================================================= */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Aliases used by components */ --border-radius: 18px; /* premium-themes default card radius */ } /* ============================================================================= 4. SPACING SCALE ============================================================================= */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; } /* ============================================================================= 5. TYPOGRAPHY SCALE ============================================================================= */ :root { --font-primary: var(--brand-font-sans); --font-display: var(--brand-font-display); --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --font-weight-extrabold:800; --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.6; --line-height-relaxed: 1.75; --line-height-loose: 2; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* Semantic type scale — role-based aliases (mirrors brand-tokens.css) */ /* Headings use fluid clamp() for responsive scaling without media queries. */ --type-display: clamp(1.75rem, 3vw + 1rem, 2.25rem); --type-headline: clamp(1.5rem, 2.5vw + 0.75rem, 1.875rem); --type-title: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); --type-subhead: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); --type-body: var(--font-size-md, 1rem); --type-small: var(--font-size-sm, 0.875rem); --type-caption: var(--font-size-xs, 0.75rem); /* Semantic leading scale */ --leading-tight: var(--line-height-tight); --leading-snug: var(--line-height-snug); --leading-body: var(--line-height-normal); --leading-relaxed: var(--line-height-relaxed); } /* ============================================================================= 6. MOTION / TRANSITIONS ============================================================================= */ :root { --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --transition-fast: 0.15s var(--easing-standard); --transition-smooth: 0.3s var(--easing-standard); --transition-slow: 0.5s var(--easing-standard); --transition-bounce: 0.4s var(--easing-spring); } /* ============================================================================= 7. Z-INDEX LAYERS ============================================================================= */ /* Canonical app-wide stacking scale — matches CLAUDE.md's documented "Z-index contract" exactly. This is the single source of truth; aio-dropdowns.css's former parallel --aio-z-* scale has been retired in favor of these. Below 1100 are local/component-scoped tiers (a card's own loading overlay, a sticky-within-its-container element) that don't participate in the app-wide header/modal/dropdown/toast stack. */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-app-header: 1100; --z-modal-backdrop: 1150; --z-modal: 1200; --z-dropdown: 1300; /* select2, .dropdown-menu, autocomplete */ --z-picker: 1310; /* datepicker / daterangepicker */ --z-toast: 1400; /* toastr, notification dropdown, loader overlay */ --z-tooltip: 1500; --z-max: 9999; /* vendor emergency only — see CLAUDE.md */ } /* ============================================================================= 8. FORM & INPUT TOKENS ============================================================================= */ :root { --input-height: 2.375rem; /* 38px — consistent across all form elements */ --input-radius: var(--radius-md); --input-border: var(--border-color); --input-bg: var(--bg-input); --input-text: var(--text-main); --input-placeholder:var(--text-muted); --input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15); --input-disabled-bg:#f1f5f9; --input-disabled-text:var(--text-muted); } /* ============================================================================= 9. BUTTON TOKENS ============================================================================= */ :root { --aio-btn-radius: 12px; --aio-btn-height: 40px; --aio-btn-padding-x: 16px; --aio-btn-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); --aio-btn-shadow-hover:0 14px 30px rgba(15, 23, 42, 0.16); --aio-btn-border: rgba(148, 163, 184, 0.24); --aio-btn-bg-muted: #ffffff; --aio-btn-text-muted: #334155; } /* ============================================================================= 10. CARD / PANEL TOKENS ============================================================================= */ :root { --card-bg: var(--bg-surface); --card-alt-bg: var(--bg-card-alt); --card-border: var(--border-color); --card-radius: var(--radius-lg); --card-shadow: none; --card-padding: var(--space-6); --panel-header-bg: #f8fbff; --panel-header-border: var(--border-color); --metric-accent: linear-gradient(90deg, var(--primary-color, #1E3A6F) 0%, var(--brand-gold, #D4A24C) 100%); --widget-icon-bg: linear-gradient(135deg, var(--primary-dark, #0A1733) 0%, var(--primary-color, #1E3A6F) 100%); --header-gradient: linear-gradient(135deg, var(--palette-aio-500, #1E3A6F) 0%, var(--palette-aio-400, #2C4F8A) 100%); --sidebar-gradient: var(--bg-sidebar); --header-surface: rgba(255, 255, 255, 0.12); --header-surface-hover: rgba(255, 255, 255, 0.2); --header-text: #ffffff; --focus-ring: rgba(37, 99, 235, 0.28); --link-color: var(--palette-aio-500); --link-hover-color:var(--palette-aio-600); --premium-primary: var(--palette-aio-500); --premium-primary-soft: rgba(30, 58, 111, 0.1); --premium-accent: var(--palette-aio-600); --premium-bg: #f4f7fb; --premium-surface: #ffffff; --premium-border: #dbe4ef; --premium-text: var(--palette-slate-900); --premium-muted: var(--palette-slate-500); --premium-radius-lg: var(--radius-lg); --premium-radius-md: var(--radius-md); --premium-shadow: var(--shadow-md); } /* ============================================================================= 11. SIDEBAR ACCENT TOKENS ============================================================================= */ :root { --sb-text: #cfd6e4; --sb-text-hover: #ffffff; --sb-accent-1: #22c1c3; --sb-accent-2: #7b2ff7; --sb-accent-3: #ff4ecd; --sb-hover-bg: rgba(255, 255, 255, 0.04); --sb-open-bg: rgba(255, 255, 255, 0.06); } /* ============================================================================= 13. SHADCN/UI v4 CSS VARIABLES (fully aligned with shadcn/ui 4.1.0) All variable names match shadcn's globals.css exactly so any component built following shadcn conventions works without remapping. ============================================================================= */ :root { /* ── Core semantics ─────────────────────────────────────────────────────── */ --background: #ffffff; --foreground: #0f172a; --card: #ffffff; /* ── Input group addon — always neutral, never themed ───────────────────── */ --input-addon-bg: #f8fafc; /* light neutral */ --card-foreground: #0f172a; --popover: #ffffff; --popover-foreground: #0f172a; --primary: #1E3A6F; --primary-foreground: #ffffff; --secondary: #f1f5f9; --secondary-foreground: #1e293b; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #f1f5f9; --accent-foreground: #1e293b; --destructive: #ef4444; --destructive-foreground: #fef2f2; --border: #e2e8f0; --input: #e2e8f0; --ring: #1E3A6F; --radius: 0.625rem; /* shadcn v4 default */ /* ── Surface (shadcn v4 new token) ──────────────────────────────────────── */ --surface: #f8fafc; --surface-foreground: #0f172a; /* ── Chart tokens (shadcn v4) ───────────────────────────────────────────── */ --chart-1: #3b82f6; --chart-2: #6366f1; --chart-3: #8b5cf6; --chart-4: #ec4899; --chart-5: #14b8a6; /* ── Sidebar token set (shadcn v4 complete) ─────────────────────────────── */ --sidebar: #f8fafc; --sidebar-foreground: #0f172a; --sidebar-primary: #1E3A6F; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f1f5f9; --sidebar-accent-foreground: #1e293b; --sidebar-border: #e2e8f0; /* ── Header ─────────────────────────────────────────────────────────────── */ --header-bg: #ffffff; --header-border: #e2e8f0; --header-text: #0f172a; --header-btn-bg: transparent; --header-btn-bg-hover: #f1f5f9; --header-btn-text: #475569; --header-btn-text-hover: #0f172a; --header-btn-ring: #e2e8f0; /* ── Code block tokens (shadcn v4.1.0) ─────────────────────────────────── */ --code: #f8fafc; --code-foreground: #0f172a; --code-highlight: #f1f5f9; --code-number: #64748b; /* ── Selection tokens (shadcn v4.1.0) ───────────────────────────────────── */ --selection: #0f172a; --selection-foreground: #ffffff; /* ── Legacy sidebar aliases (referenced in shadcn-ui.css) ───────────────── */ --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-text-hover: #f1f5f9; --sidebar-accent-bg: rgba(255,255,255,0.06); --sidebar-accent-text: #ffffff; --sidebar-logo-border: rgba(255,255,255,0.08); } /* ============================================================================= 12. DARK-MODE TOKEN OVERRIDES Applied via both html.dark-mode and body.dark-mode (some selectors need both). Component-level dark mode rules remain in dark-mode.css. ============================================================================= */ .dark-mode, html.dark-mode, html[data-color-mode="dark"] { --primary: #1E3A6F; --primary-dark: #2C4F8A; --primary-light: rgba(30, 58, 111, 0.15); --secondary: #a4a4a4; --warning: #fca424; --danger: #f87171; --success: #4ade80; --bg-body: #121416; --bg-surface: #1e2125; --bg-white: #1e2125; --bg-sidebar: #1a1d20; --bg-input: #282c30; --bg-card: #1e2125; --bg-card-alt: #23272b; --surface-raised: #282c30; --surface-muted: #1a1d20; --text-main: #e1e1e1; --text-color: #e1e1e1; --text-muted: #9ca3af; --text-inverse: #1e2125; --border-color: #3a3f44; --border-focus: #1E3A6F; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --aio-btn-border: rgba(148, 163, 184, 0.26); --aio-btn-bg-muted: rgba(30, 41, 59, 0.92); --aio-btn-text-muted: #e5e7eb; --card-bg: #1e2125; --card-border: #3a3f44; --panel-header-bg: #23272b; --panel-header-border:#3a3f44; --premium-bg: #121416; --premium-surface: #1e2125; --premium-border: #3a3f44; --premium-text: #e1e1e1; --premium-muted: #9ca3af; --premium-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); --input-bg: #282c30; --input-border: #3a3f44; --input-text: #e1e1e1; --input-placeholder: #9ca3af; --input-disabled-bg: #1a1d20; --input-addon-bg: #282c30; /* dark neutral for addons */ /* ── shadcn v4 complete token set — dark mode ───────────────────────────── */ --background: #0f172a; --foreground: #f1f5f9; --card: #1e2125; --card-foreground: #f1f5f9; --popover: #1e2125; --popover-foreground: #f1f5f9; --primary: #2C4F8A; --primary-foreground: #ffffff; --secondary: #1e293b; --secondary-foreground: #f1f5f9; --muted: #1e293b; --muted-foreground: #94a3b8; --accent: rgba(255,255,255,0.07); --accent-foreground: #f1f5f9; --destructive: #f87171; --destructive-foreground: #7f1d1d; --border: rgba(255,255,255,0.10); --input: rgba(255,255,255,0.15); --ring: #2C4F8A; /* ── Surface (shadcn v4) — dark ─────────────────────────────────────────── */ --surface: #1e2125; --surface-foreground: #94a3b8; /* ── Chart tokens — dark (brighter for dark bg) ─────────────────────────── */ --chart-1: #60a5fa; --chart-2: #818cf8; --chart-3: #a78bfa; --chart-4: #f472b6; --chart-5: #2dd4bf; /* ── Code block tokens — dark (shadcn v4.1.0) ──────────────────────────── */ --code: #1e2125; --code-foreground: #94a3b8; --code-highlight: #282c30; --code-number: #64748b; /* ── Selection tokens — dark (shadcn v4.1.0) ────────────────────────────── */ --selection: #e2e8f0; --selection-foreground: #1e2125; /* ── Sidebar token set — dark ───────────────────────────────────────────── */ --sidebar: #1a1d20; --sidebar-foreground: #f1f5f9; --sidebar-primary: #2C4F8A; --sidebar-primary-foreground: #ffffff; --sidebar-accent: rgba(255,255,255,0.06); --sidebar-accent-foreground: #f1f5f9; --sidebar-border: rgba(255,255,255,0.08); /* ── Header — dark ──────────────────────────────────────────────────────── */ --header-bg: #1a1d20; --header-border: #3a3f44; --header-text: #f1f5f9; --header-btn-bg: transparent; --header-btn-bg-hover: rgba(255,255,255,0.06); --header-btn-text: #94a3b8; --header-btn-text-hover: #f1f5f9; --header-btn-ring: #3a3f44; color-scheme: dark; }