/** * MyStorageWay Brand Theme * * Canonical brand color tokens for all pages. * Import this file after common.css so these brand values take precedence. * * Primary: Indigo (#4f46e5, #6366f1) - Professional, trustworthy * Secondary: Navy (#2c5282, #1a365d) - Authoritative, reliable */ /* ======================================== BASE BRAND TOKENS Applied to all pages regardless of theme. Overrides the placeholder values in common.css. ======================================== */ :root { /* Primary brand color - Indigo (matches admin dashboard) */ --msw-brand-primary: #6366f1; --msw-brand-primary-dark: #4f46e5; --msw-brand-primary-light: rgba(99, 102, 241, 0.1); /* Secondary color - Navy Blue */ --msw-brand-secondary: #2c5282; --msw-brand-secondary-dark: #1a365d; /* Accent color - Emerald Green */ --msw-brand-accent: #10b981; --msw-brand-accent-dark: #059669; /* Brand Orange - highlights and warnings */ --msw-brand-orange: #f59e0b; --msw-brand-orange-dark: #d97706; } html[data-theme='mystorageway'] { /* ======================================== BRAND COLORS Indigo gradient for professional SaaS feel ======================================== */ /* Primary Brand Color - Indigo */ --ctl-color-brand: #6366f1; --ctl-color-brand-hover: #4f46e5; --ctl-color-brand-active: #4338ca; --ctl-color-brand-subtle: rgba(99, 102, 241, 0.1); --ctl-color-brand-2: #4f46e5; --ctl-color-on-brand: #ffffff; /* Primary action colors */ --ctl-color-primary: #6366f1; --ctl-color-primary-hover: #4f46e5; --ctl-color-primary-text: #ffffff; /* Secondary Color - Navy (#2c5282) for gradients, borders, accents */ --ctl-color-secondary: #2c5282; --ctl-color-secondary-dark: #1a365d; --ctl-color-secondary-light: #3182ce; --ctl-color-on-secondary: #ffffff; /* ======================================== BACKGROUND & SURFACE Clean, professional backgrounds ======================================== */ --ctl-color-bg: #ffffff; --ctl-color-surface: #f8fafc; --ctl-color-surface-1: #ffffff; --ctl-color-surface-2: #f1f5f9; --ctl-color-surface-hover: #e2e8f0; --ctl-color-overlay: rgba(15, 23, 42, 0.5); --ctl-color-surface-inverse: #1e293b; --ctl-color-on-surface-inverse: #f8fafc; /* ======================================== TEXT COLORS High contrast for clarity ======================================== */ --ctl-color-text: #0f172a; --ctl-color-text-secondary: #475569; --ctl-color-muted: #64748b; --ctl-color-text-inverse: #ffffff; /* ======================================== BORDER COLORS ======================================== */ --ctl-color-border: #e2e8f0; --ctl-color-border-2: #cbd5e1; --ctl-color-border-strong: #94a3b8; --ctl-color-divider: #f1f5f9; /* ======================================== SEMANTIC COLORS ======================================== */ /* Success */ --ctl-color-success: #10b981; --ctl-color-success-bg: rgba(16, 185, 129, 0.1); --ctl-color-success-surface: #d1fae5; --ctl-color-on-success: #ffffff; /* Warning */ --ctl-color-warning: #f59e0b; --ctl-color-warning-bg: rgba(245, 158, 11, 0.1); --ctl-color-warning-surface: #fef3c7; --ctl-color-on-warning: #ffffff; /* Error/Danger */ --ctl-color-error: #ef4444; --ctl-color-error-bg: rgba(239, 68, 68, 0.1); --ctl-color-danger: #ef4444; --ctl-color-danger-bg: rgba(239, 68, 68, 0.1); --ctl-color-danger-text: #dc2626; --ctl-color-danger-border: rgba(239, 68, 68, 0.3); --ctl-color-danger-surface: #fee2e2; --ctl-color-on-danger: #ffffff; /* Info */ --ctl-color-info: #3b82f6; --ctl-color-info-bg: rgba(59, 130, 246, 0.1); --ctl-color-info-surface: #dbeafe; --ctl-color-on-info: #ffffff; /* ======================================== TYPOGRAPHY ======================================== */ --ctl-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ctl-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", "Courier New", monospace; /* ======================================== SPACING & LAYOUT ======================================== */ --ctl-radius-sm: 4px; --ctl-radius-md: 8px; --ctl-radius-lg: 12px; --ctl-radius-xl: 16px; --ctl-radius-full: 9999px; /* ======================================== SHADOWS ======================================== */ --ctl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ctl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --ctl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --ctl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* ======================================== GRADIENTS (Custom for landing pages) ======================================== */ /* Brand gradient */ --ctl-gradient-brand: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --ctl-gradient-brand-subtle: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Hero/Header gradients */ --ctl-gradient-hero: linear-gradient(135deg, #2c5282 0%, #2d3748 100%); --ctl-gradient-header: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); --ctl-gradient-cta: linear-gradient(135deg, #2c5282 0%, #1a365d 100%); /* Body gradient */ --ctl-gradient-body: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } /* Dark mode variant for MyStorageWay */ html[data-theme='mystorageway-dark'] { /* Brand colors stay consistent */ --ctl-color-brand: #6366f1; --ctl-color-brand-hover: #818cf8; --ctl-color-brand-active: #a5b4fc; --ctl-color-brand-subtle: rgba(99, 102, 241, 0.15); --ctl-color-on-brand: #ffffff; --ctl-color-primary: #6366f1; --ctl-color-primary-hover: #818cf8; --ctl-color-primary-text: #ffffff; /* Secondary - brighter in dark mode */ --ctl-color-secondary: #4299e1; --ctl-color-secondary-dark: #2c5282; --ctl-color-secondary-light: #63b3ed; --ctl-color-on-secondary: #ffffff; /* Dark backgrounds */ --ctl-color-bg: #0f172a; --ctl-color-surface: #1e293b; --ctl-color-surface-1: #1e293b; --ctl-color-surface-2: #334155; --ctl-color-surface-hover: #475569; --ctl-color-overlay: rgba(0, 0, 0, 0.7); --ctl-color-surface-inverse: #f8fafc; --ctl-color-on-surface-inverse: #0f172a; /* Light text on dark backgrounds */ --ctl-color-text: #f1f5f9; --ctl-color-text-secondary: #cbd5e1; --ctl-color-muted: #94a3b8; --ctl-color-text-inverse: #0f172a; /* Dark borders */ --ctl-color-border: #334155; --ctl-color-border-2: #475569; --ctl-color-border-strong: #64748b; --ctl-color-divider: #1e293b; /* Semantic colors - adjusted for dark mode */ --ctl-color-success: #34d399; --ctl-color-success-bg: rgba(52, 211, 153, 0.15); --ctl-color-warning: #fbbf24; --ctl-color-warning-bg: rgba(251, 191, 36, 0.15); --ctl-color-error: #f87171; --ctl-color-danger: #f87171; --ctl-color-danger-bg: rgba(248, 113, 113, 0.15); --ctl-color-info: #60a5fa; --ctl-color-info-bg: rgba(96, 165, 250, 0.15); /* Dark mode gradients */ --ctl-gradient-hero: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --ctl-gradient-header: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --ctl-gradient-cta: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }