/* * ============================================================================ * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved. * KwaZulu-Natal, Republic of South Africa. * ============================================================================ * * @BEGIN Developer Log Header Block * @FILENAME: design-tokens.css * @TITLE: NEXATHON -- Transport, Towing & Workshop Management System * @DESCRIPTION: design tokens * @AUTHOR: Ary van der Pijl * @COMPANY: ATH SOLUTIONS (PTY) LTD * @WEBSITE: https://www.ath.solutions/ * @EMAIL: info@ath.solutions * @COPYRIGHT: All Rights Reserved * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf) * * BEGIN CHANGELOG * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option: * !================================================================================================================================================================== * VERSION 1.0.3 * - File Modified | Ary van der Pijl | 2026/07/15 | FRONTEND-REVAMP | Added elevation/gradient/road-motif and nexathon-loader tokens for the "Industrial Fleet Command" design direction (Phase 2). Fixed [data-theme="dark"] overriding the branded near-black/gold :root palette with a generic slate-blue theme -- every layout hardcodes data-theme="dark", so the brand palette was never actually rendering. | * VERSION 1.0.2 * - File Modified | Ary van der Pijl | 2026/06/21 | STANDARDS-COMPLIANCE | Applied ATH Solutions 2026 coding standards. | * VERSION 1.0.1 * + File Created | Ary van der Pijl | 2026/06/06 * + File Modified| Ary van der Pijl | 2026/06/07, QA-001, Formatted document * ==================================================================================================================================================================! * END CHANGELOG */ :root { /* Brand - NexATHon Inspired */ --color-primary: #FFCC00; --color-primary-hover: #E6B800; --color-primary-light: #FFF9E6; /* Backgrounds */ --color-bg: #0A0A0A; --color-surface: #121212; --color-surface-2: #1C1C1E; --color-surface-3: #232326; /* Nexathon loading shimmer */ --nexathon-base: #1C1C1E; --nexathon-sheen: #2A2A2E; /* Borders */ --color-border: #2A2A2E; --color-border-light: #3A3A40; /* Text */ --color-text: #F5F5F5; --color-text-muted: #A3A3A8; --color-text-subtle: #6B6B70; /* Status */ --color-success: #22C55E; --color-success-bg: #052E16; --color-warning: #FACC15; --color-warning-bg: #422006; --color-danger: #EF4444; --color-danger-bg: #450A0A; --color-info: #60A5FA; --color-info-bg: #0C2A4A; /* Sidebar */ --sidebar-bg: #1C1C1E; --sidebar-width: 260px; --sidebar-collapsed: 72px; --sidebar-text: #D1D5DB; --sidebar-text-hover: #F5F5F5; --sidebar-hover-bg: #27272A; --sidebar-active-bg: #FFCC00; --sidebar-active-text: #0A0A0A; --sidebar-border: #2A2A2E; /* Header */ --header-height: 64px; --header-bg: #121212; --header-border: #2A2A2E; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.6); --shadow-sm: 0 1px 3px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); --shadow-lg: 0 10px 15px rgba(0,0,0,0.8), 0 4px 6px rgba(0,0,0,0.6); --shadow-xl: 0 20px 25px rgba(0,0,0,0.85), 0 8px 10px rgba(0,0,0,0.6); --shadow-glow-primary: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 4px 16px color-mix(in srgb, var(--color-primary) 18%, transparent); --shadow-inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04); /* "Industrial Fleet Command" surface treatments -- brushed-metal sheens and an asphalt/road motif, used sparingly on elevated surfaces and dividers. Built from --color-primary via color-mix() so every [data-skin] variant (DB/09-... see the skin blocks below) gets a matching sheen automatically instead of a hardcoded gold gradient. */ --gradient-metal-surface: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 14%); --gradient-primary-sheen: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 82%, white) 0%, var(--color-primary) 45%, var(--color-primary-hover) 100%); --gradient-sidebar-active: var(--gradient-primary-sheen); --road-divider: repeating-linear-gradient( 90deg, var(--color-primary) 0, var(--color-primary) 10px, transparent 10px, transparent 20px ); /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Spacing scale */ --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; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-normal: 1.5; --lh-loose: 1.75; /* Transitions */ --transition-fast: 100ms ease; --transition-base: 150ms ease; --transition-slow: 250ms ease; /* Z-index scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050; --z-toast: 1080; --z-tooltip: 1090; } /* ─── Dark Theme ─────────────────────────────────────────────────────────── */ /* FIXED 2026/07/15 (Phase 2 frontend revamp): this block used to override the brand near-black/gold :root palette with a generic slate-blue admin theme (#0f172a etc.) -- and every layout hardcodes , so that generic palette was rendering by default instead of the branded one. [data-theme="dark"] now mirrors :root's brand values so "dark" means "the NexATHon near-black/gold look", not a different theme entirely. */ [data-theme="dark"] { --color-bg: #0A0A0A; --color-surface: #121212; --color-surface-2: #1C1C1E; --color-border: #2A2A2E; --color-border-light: #3A3A40; --color-text: #F5F5F5; --color-text-muted: #A3A3A8; --color-text-subtle: #6B6B70; --color-primary-light: rgba(255,204,0,0.15); --color-success-bg: rgba(34,197,94,0.12); --color-warning-bg: rgba(250,204,21,0.12); --color-danger-bg: rgba(239,68,68,0.12); --color-info-bg: rgba(96,165,250,0.12); --header-bg: #121212; --header-border: #2A2A2E; --shadow-sm: 0 1px 3px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); --shadow-lg: 0 10px 15px rgba(0,0,0,0.8), 0 4px 6px rgba(0,0,0,0.6); } /* ─── Theme Skins ─────────────────────────────────────────────────────────── */ [data-skin="ocean"] { --color-primary: #0284c7; --color-primary-hover: #0369a1; --color-primary-light: #e0f2fe; --sidebar-active-bg: #0284c7; } [data-skin="forest"] { --color-primary: #16a34a; --color-primary-hover: #15803d; --color-primary-light: #f0fdf4; --sidebar-active-bg: #16a34a; } [data-skin="rose"] { --color-primary: #e11d48; --color-primary-hover: #be123c; --color-primary-light: #fff1f2; --sidebar-active-bg: #e11d48; } [data-skin="amber"] { --color-primary: #d97706; --color-primary-hover: #b45309; --color-primary-light: #fffbeb; --sidebar-active-bg: #d97706; } [data-skin="slate"] { --color-primary: #475569; --color-primary-hover: #334155; --color-primary-light: #f1f5f9; --sidebar-active-bg: #475569; } [data-skin="midnight"] { --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-primary-light: #f5f3ff; --sidebar-active-bg: #7c3aed; }