/** * platform-identity.css — TransVoiceTraining Identity Design Tokens * * Defines the complete Identity Color Scheme for TransVoiceTraining. * This is the single source of truth for all brand colors, transitions, * and theme-switching custom properties across the platform. * * Architecture: * :root — Base / shared values (palette + timing tokens) * [data-theme="dark"] — Primary dark theme (deep navy surfaces) * [data-theme="light"] — Secondary light theme (warm off-white surfaces) * * Usage: * All component styles must consume colors via var(--property, fallback). * Never hardcode hex identity/accent colors in component CSS. * Fallback values must always be provided, e.g. var(--primary, #D4A574). * * Color rationale: * Primary accent #D4A574 (warm gold) evokes premium, clinical care, * and trans-affirmative empowerment. Distinct from OnlyFans (#00AFF0), * Fansly (#E040FB), Fanvue (#00BFA5), and the retired reelifly palette * (#ff6b6b, gradient #667eea–#764ba2). * * Pure CSS only — no preprocessors, no utility frameworks. * All interactive elements must use var(--transition-speed) and * var(--transition-ease) for consistent micro-interactions. * * @package TransVoiceTraining * @version 1.0.0 * @since 2025-01 */ /* ========================================================================== :root — Base / Shared Custom Properties These values apply regardless of theme. Override with [data-theme] rules. ========================================================================== */ :root { /* ── Primary brand accent — warm gold ── */ --primary: #D4A574; --primary-hover: #C4956A; --primary-muted: rgba(212, 165, 116, 0.15); /* ── Secondary and tertiary accents ── */ --secondary: #8B7EC8; --accent: #E8A87C; /* ── Semantic state colors ── */ --success: #4CAF82; --warning: #E5A84B; --danger: #E06B6B; /* ── Layout ── */ --sidebar-width: 280px; /* ── Transition timing — used on ALL interactive elements ── */ --transition-speed: 250ms; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-standard: var(--transition-speed) var(--transition-ease); /* ── Typography ── */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace; } /* ========================================================================== [data-theme="dark"] — Primary Dark Theme Deep navy-black surfaces with warm gold accents. Apply as: ========================================================================== */ [data-theme="dark"] { /* ── Surface colors ── */ --body-bg: #0d0d1a; --secondary-bg: #16162a; --tertiary-bg: #0f0f1a; --card-bg: #1a1a2e; /* ── Text ── */ --text-color: #f0f0f5; --text-muted: #8a8a9a; /* ── Borders ── */ --border-color: #2a2a3e; /* ── Sidebar surfaces ── */ --sidebar-bg: #12121f; --sidebar-text: #c0c0d0; --sidebar-active-bg: rgba(212, 165, 116, 0.12); --sidebar-hover-bg: rgba(212, 165, 116, 0.08); --sidebar-active-border: var(--primary, #D4A574); /* ── Form inputs ── */ --input-bg: #1e1e32; --input-border: #2d2d44; --input-focus-border: var(--primary, #D4A574); /* ── Auth page specifics ── */ --auth-page-bg: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); --auth-card-bg: rgba(255, 255, 255, 0.03); --auth-card-border: rgba(255, 255, 255, 0.08); --auth-card-glow: 0 0 40px rgba(212, 165, 116, 0.08); /* ── Panel/card shadows ── */ --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.4); } /* ========================================================================== [data-theme="light"] — Secondary Light Theme Warm off-white surfaces with warm gold accents. Apply as: ========================================================================== */ [data-theme="light"] { /* ── Surface colors ── */ --body-bg: #f5f5fa; --secondary-bg: #f0f0f5; --tertiary-bg: #e8e8f0; --card-bg: #ffffff; /* ── Text ── */ --text-color: #1a1a2e; --text-muted: #6b6b7a; /* ── Borders ── */ --border-color: #e0e0ea; /* ── Sidebar surfaces ── */ --sidebar-bg: #ffffff; --sidebar-text: #4a4a5a; --sidebar-active-bg: rgba(212, 165, 116, 0.12); --sidebar-hover-bg: rgba(212, 165, 116, 0.06); --sidebar-active-border: var(--primary, #D4A574); /* ── Form inputs ── */ --input-bg: #ffffff; --input-border: #d0d0da; --input-focus-border: var(--primary, #D4A574); /* ── Auth page specifics ── */ --auth-page-bg: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); --auth-card-bg: rgba(255, 255, 255, 0.06); --auth-card-border: rgba(255, 255, 255, 0.12); --auth-card-glow: 0 0 40px rgba(212, 165, 116, 0.08); /* ── Panel/card shadows ── */ --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ========================================================================== System preference fallback — no [data-theme] attribute set Defaults to dark theme via media query. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --body-bg: #0d0d1a; --secondary-bg: #16162a; --tertiary-bg: #0f0f1a; --card-bg: #1a1a2e; --text-color: #f0f0f5; --text-muted: #8a8a9a; --border-color: #2a2a3e; --sidebar-bg: #12121f; --sidebar-text: #c0c0d0; --sidebar-active-bg: rgba(212, 165, 116, 0.12); --sidebar-hover-bg: rgba(212, 165, 116, 0.08); --sidebar-active-border: #D4A574; --input-bg: #1e1e32; --input-border: #2d2d44; --input-focus-border: #D4A574; --auth-page-bg: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); --auth-card-bg: rgba(255, 255, 255, 0.03); --auth-card-border: rgba(255, 255, 255, 0.08); --auth-card-glow: 0 0 40px rgba(212, 165, 116, 0.08); --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.4); } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --body-bg: #f5f5fa; --secondary-bg: #f0f0f5; --tertiary-bg: #e8e8f0; --card-bg: #ffffff; --text-color: #1a1a2e; --text-muted: #6b6b7a; --border-color: #e0e0ea; --sidebar-bg: #ffffff; --sidebar-text: #4a4a5a; --sidebar-active-bg: rgba(212, 165, 116, 0.12); --sidebar-hover-bg: rgba(212, 165, 116, 0.06); --sidebar-active-border: #D4A574; --input-bg: #ffffff; --input-border: #d0d0da; --input-focus-border: #D4A574; --auth-page-bg: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); --auth-card-bg: rgba(255, 255, 255, 0.06); --auth-card-border: rgba(255, 255, 255, 0.12); --auth-card-glow: 0 0 40px rgba(212, 165, 116, 0.08); --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.15); } } /* ========================================================================== Global interactive element baseline These declarations ensure every interactive surface has a transition. Component CSS should extend, not override, these defaults. ========================================================================== */ a { transition: color var(--transition-standard, 250ms cubic-bezier(0.4, 0, 0.2, 1)); } button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] { transition: all var(--transition-standard, 250ms cubic-bezier(0.4, 0, 0.2, 1)); } input, textarea, select { transition: border-color var(--transition-standard, 250ms cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--transition-standard, 250ms cubic-bezier(0.4, 0, 0.2, 1)); } /* ========================================================================== Global focus-visible — keyboard navigation accessibility Uses --primary design token so it stays consistent with the theme. ========================================================================== */ :focus-visible { outline: 2px solid var(--primary, #D4A574); outline-offset: 2px; } /* ========================================================================== Reduced motion override Respects OS accessibility settings for users who prefer less motion. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }