/* * R³ Design Tokens — Combined Dark + Light * ========================================== * Use with data-theme="dark" or data-theme="light" on * Default: dark mode */ /* ═══ DARK MODE (default) ═══ */ :root, [data-theme="dark"] { --r3-bg-deep: #060910; --r3-bg: #0B0F18; --r3-bg-elevated: #111A24; --r3-bg-surface: #1A2530; --r3-bg-hover: #1F2D3A; --r3-border: #243040; --r3-border-subtle: #1A2535; --r3-border-strong: #304050; --r3-border-focus: rgba(46, 255, 184, 0.5); --r3-text-primary: #F0F6FC; --r3-text-secondary: #B0C4D8; --r3-text-tertiary: #7A94AC; --r3-text-ghost: #4A6275; --r3-mint: #2EFFB8; --r3-mint-bright: #5CFFD0; --r3-mint-hover: #6AFFD8; --r3-mint-dim: #1a9970; --r3-mint-muted: rgba(46, 255, 184, 0.12); --r3-mint-glow: rgba(46, 255, 184, 0.35); --r3-mint-glow-lg: rgba(46, 255, 184, 0.18); --r3-mint-text: #060910; --r3-success: #2EFFB8; --r3-warning: #FFB833; --r3-error: #FF5A75; --r3-info: #6CB4FF; --r3-purple: #B49EFF; --r3-gradient-panel: linear-gradient(135deg, rgba(17,26,36,0.92), rgba(11,15,24,0.96)); --r3-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(46,255,184,0.08) 0%, transparent 60%); --r3-shadow-card: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(46,255,184,0.08); --r3-shadow-mint: 0 0 20px rgba(46,255,184,0.15), 0 0 4px rgba(46,255,184,0.1); --r3-input-bg: rgba(6,9,16,0.7); --r3-bar-bg: rgba(8,12,20,0.96); --r3-logo-fill: #FFFFFF; --r3-logo-accent: #2EFFB8; } /* ═══ LIGHT MODE ═══ */ [data-theme="light"] { --r3-bg-deep: #F4F3EF; --r3-bg: #F9F8F5; --r3-bg-elevated: #FFFFFF; --r3-bg-surface: #EEEDEA; --r3-bg-hover: #EBEAE5; --r3-border: #D8D5CC; --r3-border-subtle: #E8E5DC; --r3-border-strong: #C4C0B5; --r3-border-focus: rgba(11, 94, 66, 0.4); --r3-text-primary: #111111; --r3-text-secondary: #3A3A38; --r3-text-tertiary: #6B6B68; --r3-text-ghost: #A0A09C; --r3-mint: #0B5E42; --r3-mint-bright: #0F7D57; --r3-mint-hover: #0F7D57; --r3-mint-dim: #084D35; --r3-mint-muted: rgba(13, 107, 74, 0.07); --r3-mint-glow: rgba(13, 107, 74, 0.15); --r3-mint-glow-lg: rgba(13, 107, 74, 0.08); --r3-mint-text: #FFFFFF; --r3-success: #0D6B4A; --r3-warning: #9C6D00; --r3-error: #B82D3E; --r3-info: #1D5EA8; --r3-purple: #5B3FB5; --r3-gradient-panel: #FFFFFF; --r3-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(13,107,74,0.04) 0%, transparent 60%); --r3-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03); --r3-shadow-mint: 0 0 16px rgba(11,94,66,0.06); --r3-input-bg: #FFFFFF; --r3-bar-bg: rgba(17,17,17,0.97); --r3-logo-fill: #111111; --r3-logo-accent: #0B5E42; } /* ═══ SHARED TOKENS ═══ */ :root { --r3-font-hebrew: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r3-font-english: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r3-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --r3-font-brand: 'R3', 'Inter', -apple-system, sans-serif; --r3-radius-sm: 4px; --r3-radius: 6px; --r3-radius-md: 8px; --r3-radius-lg: 12px; --r3-radius-xl: 16px; --r3-radius-2xl: 20px; --r3-ease: cubic-bezier(0.16, 1, 0.3, 1); --r3-duration-fast: 180ms; --r3-duration-normal: 250ms; --r3-duration-slow: 300ms; }