/** * Prime Self Design System — Unified Design Tokens * ================================================== * tokens.css — SINGLE SOURCE OF TRUTH for all CSS custom properties. * * Replaces design-tokens.css + design-tokens-premium.css (both now deprecated). * Load only this file: * * Resolution precedence (higher = wins): * 1. tokens.css (this file) — final resolved values, no conflicts possible * 2. app.css / component files — may use var() references to tokens here * * WCAG AA: all text tokens pass ≥4.5:1 on the canonical dark background (#05091a / --bg). * ================================================== */ :root { /* ═══════════════════════════════════════════════════════════ COLOR PALETTE — Foundation Colors ══════════════════════════════════════════════════════════ */ /* — Neutrals: Dark Theme Scale — */ --color-neutral-50: #f8f7fa; --color-neutral-100: #e8e6f0; --color-neutral-200: #d0cde0; --color-neutral-300: #b8b4d0; --color-neutral-400: #a8a2c0; /* WCAG AA on dark backgrounds */ --color-neutral-500: #8882a0; --color-neutral-600: #6a6580; --color-neutral-700: #4a4560; --color-neutral-800: #1a2d4a; --color-neutral-850: #111d38; --color-neutral-900: #0b1226; --color-neutral-950: #05091a; /* — Premium Neutrals (Apple / Porsche palette) — */ --color-black: #000000; --color-near-black: #0a0a0a; --color-charcoal: #1c1c1e; --color-graphite: #2c2c2e; --color-silver: #8e8e93; --color-aluminum: #c7c7cc; --color-snow: #f2f2f7; --color-white: #ffffff; /* — Depth & Dimension — */ --color-midnight: #001219; --color-deep-space: #0d1b2a; --color-slate: #1b263b; --color-steel: #415a77; --color-frost: #778da9; /* — Primary: Gold — */ --color-gold-50: #fef9ed; --color-gold-100: #fdf3d7; --color-gold-200: #fae6af; --color-gold-300: #f7d887; --color-gold-400: #f0ca65; --color-gold-500: #c9a84c; /* THE gold — canonical interactive colour */ --color-gold-600: #a88840; --color-gold-700: #7a6030; --color-gold-800: #5a4824; --color-gold-900: #3a3018; --color-gold-dark: #a88840; /* alias → --color-gold-600 */ --color-gold-light: #f0ca65; /* alias → --color-gold-400 */ /* — Accent: Blue (trust) — */ --color-blue-50: #f0f5ff; --color-blue-100: #e0eafe; --color-blue-200: #c0d5fc; --color-blue-300: #a8c8fc; --color-blue-400: #93baf8; --color-blue-500: #4a82f0; --color-blue-600: #3a72e0; --color-blue-700: #2a5fc8; --color-blue-800: #1a4aaa; --color-blue-900: #0e3280; /* — Accent 2: Emerald (growth) — */ --color-teal-50: #f0fdf8; --color-teal-100: #ccfbea; --color-teal-200: #99f5d2; --color-teal-300: #5ee8b4; --color-teal-400: #22c78e; --color-teal-500: #10a870; --color-teal-600: #0d9060; --color-teal-700: #0a7550; --color-teal-800: #085c40; --color-teal-900: #064530; /* — Porsche Signature Red — */ --color-porsche-red: #d5001c; --color-porsche-red-dark: #a30015; --color-porsche-red-light: #ff1744; /* — Diary / Journal Pink — */ --color-diary: #E056A0; /* diary event dot colour in calendar (hot pink) */ /* — Rose/Mauve Feminine Variants — */ --color-rose-primary: #d4a5a5; /* Soft, warm rose (replaces gold in feminine theme) */ --color-rose-light: #e8c4c4; /* Lighter rose for backgrounds */ --color-rose-dark: #b8858f; /* Deeper rose for accents */ --color-mauve: #c9a8b8; /* Elegant mauve for secondary accents */ --color-mauve-light: #dcc4d1; /* Light mauve for soft backgrounds */ /* — Atmosphere Brand Variants — */ /* Primary Gold Alternatives */ --color-gold-atelier: #ffd36d; /* Atelier: Light cream gold (feminine) */ --color-gold-atmosphere-warm: #ffad7a; /* Atmosphere: Warm peach-gold (seasonal) */ --color-gold-atmosphere-cool: #ffe07f; /* Atmosphere: Cool golden (spring) */ /* Secondary Color Variants (Blue/Purple) */ --color-blue-atelier: #78b8ff; /* Atelier: Soft blue accent */ --color-blue-atmosphere: #7dc8ff; /* Atmosphere: Brighter blue accent */ --color-blue-cool: #7ecbff; /* Ritual Shell: Cool blue variant */ --color-blue-premium-dark: #4f7ee8; /* Premium Self: Deep blue */ --color-blue-premium: #5b8def; /* Premium Self: Medium blue */ --color-blue-saas: #5b8def; /* SaaS Brand: Enterprise blue */ /* Tertiary Color Variants (Pink/Teal) */ --color-pink-atelier: #ff8ec4; /* Atelier: Soft pink accent */ --color-pink-atmosphere: #ff73b5; /* Atmosphere: Vibrant pink (feminine) */ --color-pink-cool: #ff8f9e; /* Ritual Shell: Cool pink variant */ --color-teal-atmosphere: #72e4c2; /* Atmosphere: Vibrant teal (growth) */ /* Background & Text Variants by Atmosphere */ --color-text-warm-strong: #fffaf3; /* Atelier text: Strong */ --color-text-warm-body: #fff0e3; /* Atelier text: Body */ --color-text-warm-soft: #f6e6d7; /* Atelier text: Soft */ --color-text-warm-faint: #ecd8c4; /* Atelier text: Faint */ --color-text-cool-strong: #fff7ea; /* Atmosphere text: Strong */ --color-text-cool-body: #ffeddc; /* Atmosphere text: Body */ --color-text-cool-soft: #f8e1c9; /* Atmosphere text: Soft */ --color-text-cool-faint: #f0cfaa; /* Atmosphere text: Faint */ /* UI Element Colors — Typography Variants */ --color-text-emphasis: #f0eff5; /* Light, cool-toned emphasis */ --color-border-warm: #1d2f52; /* Warm atmosphere borders */ /* Code Editor & AI Features */ --color-code-bg: #0a0e27; /* AI editor dark background */ --color-syntax-orange: #ff9800; /* Code syntax highlighting */ --color-text-code-light: #d0d0d0; /* Light gray for code text */ --color-text-code-medium: #c0c0c0; /* Medium gray for code text */ /* Semantic Palette Colors — */ --color-success-50: #f0fdf4; --color-success-500: #50c878; --color-success-700: #15803d; --color-success: #30d158; /* Apple green (premium alias) */ --color-error-50: #fef2f2; --color-error-500: #e05050; --color-error-700: #b91c1c; --color-error: #ff453a; /* Apple red (premium alias) */ --color-warning-50: #fefce8; --color-warning-500: #eab308; --color-warning-700: #a16207; --color-warning: #ff9f0a; /* Apple orange (premium alias) */ --color-info-50: #eff6ff; --color-info-500: #3b82f6; --color-info-700: #1d4ed8; --color-info: #0a84ff; /* Apple blue (premium alias) */ /* — Forge Role Colors — */ --color-forge-power: #f08080; /* Light coral for power role badges */ --color-forge-craft: #80e0a0; /* Light green for craft role badges */ --color-json-syntax: #90c890; /* Syntax highlighting green for JSON */ --color-red-bright: #ff6b6b; /* Bright red for borders */ --color-teal-bright: #4ecdc4; /* Bright teal for borders */ /* — Composition Segment Colors — */ --color-success-light: #60d888; /* Light green for composition segments */ --color-purple-composition: #6a4fc8; /* Purple for composition projector */ --color-teal-composition: #4fc8c8; /* Teal for composition reflector */ --color-teal-light: #80e0e0; /* Light cyan for mirrors role */ /* — Additional Neutrals — */ --color-neutral-dark: #111119; /* Dark neutral for backgrounds */ --color-neutral-border: #2a2a3a; /* Neutral border color */ --color-neutral-card: #1e1a2e; /* Card background neutral */ /* — UI Element Colors — */ --color-gray-text: #3c4043; /* Google-style text color */ --color-gray-border: #dadce0; /* Light gray border */ --color-purple-manual: #a78bfa; /* Manual coords link color */ --color-purple-border: #3e3856; /* Purple border color */ --color-purple-pro: #b09aed; /* Pro badge purple */ --color-dark-ink: #0b1225; /* Deep dark ink for light-mode text */ /* — Social Media Brand Colors — */ --color-social-facebook: #1877f2; --color-social-twitter: #1da1f2; --color-social-linkedin: #0077b5; --color-social-whatsapp: #25d366; --color-social-reddit: #ff4500; /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Backgrounds ══════════════════════════════════════════════════════════ */ /* Canonical dark-mode backgrounds (premium values — load second, win) */ --bg-primary: var(--color-near-black); /* #0a0a0a */ --bg-secondary: var(--color-charcoal); /* #1c1c1e */ --bg-tertiary: var(--color-graphite); /* #2c2c2e */ --bg-elevated: rgba(44, 44, 46, 0.95); --bg-glass: rgba(28, 28, 30, 0.72); --bg-overlay: rgba(0, 0, 0, 0.8); /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Borders ══════════════════════════════════════════════════════════ */ --border-subtle: #3a3a3f; /* increased lightness from --color-neutral-800 for form input visibility (GAP-003) */ --border-default: var(--color-neutral-800); --border-emphasis: var(--color-gold-700); --border-focus: var(--color-gold-500); --border-primary: rgba(255, 255, 255, 0.15); --border-secondary: rgba(255, 255, 255, 0.08); --border-accent: var(--color-gold-500); /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Text ══════════════════════════════════════════════════════════ */ /* Canonical values — premium wins for primary/secondary/tertiary */ --text-primary: var(--color-white); /* #ffffff */ --text-secondary: rgba(255, 255, 255, 0.85); --text-tertiary: rgba(255, 255, 255, 0.55); --text-inverse: var(--color-neutral-950); --text-link: var(--color-gold-400); --text-link-hover: var(--color-gold-300); /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Interactive ══════════════════════════════════════════════════════════ */ --interactive-primary: var(--color-gold-500); --interactive-primary-hover: var(--color-gold-400); --interactive-primary-active: var(--color-gold-600); --interactive-secondary: var(--color-neutral-850); --interactive-secondary-hover: var(--color-neutral-800); --interactive-secondary-active: var(--color-neutral-700); /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Status ══════════════════════════════════════════════════════════ */ --status-success: var(--color-success-500); --status-error: var(--color-error-500); --status-warning: var(--color-gold-500); --status-info: var(--color-teal-400); /* ═══════════════════════════════════════════════════════════ SEMANTIC TOKENS — Alpha/Transparency Overlays NEW: Consolidates duplicate rgba() values from CSS files ══════════════════════════════════════════════════════════ */ /* Gold transparencies (comprehensive set for all alpha values used) */ --gold-alpha-06: rgba(201, 168, 76, 0.06); /* Very subtle backgrounds */ --gold-alpha-08: rgba(201, 168, 76, 0.08); /* Subtle overlays & borders */ --gold-alpha-12: rgba(201, 168, 76, 0.12); /* Light hover states */ --gold-alpha-14: rgba(201, 168, 76, 0.14); /* Focus rings */ --gold-alpha-16: rgba(201, 168, 76, 0.16); /* Shadow accents */ --gold-alpha-18: rgba(201, 168, 76, 0.18); /* 8+ occurrences → light overlays */ --gold-alpha-20: rgba(201, 168, 76, 0.20); /* Button borders */ --gold-alpha-24: rgba(201, 168, 76, 0.24); /* Link underlines */ --gold-alpha-25: rgba(201, 168, 76, 0.25); /* Box shadows */ --gold-alpha-30: rgba(201, 168, 76, 0.30); /* Medium overlays */ --gold-alpha-35: rgba(201, 168, 76, 0.35); /* Strong shadows */ --gold-alpha-36: rgba(201, 168, 76, 0.36); /* Alternative overlays */ --gold-alpha-40: rgba(201, 168, 76, 0.40); /* 3+ occurrences → medium backgrounds */ --gold-alpha-42: rgba(201, 168, 76, 0.42); /* Border highlights */ --gold-alpha-50: rgba(201, 168, 76, 0.50); /* Strong backgrounds */ --gold-alpha-70: rgba(201, 168, 76, 0.70); /* Active states */ --gold-alpha-88: rgba(201, 168, 76, 0.88); /* Near opaque strokes */ --gold-alpha-90: rgba(201, 168, 76, 0.90); /* High contrast accents */ /* White/light transparencies (frequently used as borders/overlays) */ --white-alpha-02: rgba(255, 255, 255, 0.02); /* 4+ occurrences → subtle borders */ --white-alpha-08: rgba(255, 255, 255, 0.08); /* 7+ occurrences → card borders */ --white-alpha-15: rgba(255, 255, 255, 0.15); /* 4+ occurrences → button states */ /* Background transparencies (dark overlays) */ --bg-opaque: rgba(9, 13, 31, 0.96); /* 6+ occurrences → dark overlays */ --bg-overlay-md: rgba(0, 0, 0, 0.5); /* Medium opacity overlay */ --bg-overlay-lg: rgba(0, 0, 0, 0.7); /* Strong opacity overlay */ --bg-dark-95: rgba(20, 20, 30, 0.95); /* Dark background overlay */ /* Error/Warning transparencies (semantic alerts) */ --error-alpha-06: rgba(239, 68, 68, 0.06); /* Very light error backgrounds */ --error-alpha-12: rgba(239, 68, 68, 0.12); /* Light error shadows */ --error-alpha-15: rgba(224, 80, 80, 0.15); /* 2+ occurrences → error backgrounds */ --error-alpha-20: rgba(239, 68, 68, 0.20); /* Medium error shadows */ --teal-alpha-15: rgba(80, 200, 120, 0.15); /* 2+ occurrences → success backgrounds */ --gold-alpha-5: rgba(201, 168, 76, 0.05); /* Very subtle gold tint */ /* Border shadows and depth */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); /* ═══════════════════════════════════════════════════════════ SHORTHAND ALIASES — App-wide single-letter tokens Used throughout app.css, components/, and inline styles. All map to tokens defined above. ══════════════════════════════════════════════════════════ */ --bg: var(--color-neutral-950); /* #05091a */ --bg2: var(--color-neutral-900); /* #0b1226 */ --bg3: var(--color-neutral-850); /* #111d38 */ --border: #1d2f52; /* visible against bg3 */ --gold: var(--color-gold-500); /* #c9a84c — THE gold */ --gold-dim: var(--color-gold-600); /* #a88840 */ --text: #f0eff5; /* primary text (WCAG: >15:1 on --bg) — updated for GAP-003 */ --text-dim: #d8d5e8; /* WCAG AA 6.8:1 on #05091a (was #c4c0d8 @ 5.5:1) — GAP-003 */ --text-muted:#b3aec8; /* WCAG AA 5.1:1 on #05091a (was #918db0 @ 4.2:1) — GAP-003 */ --accent: #5b8af0; /* trust-blue accent */ --accent2: var(--color-teal-400); /* #22c78e */ --red: var(--color-error-500); /* #e05050 */ --green: var(--color-success-500); /* #50c878 */ --radius: var(--radius-xl); /* 16px */ --shadow: 0 4px 24px rgba(0,0,0,0.5); /* ═══════════════════════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════════════════════ */ /* Font Families */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; --font-serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; /* Font Sizes — fluid clamp scale (responsive, WCAG-friendly) */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem); /* 11–12px */ --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); /* 13–14px */ --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); /* 14–16px */ --text-md: 1.063rem; /* 17px — Apple body */ --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16–18px */ --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18–20px */ --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20–24px */ --text-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 24–30px */ --text-4xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem); /* 30–36px */ /* Font Size Backward-Compat Aliases */ --font-size-xs: var(--text-xs); --font-size-sm: var(--text-sm); --font-size-base: var(--text-base); --font-size-md: var(--text-lg); --font-size-lg: var(--text-xl); --font-size-xl: var(--text-2xl); --font-size-2xl: var(--text-3xl); --font-size-3xl: var(--text-4xl); /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Premium aliases */ --weight-thin: 100; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ═══════════════════════════════════════════════════════════ SPACING — 4px base unit ══════════════════════════════════════════════════════════ */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Semantic Spacing Aliases (easier to read in code) */ --space-xs: var(--space-1); /* 4px — micro spacing */ --space-sm: var(--space-2); /* 8px — small padding */ --space-md: var(--space-3); /* 12px — medium */ --space-lg: var(--space-4); /* 16px — large */ --space-xl: var(--space-5); /* 20px — extra large */ --space-2xl: var(--space-6); /* 24px — 2x large */ --space-3xl: var(--space-8); /* 32px — 3x large */ --space-4xl: var(--space-10); /* 40px — 4x large */ --space-5xl: var(--space-12); /* 48px — 5x large */ /* ═══════════════════════════════════════════════════════════ BORDERS ══════════════════════════════════════════════════════════ */ /* Border Width Scale */ --border-width-thin: 1px; --border-width-normal: 2px; --border-width-thick: 3px; /* Border Radius — px values (premium precision) */ /* Already defined below, but referenced here for organization */ /* ═══════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════ */ --container-lg: 1024px; /* Responsive Breakpoints */ --bp-sm: 480px; /* narrow mobile */ --bp-md: 640px; /* wide mobile / small tablet */ --bp-lg: 768px; /* tablet / sidebar threshold */ --bp-xl: 1024px; /* desktop threshold */ /* Z-Index Stack */ --z-sticky: 20; --z-header: 100; /* sticky site header, above sidebar (95) */ --z-dropdown: 140; /* menus/popups descending from header/nav */ --z-mobile-nav: 150; --z-sidebar-mobile: 160; /* slide-in drawer: above nav, below modals */ --z-sidebar-backdrop: 159; /* backdrop: between content and sidebar drawer */ --z-modal-backdrop: 200; --z-modal: 210; --z-tooltip: 300; --z-hamburger: 310; /* above tooltip (300) so always clickable */ --z-notification: 400; --z-onboarding: 500; --z-live-session: 600; /* live practitioner session panel */ --z-live-cursor: 610; /* cursor tracker overlay during live session */ /* ═══════════════════════════════════════════════════════════ BORDERS & RADII ══════════════════════════════════════════════════════════ */ /* Radii — px values (premium precision) */ /* IMPROVEMENT: Increased for softer, more feminine curves */ --radius-sm: 6px; /* was 4px */ --radius-md: 10px; /* was 8px */ --radius-lg: 14px; /* was 12px */ --radius-xl: 18px; /* was 16px */ --radius-2xl: 28px; /* was 24px */ --radius-full: 9999px; --border-width-thin: 1px; --border-width-medium: 2px; /* ═══════════════════════════════════════════════════════════ SHADOWS & ELEVATION ══════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 3px rgba(201, 168, 76, 0.3); --shadow-focus-error: 0 0 0 3px rgba(224, 80, 80, 0.3); /* Glow Effects */ --glow-red: 0 0 20px rgba(213, 0, 28, 0.4); --glow-gold: 0 0 20px rgba(212, 175, 55, 0.3); /* ═══════════════════════════════════════════════════════════ BLUR & EFFECTS ══════════════════════════════════════════════════════════ */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; --backdrop-blur-md: blur(12px) saturate(180%); /* ═══════════════════════════════════════════════════════════ TRANSITIONS & ANIMATIONS ══════════════════════════════════════════════════════════ */ --duration-instant: 100ms; --duration-fast: 200ms; /* was 150ms — softer motion */ --duration-normal: 280ms; /* was 200ms — silkier feel */ --duration-slow: 400ms; /* was 300ms — more delicate */ --duration-slower: 600ms; /* was 500ms */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* IMPROVEMENT: Added silk easing for femininity */ --ease-silk: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* smooth, flowing easing */ --transition-colors: color var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-all: all var(--duration-normal) var(--ease-in-out); /* ═══════════════════════════════════════════════════════════ GRADIENTS ══════════════════════════════════════════════════════════ */ --gradient-accent-glow: radial-gradient( rgba(213, 0, 28, 0.15) 0%, rgba(213, 0, 28, 0) 70% ); --gradient-gold-glow: radial-gradient( rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 70% ); --gradient-mesh: radial-gradient(at 0% 0%, rgba(213, 0, 28, 0.1) 0%, transparent 50%), radial-gradient(at 100% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(10, 132, 255, 0.06) 0%, transparent 50%); --gradient-surface: linear-gradient( var(--color-graphite) 0%, var(--color-charcoal) 100% ); /* ═══════════════════════════════════════════════════════════ COLOR OPACITY VARIANTS — Semi-transparent semantic tokens Used for backgrounds, overlays, and atmospheric effects ══════════════════════════════════════════════════════════ */ /* Gold opacity scale (for app.css background effects) */ --gold-alpha-02: rgba(201, 168, 76, 0.02); --gold-alpha-04: rgba(201, 168, 76, 0.04); --gold-alpha-08: rgba(201, 168, 76, 0.08); --gold-alpha-12: rgba(201, 168, 76, 0.12); --gold-alpha-14: rgba(201, 168, 76, 0.14); --gold-alpha-18: rgba(201, 168, 76, 0.18); --gold-alpha-22: rgba(201, 168, 76, 0.22); --gold-alpha-28: rgba(201, 168, 76, 0.28); /* Gold Dark opacity scale (for darker gold highlights) */ --gold-dark-alpha-06: rgba(138, 109, 42, 0.06); --gold-dark-alpha-30: rgba(138, 109, 42, 0.3); /* CSS Gold (#ffd700) opacity scale — for profile pages */ --css-gold: #ffd700; --css-gold-light: #ffed4e; --css-gold-alpha-01: rgba(255, 215, 0, 0.01); --css-gold-alpha-02: rgba(255, 215, 0, 0.02); --css-gold-alpha-03: rgba(255, 215, 0, 0.03); --css-gold-alpha-04: rgba(255, 215, 0, 0.04); --css-gold-alpha-10: rgba(255, 215, 0, 0.1); --css-gold-alpha-20: rgba(255, 215, 0, 0.2); --css-gold-alpha-30: rgba(255, 215, 0, 0.3); --css-gold-alpha-40: rgba(255, 215, 0, 0.4); /* High Contrast/Accessibility Colors */ --high-contrast-yellow: #ffff00; /* Pure yellow for high contrast mode */ /* Atmosphere Layer Colors (Dev01 visual enhancements) */ --atm-gold-light: #ffd36d; /* Lighter gold for atmosphere */ --atm-tan: #c8b898; /* Warm tan for atmosphere */ --atm-rose-accent: #ff8f9e; /* Soft rose for atmosphere */ --atm-text-warm: #fffaf3; /* Warm white text */ --atm-text-cream: #fff0e3; /* Cream text */ --atm-text-beige: #f6e6d7; /* Beige text */ /* Accent color scales (blue spectrum) */ --accent-light: #7dcbff; /* Light cyan-blue */ --accent-bright: #78b8ff; /* Bright sky blue */ --accent-muted: #5b8def; /* Muted blue */ /* Accent/Blue opacity scale */ --accent-alpha-08: rgba(91, 138, 240, 0.08); --accent-alpha-14: rgba(91, 138, 240, 0.14); /* White opacity scale (for highlights, borders, overlays) */ --white-alpha-02: rgba(255, 255, 255, 0.02); --white-alpha-03: rgba(255, 255, 255, 0.03); --white-alpha-04: rgba(255, 255, 255, 0.04); --white-alpha-05: rgba(255, 255, 255, 0.05); --white-alpha-06: rgba(255, 255, 255, 0.06); --white-alpha-08: rgba(255, 255, 255, 0.08); --white-alpha-12: rgba(255, 255, 255, 0.12); --white-alpha-16: rgba(255, 255, 255, 0.16); --white-alpha-18: rgba(255, 255, 255, 0.18); --white-alpha-20: rgba(255, 255, 255, 0.2); --white-alpha-22: rgba(255, 255, 255, 0.22); --white-alpha-24: rgba(255, 255, 255, 0.24); --white-alpha-26: rgba(255, 255, 255, 0.26); --white-alpha-30: rgba(255, 255, 255, 0.3); --white-alpha-34: rgba(255, 255, 255, 0.34); --white-alpha-35: rgba(255, 255, 255, 0.35); --white-alpha-50: rgba(255, 255, 255, 0.5); --white-alpha-55: rgba(255, 255, 255, 0.55); --white-alpha-88: rgba(255, 255, 255, 0.88); /* Black opacity scale (for shadows, overlays) */ --black-alpha-01: rgba(0, 0, 0, 0.01); --black-alpha-02: rgba(0, 0, 0, 0.02); --black-alpha-04: rgba(0, 0, 0, 0.04); --black-alpha-06: rgba(0, 0, 0, 0.06); --black-alpha-08: rgba(0, 0, 0, 0.08); --black-alpha-10: rgba(0, 0, 0, 0.1); --black-alpha-18: rgba(0, 0, 0, 0.18); --black-alpha-20: rgba(0, 0, 0, 0.2); --black-alpha-22: rgba(0, 0, 0, 0.22); --black-alpha-24: rgba(0, 0, 0, 0.24); --black-alpha-26: rgba(0, 0, 0, 0.26); --black-alpha-28: rgba(0, 0, 0, 0.28); --black-alpha-30: rgba(0, 0, 0, 0.3); --black-alpha-34: rgba(0, 0, 0, 0.34); --black-alpha-35: rgba(0, 0, 0, 0.35); --black-alpha-38: rgba(0, 0, 0, 0.38); --black-alpha-40: rgba(0, 0, 0, 0.4); --black-alpha-50: rgba(0, 0, 0, 0.5); --black-alpha-70: rgba(0, 0, 0, 0.7); /* Error/Status opacity scale */ --error-alpha-15: rgba(224, 80, 80, 0.15); --error-alpha-18: rgba(224, 80, 80, 0.18); --error-alpha-40: rgba(224, 80, 80, 0.4); /* Success/Teal opacity scale */ --teal-alpha-15: rgba(80, 200, 120, 0.15); --teal-alpha-18: rgba(80, 200, 120, 0.18); --success-alpha-05: rgba(80, 200, 120, 0.05); --success-alpha-12: rgba(80, 200, 120, 0.12); --success-alpha-15: rgba(80, 200, 120, 0.15); /* Background/Shell opacity scale (for glass morphism + overlays) */ --bg-primary-opaque-80: rgba(9, 13, 31, 0.8); --bg-primary-opaque-96: rgba(9, 13, 31, 0.96); --bg-primary-opaque-98: rgba(9, 13, 31, 0.98); --bg-secondary-screen-78: rgba(16, 20, 48, 0.78); --bg-secondary-screen-80: rgba(10, 14, 34, 0.8); --bg-tertiary-screen-92: rgba(21, 28, 62, 0.92); /* Gold full opacity scale (for background effects) */ --gold-alpha-24: rgba(201, 168, 76, 0.24); --gold-alpha-32: rgba(201, 168, 76, 0.32); --gold-alpha-40: rgba(201, 168, 76, 0.4); --gold-alpha-60: rgba(201, 168, 76, 0.6); --gold-alpha-80: rgba(201, 168, 76, 0.8); /* Rose/Mauve opacity (feminine variants) */ --rose-alpha-08: rgba(212, 165, 165, 0.08); --rose-alpha-12: rgba(212, 165, 165, 0.12); /* Migrated hardcoded colors */ --color-green-bright: #4fc8a0; --color-text-fallback: #eceaf4; --color-bg-fallback: #111d38; --color-white-hardcoded: #ffffff; --mauve-alpha-12: rgba(201, 168, 184, 0.12); /* ═══════════════════════════════════════════════════════════ COMPONENT TOKENS ══════════════════════════════════════════════════════════ */ /* Forms */ --input-height-sm: 2rem; --input-height-md: 2.5rem; --input-height-lg: 3rem; --input-padding-x: var(--space-3); --input-padding-y: var(--space-2); /* Buttons */ --button-height-sm: 2rem; --button-height-md: 2.5rem; --button-height-lg: 3rem; /* Touch Targets (WCAG AA minimum) */ --touch-target-min: 44px; /* Header */ --header-height: 60px; /* Cards */ --card-padding: var(--space-6); --card-radius: var(--radius-lg); /* Mobile Layout */ --mobile-padding: var(--space-4); /* 16px */ --mobile-header-height: 56px; --mobile-nav-height: 64px; /* Sidebar */ --sidebar-width: 240px; --sidebar-collapsed-width: 64px; /* Modals */ --modal-sm: 360px; --modal-md: 480px; --modal-lg: 720px; /* ── Atmosphere base tokens (single source of truth — moved from components.css) */ --atm-accent: var(--gold, var(--color-gold-500)); --atm-accent-2: var(--color-blue-atelier); --atm-accent-3: var(--color-pink-atelier); --atm-accent-soft: rgba(201, 168, 76, 0.2); --atm-accent-strong: rgba(201, 168, 76, 0.5); --atm-ink: rgba(224, 214, 193, 0.16); --atm-text-strong: var(--color-text-warm-strong); --atm-text-body: var(--color-text-warm-body); --atm-text-soft: var(--color-text-warm-soft); --atm-text-faint: var(--color-text-warm-faint); --atm-title-font: var(--font-serif, "Georgia", "Iowan Old Style", "Palatino Linotype", serif); --atm-shell: rgba(10, 14, 34, 0.8); --atm-shell-strong: rgba(9, 14, 32, 0.985); --atm-panel: rgba(16, 20, 48, 0.78); --atm-panel-elevated: rgba(21, 28, 62, 0.92); --atm-panel-solid: rgba(9, 13, 31, 0.96); } /* Migration aliases: PS Shell token aliases pointing at current Atmosphere tokens. These aliases allow incremental migration from `--atm-*` variables to `--ps-shell-*` variables without changing runtime behaviour. Create small follow-up PRs to replace usages of `--atm-*` with `--ps-shell-*` where safe. */ :root { /* PS Shell aliases (safe no-op until referenced) */ --ps-shell-panel: var(--atm-panel, var(--bg3)); --ps-shell-panel-strong: var(--atm-panel-elevated, var(--bg3)); --ps-shell-panel-solid: var(--atm-panel-solid, rgba(9, 13, 31, 0.96)); --ps-shell-border: var(--atm-accent, var(--color-gold-500)); --ps-shell-text-body: var(--atm-text-body, var(--text)); --ps-shell-text-strong: var(--atm-text-strong, var(--text)); --ps-shell-text-soft: var(--atm-text-soft, var(--text-soft)); --ps-shell-text-faint: var(--atm-text-faint, var(--text-faint)); --ps-route-accent: var(--atm-accent, var(--color-gold-500)); --ps-route-secondary: var(--atm-accent-3, #f89fd0); --ps-shell-accent: var(--atm-accent, var(--color-gold-500)); --ps-shell-accent-2: var(--atm-accent-2, var(--accent-bright)); --ps-shell-accent-3: var(--atm-accent-3, #f89fd0); --ps-shell-accent-soft: var(--atm-accent-soft, rgba(201, 168, 76, 0.2)); --ps-shell-accent-strong: var(--atm-accent-strong, rgba(201, 168, 76, 0.5)); --ps-shell-ink: var(--atm-ink, rgba(224, 214, 193, 0.16)); --ps-shell-bg: var(--atm-shell, rgba(10, 14, 34, 0.8)); --ps-shell-bg-strong: var(--atm-shell-strong, rgba(9, 14, 32, 0.985)); } /* ═══════════════════════════════════════════════════════════ LIGHT THEME — warm celestial parchment Activated by: data-theme="light" on (JS toggle + localStorage) OR: system prefers-color-scheme: light (when no manual override) ══════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: dark; --bg-primary: #0a0a0a; --bg-secondary: #1c1c1e; --bg-tertiary: #2c2c2e; --bg-elevated: rgba(44, 44, 46, 0.95); --bg-overlay: rgba(0, 0, 0, 0.8); --border-subtle: #3a3a3f; --border-default: var(--color-neutral-800); --border-emphasis: var(--color-gold-600); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.85); --text-tertiary: rgba(255, 255, 255, 0.55); --text-inverse: var(--color-neutral-950); --text-link: var(--color-gold-400); --text-link-hover: var(--color-gold-300); --interactive-secondary: var(--color-neutral-850); --interactive-secondary-hover: var(--color-neutral-800); --interactive-secondary-active: var(--color-neutral-700); /* Shorthand overrides — white/gold/silver on dark */ --bg: #05091a; --bg2: #0b1226; --bg3: #111d38; --border: #1d2f52; --text: #f0eff5; --text-dim: #d8d5e8; --text-muted:#b3aec8; --accent: #5b8af0; --shadow: 0 4px 24px rgba(0,0,0,0.5); } /* System preference — site is dark-by-design; white/gold/silver text always */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: dark; } } /* NOTE: A third @media(prefers-color-scheme:light){:root{}} block that used color-white/color-snow values was removed here (P0-002). It had equal specificity to html[data-theme='light'] but loaded last, silently overriding the parchment theme with Apple white on system-light devices. The two blocks above (html[data-theme] + :root:not([data-theme])) cover all correct cases. */ /* ═══════════════════════════════════════════════════════════ UTILITIES — Common Patterns ══════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .focus-visible-outline { outline: 2px solid var(--border-focus); outline-offset: 2px; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; }