/* ================================================ DALMIA DUAL-THEME AUTOPILOT - TOKEN SYSTEM ================================================ Contains zero hardcoded semantic colors. Everything binds to CSS variables controlled by the [data-theme] attribute on . */ :root { /* Baseline Structure Tokens (Shared) */ --font-primary: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --transition-snappy: cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; } /* ==================================== 🔥 DEALS MODE (Vibrant, Neon, Sales-first) ==================================== */ body[data-theme="deals"] { /* Palettes */ --color-bg-base: #111116; /* Deep dark neon backdrop */ --color-bg-surface: #1C1C24; --color-bg-card: rgba(28, 28, 36, 0.7); --color-bg-raised: #252530; /* Text */ --color-text-primary: #FFFFFF; --color-text-secondary: #9FA1B4; --color-text-muted: #5A5D71; /* Accents (Neon Cyberpunk Vibe for Deals) */ --color-brand-primary: #00E5FF; /* Cyan */ --color-brand-secondary: #7000FF; /* Deep Purple */ --color-brand-tertiary: #FF0055; /* Hot Pink */ /* Gradients */ --gradient-hero: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%); --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%); /* States */ --color-border: rgba(255, 255, 255, 0.08); --color-border-hover: rgba(0, 229, 255, 0.4); --shadow-base: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 24px rgba(0, 229, 255, 0.2); } /* ==================================== 🛡️ SUPPORT MODE (Clean, Trusting, Professional) ==================================== */ body[data-theme="support"] { /* Palettes */ --color-bg-base: #F8F9FB; /* Clean off-white paper */ --color-bg-surface: #FFFFFF; --color-bg-card: #FFFFFF; --color-bg-raised: #FFFFFF; /* Text */ --color-text-primary: #1A1F36; --color-text-secondary: #4F566B; --color-text-muted: #8792A2; /* Accents (Trusting Blues & Greens) */ --color-brand-primary: #0066FF; /* Trust Blue */ --color-brand-secondary: #10B981; /* Success Green */ --color-brand-tertiary: #3B82F6; /* Soft Blue */ /* Gradients */ --gradient-hero: linear-gradient(135deg, var(--color-brand-primary) 0%, #0044CC 100%); --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%); /* States */ --color-border: rgba(26, 31, 54, 0.08); --color-border-hover: rgba(0, 102, 255, 0.3); --shadow-base: 0 4px 16px rgba(11, 23, 44, 0.06); --shadow-glow: 0 8px 24px rgba(0, 102, 255, 0.15); } /* ==================================== GLOBAL LAYOUT & RESETS ==================================== */ body { background-color: var(--color-bg-base); color: var(--color-text-primary); font-family: var(--font-primary); margin: 0; padding: 0; transition: background-color var(--transition-snappy), color var(--transition-snappy); line-height: 1.5; } a { color: var(--color-brand-primary); text-decoration: none; transition: color var(--transition-snappy); } h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); line-height: 1.2; margin-top: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); } /* Base Widget Container */ .widget-card { background: var(--color-bg-card); background-image: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-base); padding: var(--space-lg); transition: all var(--transition-snappy); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); height: 100%; display: flex; flex-direction: column; } .widget-card:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-glow); transform: translateY(-2px); } .widget-title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 8px; } .widget-description { color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: var(--space-md); flex-grow: 1; } .widget-action { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; background: var(--gradient-hero); color: #FFFFFF; border-radius: var(--radius-md); font-weight: 600; border: none; cursor: pointer; box-shadow: var(--shadow-glow); transition: filter var(--transition-snappy), transform var(--transition-snappy); } .widget-action:hover { filter: brightness(1.1); transform: scale(1.02); color: #FFFFFF; } /* Structural CSS Grids */ .dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); margin: var(--space-xl) 0; } /* Span utilities for 15 widgets */ .col-span-12 { grid-column: span 12; } .col-span-8 { grid-column: span 8; } .col-span-6 { grid-column: span 6; } .col-span-4 { grid-column: span 4; } .col-span-3 { grid-column: span 3; } @media (max-width: 992px) { .dashboard-grid { grid-template-columns: repeat(8, 1fr); } .col-span-4, .col-span-3 { grid-column: span 4; } } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: repeat(4, 1fr); } .col-span-8, .col-span-6, .col-span-4, .col-span-3 { grid-column: span 4; } }