/* ═══════════════════════════════════════════════════════════════════════════ SOFTEX DESIGN TOKENS - SINGLE SOURCE OF TRUTH File: softex-design-tokens.css Version: 1.1.0 Date: 2026-02-02 ═══════════════════════════════════════════════════════════════════════════ ⚠️ THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR ALL CSS VALUES Referenced by: - docs/AI_AGENT_CONSTRAINTS.md - docs/refactoring-plan/FRONTEND_RULES.md - wwwroot/css/softex-components.css If ANY documentation conflicts with values in this file, THIS FILE IS CORRECT. ═══════════════════════════════════════════════════════════════════════════ HOW TO USE: ----------- 1. Link this file FIRST in _Layout.cshtml 2. Change values here → Changes EVERYWHERE 3. NEVER hardcode colors in components - always use var(--softex-xxx) EXAMPLES: --------- ❌ BAD: background-color: #1317ec; ✅ GOOD: background-color: var(--softex-primary); ❌ BAD: border-radius: 9999px; ✅ GOOD: border-radius: var(--softex-radius-full); ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────────────────── 1. BRAND COLORS Change --softex-primary to change the entire app color scheme ───────────────────────────────────────────────────────────────────────── */ --softex-primary: #1317ec; --softex-primary-light: #4f52ff; --softex-primary-dark: #0e11b8; --softex-primary-rgb: 19, 23, 236; /* For rgba() usage */ /* Primary with alpha (transparency) */ --softex-primary-alpha-5: rgba(19, 23, 236, 0.05); --softex-primary-alpha-10: rgba(19, 23, 236, 0.1); --softex-primary-alpha-20: rgba(19, 23, 236, 0.2); --softex-primary-alpha-30: rgba(19, 23, 236, 0.3); /* Secondary (Gray — neutral/default) */ --softex-secondary: #6c757d; --softex-secondary-light: #8f959b; --softex-secondary-dark: #545b62; --softex-secondary-rgb: 108, 117, 125; /* For rgba() usage */ --softex-secondary-alpha-10: rgba(108, 117, 125, 0.1); --softex-secondary-alpha-20: rgba(108, 117, 125, 0.2); --softex-secondary-alpha-30: rgba(108, 117, 125, 0.3); --softex-secondary-bg: #e9ecef; /* Gradient colors (for premium elements) */ --softex-gradient-from: #6366f1; --softex-gradient-to: #8b5cf6; --softex-gradient: linear-gradient(135deg, var(--softex-gradient-from), var(--softex-gradient-to)); /* ───────────────────────────────────────────────────────────────────────── 2. STATUS COLORS Used for status pills, alerts, badges ───────────────────────────────────────────────────────────────────────── */ /* Success (Green) */ --softex-success: #15803d; --softex-success-light: #22c55e; --softex-success-bg: #dcfce7; /* Warning (Orange) */ --softex-warning: #c2410c; --softex-warning-light: #f97316; --softex-warning-bg: #ffedd5; /* Danger (Red) */ --softex-danger: #dc2626; --softex-danger-light: #ef4444; --softex-danger-bg: #fee2e2; /* Info (Blue) */ --softex-info: #1d4ed8; --softex-info-light: #3b82f6; --softex-info-bg: #dbeafe; /* ───────────────────────────────────────────────────────────────────────── 3. TEXT COLORS ───────────────────────────────────────────────────────────────────────── */ --softex-text-primary: #111118; --softex-text-secondary: #616289; --softex-text-muted: #9ca3af; --softex-text-inverse: #ffffff; /* ───────────────────────────────────────────────────────────────────────── 4. BACKGROUND COLORS ───────────────────────────────────────────────────────────────────────── */ --softex-bg-page: #f6f6f8; --softex-bg-card: #ffffff; --softex-bg-input: rgba(243, 244, 246, 0.5); --softex-bg-hover: rgba(0, 0, 0, 0.02); /* ───────────────────────────────────────────────────────────────────────── 5. BORDER COLORS ───────────────────────────────────────────────────────────────────────── */ --softex-border: #f0f0f4; --softex-border-dark: #e0e0e4; --softex-border-focus: var(--softex-primary); /* ───────────────────────────────────────────────────────────────────────── 6. TYPOGRAPHY ───────────────────────────────────────────────────────────────────────── */ --softex-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --softex-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; /* Font Sizes */ --softex-text-xs: 10px; --softex-text-sm: 11px; --softex-text-base: 14px; --softex-text-lg: 16px; --softex-text-xl: 20px; --softex-text-2xl: 24px; --softex-text-3xl: 32px; /* Font Weights */ --softex-font-normal: 400; --softex-font-medium: 500; --softex-font-semibold: 600; --softex-font-bold: 700; --softex-font-extrabold: 800; /* ───────────────────────────────────────────────────────────────────────── 7. SPACING & SIZING ───────────────────────────────────────────────────────────────────────── */ --softex-sidebar-width: 280px; --softex-header-height: 60px; --softex-panel-width: 480px; --softex-toolbar-height: 72px; /* Spacing Scale */ --softex-space-1: 4px; --softex-space-2: 8px; --softex-space-3: 12px; --softex-space-4: 16px; --softex-space-5: 20px; --softex-space-6: 24px; --softex-space-8: 32px; /* ───────────────────────────────────────────────────────────────────────── 7b. FORM SPACING (F09 Rule - Compact Forms) CRITICAL: Forms must be compact. Do NOT use excessive spacing. - Between fields: 16px (space-y-4 or mb-3) - Between sections: 24px (mb-4) - After panel header: 24px (pt-4) ───────────────────────────────────────────────────────────────────────── */ --softex-form-field-gap: 16px; /* Between form fields */ --softex-form-section-gap: 24px; /* Between form sections */ --softex-form-label-gap: 8px; /* Label to input */ --softex-form-header-gap: 24px; /* After panel header */ /* ───────────────────────────────────────────────────────────────────────── 8. BORDER RADIUS CRITICAL: All interactive elements (buttons, inputs, pills) use radius-full ───────────────────────────────────────────────────────────────────────── */ --softex-radius-sm: 8px; --softex-radius-md: 12px; --softex-radius-lg: 16px; --softex-radius-xl: 20px; --softex-radius-2xl: 24px; --softex-radius-full: 9999px; /* PILL SHAPE - for buttons, inputs, pills */ /* ───────────────────────────────────────────────────────────────────────── 9. SHADOWS ───────────────────────────────────────────────────────────────────────── */ --softex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --softex-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --softex-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --softex-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); --softex-shadow-primary: 0 4px 14px rgba(var(--softex-primary-rgb), 0.25); --softex-shadow-card: 0 4px 20px -1px rgba(0, 0, 0, 0.05); /* ───────────────────────────────────────────────────────────────────────── 10. TRANSITIONS ───────────────────────────────────────────────────────────────────────── */ --softex-transition-fast: 0.15s ease; --softex-transition-normal: 0.3s ease; --softex-transition-slow: 0.5s cubic-bezier(0.65, 0, 0.35, 1); /* ───────────────────────────────────────────────────────────────────────── 11. Z-INDEX SCALE ───────────────────────────────────────────────────────────────────────── */ --softex-z-dropdown: 100; --softex-z-sticky: 200; --softex-z-fixed: 300; --softex-z-modal-backdrop: 400; --softex-z-modal: 500; --softex-z-popover: 600; --softex-z-tooltip: 700; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE OVERRIDES Applied when or ═══════════════════════════════════════════════════════════════════════════ */ .dark { --softex-text-primary: #ffffff; --softex-text-secondary: #a0a0c0; --softex-text-muted: #6b7280; --softex-bg-page: #101122; --softex-bg-card: #1a1b2e; --softex-bg-input: rgba(255, 255, 255, 0.03); --softex-bg-hover: rgba(255, 255, 255, 0.02); --softex-border: #2d2e45; --softex-border-dark: #3d3e55; --softex-shadow-card: 0 4px 20px -1px rgba(0, 0, 0, 0.2); }