/* ============================================ PostPro Nexus — Global Design Tokens AMT brand (turquoise) · Inter typography Single source of truth — no per-module overrides Dark mode via [data-theme="dark"] on ============================================ */ /* Inter for UI, JetBrains Mono for code/data. 2026-05-19: Trimmed Inter to 400-700 (dropped 300 + 800). Per-page font imports (Bebas Neue, Outfit, Roboto, Dancing Script, Roboto Mono) are being removed across the app — Inter + JetBrains Mono is the entire stack. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================ LIGHT THEME (default) ============================================ */ :root { color-scheme: light; /* ── AMT brand palette (theme-invariant) ── */ --amt-turquoise: #4FC3CA; --amt-turquoise-dark: #3BA8AE; --amt-turquoise-darker: #2D8A8F; --amt-turquoise-light: rgba(79, 195, 202, 0.1); --amt-dark-grey: #152E35; --amt-grey: #38484D; --amt-light-grey: #A89E9E; --amt-green: #5DBB63; --amt-green-dark: #059669; --amt-green-light: rgba(93, 187, 99, 0.1); --amt-pp-grey: #B4ABA8; --amt-dms-grey: #AFB3B6; /* ── Surfaces (slate-based neutrals, WCAG AA+ contrast) ── */ --bg-color: #F8FAFC; /* app background */ --bg-primary: #F8FAFC; --bg-secondary: #FFFFFF; /* cards, inputs */ --bg-tertiary: #F1F5F9; /* rows, stat boxes, modal chrome */ --bg-hover: #E2E8F0; /* hover state */ --bg-active: rgba(79, 195, 202, 0.08); --card-bg: #FFFFFF; /* ── Text hierarchy ── */ --text-main: #0F172A; /* body */ --text-primary: #0F172A; /* headings */ --text-secondary: #334155; /* secondary */ --text-muted: #64748B; /* meta, labels */ --text-on-accent: #FFFFFF; /* text on turquoise */ /* ── Borders ── */ --border-color: #E2E8F0; --border-light: #E2E8F0; --border-medium: #CBD5E1; --border-strong: #94A3B8; --grid-line: rgba(15, 23, 42, 0.04); --grid-color: rgba(148, 163, 184, 0.08); --grid-size: 32px; /* ── Brand accent (turquoise is theme-invariant) ── */ --accent-color: var(--amt-turquoise); --accent-primary: var(--amt-turquoise); --accent-secondary: var(--amt-turquoise-dark); --accent-light: var(--amt-turquoise-light); --accent-gradient: linear-gradient(135deg, #4FC3CA 0%, #3BA8AE 100%); /* ── Sidebar / header (always dark — brand top bar) ── */ --sidebar-bg: #0F172A; --sidebar-bg-hover: #1E293B; --sidebar-bg-active: rgba(79, 195, 202, 0.15); --sidebar-text: #94A3B8; --sidebar-text-bright: #F8FAFC; --sidebar-border: rgba(255, 255, 255, 0.08); /* ── Status / signal colors ── */ --tech-blue: #3B82F6; --tech-cyan: #06B6D4; --tech-green: #059669; --tech-red: #DC2626; --tech-purple: #8B5CF6; --tech-orange: #EA580C; --tech-yellow: #EAB308; --status-success: #059669; --status-warning: #EA580C; --status-error: #DC2626; --status-info: #3B82F6; /* ── Department colors ── */ --dept-technical: var(--amt-turquoise); --dept-operations: var(--tech-green); --dept-sales: var(--tech-orange); --dept-finance: var(--amt-turquoise); --dept-customer: var(--amt-turquoise); --dept-logistics: var(--tech-purple); --dept-hr: var(--tech-green); /* ── Elevation ── */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05); --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05); --shadow-lg: 0 10px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.05); --shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.04), 0 1px 2px -1px rgb(15 23 42 / 0.04); /* ── Layout ── */ --sidebar-width: 260px; --sidebar-collapsed: 72px; --topbar-height: 72px; /* ── Motion ── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* ── Radii ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* ── Shared semantic tokens (used across modules; were previously inline) These are aliases for legibility + are overridden per-theme below. ── */ --surface-muted: var(--bg-tertiary); --surface-hover: var(--bg-hover); --surface-secondary: var(--bg-tertiary); --surface-border: var(--border-light); --accent-bg: var(--accent-light); /* Legacy-named text aliases (some inline templates reference these) */ --text-color: var(--text-primary); --text-tertiary: var(--text-muted); /* Alternate color-name aliases referenced by older code paths. Mapping each to its semantic equivalent keeps existing code working without requiring per-file edits, and gives the theme system a single point of control. */ --accent-cyan: var(--tech-cyan); --accent-red: var(--tech-red); --tech-turquoise: var(--amt-turquoise); --tech-amber: var(--tech-orange); --tech-amber-bg: var(--alert-warning-bg); --tech-amber-dark: var(--alert-warning-text); --danger-red: var(--tech-red); --danger-color: var(--status-error); --error-red: var(--tech-red); --warning-amber: var(--tech-orange); --warning-color: var(--status-warning); --success-green: var(--tech-green); --color-green: var(--tech-green); --color-orange: var(--tech-orange); --color-red: var(--tech-red); --green-600: var(--tech-green); --red-500: var(--tech-red); --primary: var(--accent-primary); --primary-color: var(--accent-primary); --background: var(--bg-primary); --bg-header: var(--sidebar-bg); --bg-surface: var(--bg-secondary); --surface-bg: var(--bg-secondary); --hover-bg: var(--bg-hover); --info-bg: var(--alert-info-bg); --info-border: var(--alert-info-border); /* Missing alert-border variants */ --alert-purple-border: rgba(139, 92, 246, 0.25); --alert-pink-bg: rgba(236, 72, 153, 0.10); --alert-pink-text: #BE185D; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Module-specific tokens previously only inline-aliased. Defining them globally gives the theme system central control and prevents silent fall-through to hardcoded fallback values. */ --cal-leave-color: var(--text-muted); /* calendar leave strip */ --detail-header-bg: var(--bg-tertiary); /* organization/module detail header bg */ --role-accent: var(--amt-turquoise); /* admin-roles accent stripe */ /* Alert tints — light tints for notifications/callouts */ --alert-warning-bg: rgba(234, 179, 8, 0.10); --alert-warning-border: rgba(234, 179, 8, 0.35); --alert-warning-text: #B45309; --alert-warning-subtext: #92400E; --alert-danger-bg: rgba(220, 38, 38, 0.10); --alert-danger-border: rgba(220, 38, 38, 0.30); --alert-danger-text: #991B1B; --alert-info-bg: rgba(59, 130, 246, 0.10); --alert-info-border: rgba(59, 130, 246, 0.30); --alert-info-text: #1E40AF; --alert-success-bg: rgba(5, 150, 105, 0.10); --alert-success-border: rgba(5, 150, 105, 0.30); --alert-success-text: #065F46; --alert-blue-bg: rgba(59, 130, 246, 0.08); --alert-blue-border: rgba(59, 130, 246, 0.25); --alert-blue-text: #1E40AF; --alert-purple-bg: rgba(139, 92, 246, 0.10); --alert-purple-text: #6D28D9; } /* ============================================ DARK THEME — redefine the same tokens. Everything downstream uses var(), so swapping these values switches the entire UI. NOTE: selector is html[data-theme="dark"] (specificity 0,1,1) intentionally — beats any stray `:root {}` block (0,1,0) in per-page inline