/* * Account Theme Tokens - Centralized Dark/Light Color System * ISSUE_7410: Unified theme support for all logged-in account pages * * Provides consistent dark/light theme tokens for: * - Account Home (/account/) * - General Profile (/general/) * - Settings Center (/settings/) * - Upgrade Plan (/user-upgrade/) * - Help Dialog * * Prefix: --act-* (account theme) * Pattern: Dark default on :root, Light override via [data-theme="light"] * Palette: Tailwind Gray scale (gray-900/800/700/500/400/200) * * Theme detection: [data-theme="light"] on element * Storage: localStorage key "theme" (values: "light" | "dark") */ /* ============================================= Dark Theme (Default) - Tailwind Gray Scale ============================================= */ :root { /* Background */ --act-bg-deep: #0a0e14; --act-bg: #111827; --act-bg-surface: #1f2937; --act-bg-surface-hover: #374151; /* Text */ --act-text-primary: #e5e7eb; --act-text-secondary: #9ca3af; --act-text-muted: #6b7280; --act-text-inverse: #ffffff; /* Border */ --act-border: #374151; --act-border-light: rgba(255, 255, 255, 0.1); /* Brand Accent */ --act-accent: #008F60; --act-accent-hover: #00a86e; --act-accent-alt: #60a5fa; --act-accent-alt-hover: #93c5fd; /* Buttons */ --act-btn-primary-bg: #e5e7eb; --act-btn-primary-text: #111827; --act-btn-primary-hover: #ffffff; --act-btn-secondary-bg: #1f2937; --act-btn-secondary-text: #e5e7eb; --act-btn-secondary-hover: #374151; --act-btn-secondary-border: #374151; /* Badges */ --act-badge-active-bg: rgba(16, 185, 129, 0.15); --act-badge-active-text: #34d399; --act-badge-pending-bg: rgba(245, 158, 11, 0.15); --act-badge-pending-text: #fbbf24; --act-badge-neutral-bg: rgba(255, 255, 255, 0.08); --act-badge-neutral-text: #9ca3af; /* Status */ --act-error: #f87171; --act-success: #34d399; --act-warning: #fbbf24; /* Shadows */ --act-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --act-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4); /* Input */ --act-input-bg: #1f2937; --act-input-border: #374151; --act-input-focus-border: #008F60; --act-input-focus-shadow: rgba(0, 143, 96, 0.15); --act-input-placeholder: #6b7280; --act-error-focus-shadow: rgba(248, 81, 73, 0.15); /* Overlay for design system variable dark overrides */ --act-interface-bg: #111827; --act-interface-bg-secondary: #1f2937; --act-ds-text-primary: #e5e7eb; --act-ds-text-muted: #6b7280; --act-ds-border-subtle: rgba(255, 255, 255, 0.1); --act-ds-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --act-ds-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4); } /* ============================================= Light Theme Override ============================================= */ :root[data-theme="light"] { /* Background */ --act-bg-deep: #ffffff; --act-bg: #ffffff; --act-bg-surface: #f9fafb; --act-bg-surface-hover: #f3f4f6; /* Text */ --act-text-primary: #212529; --act-text-secondary: #6c757d; --act-text-muted: #868e96; --act-text-inverse: #ffffff; /* Border */ --act-border: #e5e7eb; --act-border-light: #f0f0f0; /* Brand Accent */ --act-accent: #008F60; --act-accent-hover: #007a52; --act-accent-alt: #3b82f6; --act-accent-alt-hover: #2563eb; /* Buttons */ --act-btn-primary-bg: #1f2937; --act-btn-primary-text: #ffffff; --act-btn-primary-hover: #111827; --act-btn-secondary-bg: #ffffff; --act-btn-secondary-text: #212529; --act-btn-secondary-hover: #f9fafb; --act-btn-secondary-border: #e5e7eb; /* Badges */ --act-badge-active-bg: #e4f5ee; --act-badge-active-text: #007a52; --act-badge-pending-bg: #fffbeb; --act-badge-pending-text: #92400e; --act-badge-neutral-bg: #f3f4f6; --act-badge-neutral-text: #6c757d; /* Status */ --act-error: #e53e3e; --act-success: #10b981; --act-warning: #f59e0b; /* Shadows */ --act-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1); --act-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15); /* Input */ --act-input-bg: #ffffff; --act-input-border: #e5e7eb; --act-input-focus-border: #008F60; --act-input-focus-shadow: rgba(0, 143, 96, 0.15); --act-input-placeholder: #868e96; --act-error-focus-shadow: rgba(229, 62, 62, 0.15); /* Overlay for design system variable light values (match existing) */ --act-interface-bg: #ffffff; --act-interface-bg-secondary: #f8f9fa; --act-ds-text-primary: #2c3e50; --act-ds-text-muted: #7f8c8d; --act-ds-border-subtle: rgba(0, 0, 0, 0.05); --act-ds-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1); --act-ds-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15); } /* ============================================= Body/HTML Background - Scoped by WordPress body classes Per ISSUE_7050: CSS vars on children don't cascade to parents Must use hardcoded values + !important ============================================= */ /* Dark (default) - use :has() for reliable detection regardless of body class naming */ body:has(.profile-page-wrapper), body:has(.settings-center), body:has(.account-home) { background-color: #111827 !important; } html:has(.profile-page-wrapper), html:has(.settings-center), html:has(.account-home) { background-color: #111827 !important; } /* WordPress/GeneratePress intermediate containers must be transparent */ /* Must match .separate-containers specificity to override GP dynamic CSS */ body:has(.profile-page-wrapper) .site, body:has(.profile-page-wrapper) .site-content, body:has(.profile-page-wrapper) .entry-content, body:has(.profile-page-wrapper) .inside-article, body:has(.profile-page-wrapper) #page, body:has(.profile-page-wrapper) .grid-container, body:has(.settings-center) .site, body:has(.settings-center) .site-content, body:has(.settings-center) .entry-content, body:has(.settings-center) .inside-article, body:has(.settings-center) #page, body:has(.settings-center) .grid-container, body:has(.settings-center) .site-main, body:has(.settings-center) article, body.separate-containers:has(.settings-center) .inside-article, body:has(.account-home) .site, body:has(.account-home) .site-content, body:has(.account-home) .entry-content, body:has(.account-home) .inside-article, body:has(.account-home) #page, body:has(.account-home) .grid-container, body.separate-containers:has(.account-home) .inside-article { background: transparent !important; background-color: transparent !important; } /* Light override */ [data-theme="light"] body:has(.profile-page-wrapper), [data-theme="light"] body:has(.settings-center), [data-theme="light"] body:has(.account-home), body.light-theme:has(.profile-page-wrapper), body.light-theme:has(.settings-center), body.light-theme:has(.account-home) { background-color: #ffffff !important; } html[data-theme="light"]:has(.profile-page-wrapper), html[data-theme="light"]:has(.settings-center), html[data-theme="light"]:has(.account-home) { background-color: #ffffff !important; }