/* ═══════════════════════════════════════════════════════════════ PROPROBIN THEME SYSTEM — Design Tokens (CSS Custom Properties) ═══════════════════════════════════════════════════════════════ HOW TO USE: 1. This file defines ALL design tokens as CSS custom properties. 2. The default theme ("Proprobin Dark") is applied via :root. 3. To create a new theme, override these variables under a [data-theme="your-theme"] selector (see theme-light.css). 4. Switch themes in JS: document.documentElement.dataset.theme = 'light'; 5. Every page should use var(--token) instead of hard-coded values. NAMING CONVENTION: --prp-- Categories: brand, surface, text, border, shadow, radius, spacing, nav, btn, card, stat ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Brand Palette ─── */ --prp-brand-primary: #f87171; /* Light Coral — Primary CTA, active nav */ --prp-brand-primary-hover: #ef4444; --prp-brand-primary-dark: #dc2626; /* Deeper coral for hover gradients */ --prp-brand-primary-light: rgba(248, 113, 113, 0.10); --prp-brand-primary-shadow: rgba(248, 113, 113, 0.25); --prp-brand-gradient: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); --prp-brand-teal: #f87171; /* Coral Rose — AI badges, accents */ --prp-brand-teal-hover: #ef4444; --prp-brand-teal-light: rgba(248, 113, 113, 0.15); --prp-brand-teal-shadow: rgba(248, 113, 113, 0.50); --prp-brand-amber: #f59e0b; /* Amber — Warnings, pending states */ --prp-brand-amber-hover: #d97706; --prp-brand-amber-light: rgba(245, 158, 11, 0.15); --prp-brand-gold: #c9a227; /* Gold — Pro badge, premium accents */ --prp-brand-gold-light: rgba(201, 162, 39, 0.15); --prp-brand-gold-gradient: linear-gradient(135deg, #c9a227 0%, #f6d365 100%); --prp-brand-green: #10b981; /* Green — Success, verified, ready */ --prp-brand-green-hover: #059669; --prp-brand-green-light: rgba(16, 185, 129, 0.15); --prp-brand-purple: #a78bfa; /* Purple — AI, nav icons */ --prp-brand-purple-light: rgba(167, 139, 250, 0.15); --prp-brand-blue: #3b82f6; /* Blue — Links, info, active states */ --prp-brand-blue-light: rgba(59, 130, 246, 0.15); --prp-brand-danger: #ef4444; /* Danger Red — Logout, destructive */ --prp-brand-danger-light: rgba(239, 68, 68, 0.10); /* ─── Neutral / Surface Colors ─── */ --prp-navy-900: #0b0f1a; /* Deepest dark */ --prp-navy-800: #111827; /* Primary dark bg */ --prp-navy-700: #1a2535; /* Secondary dark bg */ --prp-navy-600: #1e293b; /* Card dark bg */ --prp-navy-500: #334155; /* Elevated dark surface */ --prp-navy-400: #475569; /* Muted dark elements */ --prp-cream: #f8fafc; /* Light background / brand text */ --prp-white: #ffffff; /* ─── Surface (background) ─── */ --prp-surface-body: #f8fafc; --prp-surface-page: #ffffff; --prp-surface-card: #ffffff; --prp-surface-card-hover: #f8fafc; --prp-surface-elevated: #ffffff; --prp-surface-overlay: rgba(0, 0, 0, 0.50); --prp-surface-glass: rgba(255, 255, 255, 0.95); --prp-surface-input: #ffffff; --prp-surface-code: #f1f5f9; /* Dark surfaces (for nav, footer, hero, admin) */ --prp-surface-dark: #111827; --prp-surface-dark-alt: #1a2535; --prp-surface-dark-elevated:#1e293b; /* ─── Text Colors ─── */ --prp-text-primary: #1a202c; /* Headings, body */ --prp-text-secondary: #4a5568; /* Subtext, descriptions */ --prp-text-muted: #64748b; /* Hints, timestamps */ --prp-text-faint: #94a3b8; /* Placeholders, disabled */ --prp-text-inverse: #ffffff; /* Text on dark surfaces */ --prp-text-inverse-muted: rgba(255, 255, 255, 0.60); --prp-text-inverse-faint: rgba(255, 255, 255, 0.40); --prp-text-link: #ef4444; --prp-text-link-hover: #dc2626; /* ─── Border Colors ─── */ --prp-border-default: #e2e8f0; --prp-border-light: #f1f5f9; --prp-border-dark: rgba(255, 255, 255, 0.08); --prp-border-focus: #f87171; --prp-border-card: #e2e8f0; /* ─── Shadows ─── */ --prp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --prp-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --prp-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12); --prp-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15); --prp-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --prp-shadow-card-hover: 0 10px 40px rgba(0, 0, 0, 0.15); --prp-shadow-btn: 0 4px 14px rgba(248, 113, 113, 0.25); --prp-shadow-btn-hover: 0 6px 20px rgba(248, 113, 113, 0.35); /* ─── Border Radius ─── */ --prp-radius-xs: 4px; --prp-radius-sm: 8px; --prp-radius-md: 12px; --prp-radius-lg: 16px; --prp-radius-xl: 20px; --prp-radius-2xl: 24px; --prp-radius-full: 9999px; --prp-radius-card: 16px; --prp-radius-btn: 10px; /* ─── Spacing Scale (matches Bootstrap's 0.25rem steps) ─── */ --prp-space-1: 0.25rem; /* 4px */ --prp-space-2: 0.5rem; /* 8px */ --prp-space-3: 1rem; /* 16px */ --prp-space-4: 1.5rem; /* 24px */ --prp-space-5: 2rem; /* 32px */ --prp-space-6: 3rem; /* 48px */ /* ─── Typography ─── */ --prp-font-family: 'Inter', sans-serif; --prp-font-size-xs: 0.75rem; /* 12px */ --prp-font-size-sm: 0.875rem; /* 14px */ --prp-font-size-base: 1rem; /* 16px */ --prp-font-size-lg: 1.125rem; /* 18px */ --prp-font-size-xl: 1.25rem; /* 20px */ --prp-font-size-2xl: 1.5rem; /* 24px */ --prp-font-size-3xl: 1.875rem; /* 30px */ --prp-font-size-4xl: 2.25rem; /* 36px */ --prp-font-weight-light: 300; --prp-font-weight-normal: 400; --prp-font-weight-medium: 500; --prp-font-weight-semibold: 600; --prp-font-weight-bold: 700; --prp-line-height-tight: 1.2; --prp-line-height-normal: 1.5; --prp-line-height-relaxed: 1.75; /* ─── Transitions ─── */ --prp-transition-fast: 0.15s ease; --prp-transition-base: 0.25s ease; --prp-transition-slow: 0.35s ease; /* ─── Z-index Scale ─── */ --prp-z-base: 1; --prp-z-dropdown: 100; --prp-z-sticky: 200; --prp-z-fixed: 300; --prp-z-overlay: 400; --prp-z-modal: 500; --prp-z-toast: 600; /* ─── Navigation ─── */ --prp-nav-bg: rgba(255, 255, 255, 0.85); --prp-nav-text: #475569; --prp-nav-text-active: #f87171; --prp-nav-active-bg: rgba(248, 113, 113, 0.10); --prp-nav-hover-bg: rgba(248, 113, 113, 0.06); --prp-nav-border: rgba(0, 0, 0, 0.06); /* ─── Footer ─── */ --prp-footer-bg: #111827; --prp-footer-text: rgba(255, 255, 255, 0.60); --prp-footer-link: rgba(255, 255, 255, 0.55); --prp-footer-link-hover: #f87171; --prp-footer-border: rgba(255, 255, 255, 0.08); /* ─── Stat Colors (Hero stats, dashboard metrics) ─── */ --prp-stat-teal: #f87171; --prp-stat-amber: #f59e0b; --prp-stat-red: #e8402a; --prp-stat-green: #10b981; /* ─── Status / Chip Colors ─── */ --prp-status-ready-bg: #d1fae5; --prp-status-ready-text: #065f46; --prp-status-offplan-bg: #fef3c7; --prp-status-offplan-text: #92400e; --prp-status-active-bg: #dbeafe; --prp-status-active-text: #1e40af; --prp-status-pending-bg: #fef3c7; --prp-status-pending-text: #92400e; /* ─── Mobile Bottom Nav ─── */ --prp-mobile-nav-bg: linear-gradient(180deg, #1a2535 0%, #111827 100%); --prp-mobile-nav-text: rgba(255, 255, 255, 0.60); --prp-mobile-nav-active: #f87171; --prp-mobile-nav-border: rgba(248, 113, 113, 0.15); /* ─── Bottom Sheet ─── */ --prp-sheet-bg: #111827; --prp-sheet-text: rgba(255, 255, 255, 0.85); --prp-sheet-title: rgba(255, 255, 255, 0.50); --prp-sheet-divider: rgba(255, 255, 255, 0.10); --prp-sheet-hover: rgba(255, 255, 255, 0.05); --prp-sheet-handle: rgba(255, 255, 255, 0.30); /* ─── AI Badge ─── */ --prp-ai-badge-bg: linear-gradient(135deg, #f87171 0%, #fb7185 50%, #ef4444 100%); --prp-ai-badge-text: #ffffff; --prp-ai-badge-shadow: 0 0 8px rgba(248, 113, 113, 0.50); }