/* * PAJ Kids Admin — design tokens as CSS custom properties. * * Light is the base. Dark applies automatically via prefers-color-scheme and can * be forced either way with / . * * Usage: background: var(--paj-card); border-radius: var(--paj-radius); */ :root { /* Shape & type */ --paj-radius: 8px; --paj-radius-sm: 4px; --paj-radius-lg: 16px; --paj-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Brand — same in both modes */ --paj-primary: #F05123; --paj-primary-shade: #EB4800; --paj-primary-tint: #F58E49; /* Backgrounds & surfaces */ --paj-background: #F0F5FA; --paj-secondary: #EEEEEE; --paj-tertiary: #777777; --paj-light: #F4F5F8; --paj-surface: #F8F9FA; /* Text */ --paj-dark: #222428; --paj-medium: #858585; /* Status */ --paj-success: #2DD36F; --paj-warning: #FFC409; --paj-danger: #EB445A; /* Feature accents */ --paj-purple: #A578FF; --paj-cyan: #26CCFF; --paj-green: #56C8A3; /* UI helpers */ --paj-border: #E8E8E8; --paj-input-bg: #F8F9FA; --paj-placeholder: #AAAAAA; --paj-white: #FFFFFF; --paj-black: #000000; /* Glass */ --paj-glass: rgba(255,255,255,0.4); --paj-glass-border: rgba(255,255,255,0.6); --paj-overlay: rgba(0,0,0,0.2); --paj-glass-fallback: rgba(255,255,255,0.95); --paj-glass-tint: rgba(0,0,0,0.03); --paj-glow-border: rgba(255,255,255,0.70); --paj-glow-shadow: rgba(255,255,255,0.50); /* Cards */ --paj-card: #FFFFFF; --paj-card-border: #F0F0F0; /* Subtle overlays — one place to change tint strength app-wide */ --paj-subtle1: rgba(0,0,0,0.02); --paj-subtle2: rgba(0,0,0,0.04); --paj-subtle3: rgba(0,0,0,0.06); --paj-subtle4: rgba(0,0,0,0.08); --paj-subtle5: rgba(0,0,0,0.12); --paj-subtle6: rgba(0,0,0,0.15); /* Avatar border in stacked rows */ --paj-avatar-border: rgba(255,255,255,0.9); /* Inactive icon/text in overlays */ --paj-inactive: rgba(0,0,0,0.4); /* Accent tint backgrounds */ --paj-primary-bg: #FDE8E2; --paj-primary-bg-subtle: rgba(240,81,35,0.06); --paj-danger-bg: #FFF3F3; --paj-danger-border: #FFD6D6; --paj-success-bg: #E6F9ED; --paj-info-bg: #E8F0FE; --paj-info-border: #D0E2FF; --paj-warning-bg: #FFF8E1; --paj-warning-border: #FFE082; /* Modal / sheet container */ --paj-modal-bg: #FFFFFF; --paj-modal-fallback: rgba(255,255,255,0.90); --paj-grabber: rgba(0,0,0,0.15); --paj-bubble-bg: #FFFFFF; /* Notification toast */ --paj-notif-pill-bg: #F2F2F7; --paj-notif-title: #222428; --paj-notif-body: rgba(0,0,0,0.5); /* Chat */ --paj-chat-bubble-theirs: #F0F0F5; /* Splash / error boundary */ --paj-splash-bg: #1A2235; --paj-splash-text: #FFFFFF; --paj-splash-subtext: rgba(255,255,255,0.7); /* Misc surfaces */ --paj-name-overlay-bg: #F2F2F7; --paj-signal-card-bg: #FFFFFF; --paj-signal-card-title: #1C1C1E; --paj-trip-badge-bg: rgba(255,255,255,0.9); /* Decorative mini-map illustration */ --paj-map-bg: #F0EDE8; --paj-map-road: #FFFFFF; --paj-map-block: #E8F0E8; /* Switch / toggle */ --paj-switch-track: #E0E0E0; --paj-switch-thumb: #FFFFFF; --paj-toggle-bg: #E5E5EA; --paj-toggle-knob: #FFFFFF; /* Accent text in info/tip cards */ --paj-info-accent: #C44A1A; --paj-success-accent: #2E7D32; /* Dialog preview */ --paj-dialog-bg: #FFFFFF; --paj-dialog-bar-bg: #F2F2F7; --paj-icon-muted: #C7C7CC; } /* Follow the OS unless the page explicitly asks for light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* Brand — same in both modes */ --paj-primary: #F05123; --paj-primary-shade: #EB4800; --paj-primary-tint: #F58E49; /* Backgrounds & surfaces */ --paj-background: #0A0F1E; --paj-secondary: #141C2E; --paj-tertiary: #636366; --paj-light: #141C2E; --paj-surface: #1A2540; /* Text */ --paj-dark: #FFFFFF; --paj-medium: #8E8E93; /* Status */ --paj-success: #30D158; --paj-warning: #FFD60A; --paj-danger: #FF453A; /* Feature accents */ --paj-purple: #BF5AF2; --paj-cyan: #64D2FF; --paj-green: #63E6BE; /* UI helpers */ --paj-border: rgba(255,255,255,0.08); --paj-input-bg: #1A2540; --paj-placeholder: #636366; --paj-white: #FFFFFF; --paj-black: #000000; /* Glass */ --paj-glass: rgba(10,15,30,0.88); --paj-glass-border: rgba(255,255,255,0.08); --paj-overlay: rgba(0,0,0,0.5); --paj-glass-fallback: rgba(28,28,30,0.92); --paj-glass-tint: rgba(255,255,255,0.05); --paj-glow-border: rgba(255,255,255,0.25); --paj-glow-shadow: rgba(255,255,255,0.15); /* Cards */ --paj-card: rgba(30,40,60,0.6); --paj-card-border: rgba(255,255,255,0.06); /* Subtle overlays — one place to change tint strength app-wide */ --paj-subtle1: rgba(255,255,255,0.04); --paj-subtle2: rgba(255,255,255,0.06); --paj-subtle3: rgba(255,255,255,0.08); --paj-subtle4: rgba(255,255,255,0.10); --paj-subtle5: rgba(255,255,255,0.12); --paj-subtle6: rgba(255,255,255,0.20); /* Avatar border in stacked rows */ --paj-avatar-border: rgba(28,28,30,0.9); /* Inactive icon/text in overlays */ --paj-inactive: rgba(255,255,255,0.5); /* Accent tint backgrounds */ --paj-primary-bg: rgba(240,81,35,0.12); --paj-primary-bg-subtle: rgba(240,81,35,0.08); --paj-danger-bg: rgba(235,68,90,0.1); --paj-danger-border: rgba(235,68,90,0.2); --paj-success-bg: rgba(45,211,111,0.1); --paj-info-bg: rgba(74,144,217,0.10); --paj-info-border: rgba(74,144,217,0.20); --paj-warning-bg: rgba(255,214,10,0.12); --paj-warning-border: rgba(255,214,10,0.3); /* Modal / sheet container */ --paj-modal-bg: rgba(20,25,40,0.95); --paj-modal-fallback: rgba(10,15,30,0.90); --paj-grabber: rgba(255,255,255,0.3); --paj-bubble-bg: rgba(30,40,60,0.9); /* Notification toast */ --paj-notif-pill-bg: #1C1C1E; --paj-notif-title: #FFFFFF; --paj-notif-body: rgba(255,255,255,0.7); /* Chat */ --paj-chat-bubble-theirs: rgba(255,255,255,0.10); /* Splash / error boundary */ --paj-splash-bg: #1A2235; --paj-splash-text: #FFFFFF; --paj-splash-subtext: rgba(255,255,255,0.7); /* Misc surfaces */ --paj-name-overlay-bg: #1A1F2E; --paj-signal-card-bg: #1C1C1E; --paj-signal-card-title: #FFFFFF; --paj-trip-badge-bg: rgba(0,0,0,0.6); /* Decorative mini-map illustration */ --paj-map-bg: #151A2E; --paj-map-road: #1E2740; --paj-map-block: #1A2240; /* Switch / toggle */ --paj-switch-track: #333333; --paj-switch-thumb: #666666; --paj-toggle-bg: #3A3A3C; --paj-toggle-knob: #636366; /* Accent text in info/tip cards */ --paj-info-accent: #FFB067; --paj-success-accent: #81C784; /* Dialog preview */ --paj-dialog-bg: #1C1C1E; --paj-dialog-bar-bg: #2C2C2E; --paj-icon-muted: #636366; } } /* Explicit override — wins in both directions. */ :root[data-theme='dark'] { /* Brand — same in both modes */ --paj-primary: #F05123; --paj-primary-shade: #EB4800; --paj-primary-tint: #F58E49; /* Backgrounds & surfaces */ --paj-background: #0A0F1E; --paj-secondary: #141C2E; --paj-tertiary: #636366; --paj-light: #141C2E; --paj-surface: #1A2540; /* Text */ --paj-dark: #FFFFFF; --paj-medium: #8E8E93; /* Status */ --paj-success: #30D158; --paj-warning: #FFD60A; --paj-danger: #FF453A; /* Feature accents */ --paj-purple: #BF5AF2; --paj-cyan: #64D2FF; --paj-green: #63E6BE; /* UI helpers */ --paj-border: rgba(255,255,255,0.08); --paj-input-bg: #1A2540; --paj-placeholder: #636366; --paj-white: #FFFFFF; --paj-black: #000000; /* Glass */ --paj-glass: rgba(10,15,30,0.88); --paj-glass-border: rgba(255,255,255,0.08); --paj-overlay: rgba(0,0,0,0.5); --paj-glass-fallback: rgba(28,28,30,0.92); --paj-glass-tint: rgba(255,255,255,0.05); --paj-glow-border: rgba(255,255,255,0.25); --paj-glow-shadow: rgba(255,255,255,0.15); /* Cards */ --paj-card: rgba(30,40,60,0.6); --paj-card-border: rgba(255,255,255,0.06); /* Subtle overlays — one place to change tint strength app-wide */ --paj-subtle1: rgba(255,255,255,0.04); --paj-subtle2: rgba(255,255,255,0.06); --paj-subtle3: rgba(255,255,255,0.08); --paj-subtle4: rgba(255,255,255,0.10); --paj-subtle5: rgba(255,255,255,0.12); --paj-subtle6: rgba(255,255,255,0.20); /* Avatar border in stacked rows */ --paj-avatar-border: rgba(28,28,30,0.9); /* Inactive icon/text in overlays */ --paj-inactive: rgba(255,255,255,0.5); /* Accent tint backgrounds */ --paj-primary-bg: rgba(240,81,35,0.12); --paj-primary-bg-subtle: rgba(240,81,35,0.08); --paj-danger-bg: rgba(235,68,90,0.1); --paj-danger-border: rgba(235,68,90,0.2); --paj-success-bg: rgba(45,211,111,0.1); --paj-info-bg: rgba(74,144,217,0.10); --paj-info-border: rgba(74,144,217,0.20); --paj-warning-bg: rgba(255,214,10,0.12); --paj-warning-border: rgba(255,214,10,0.3); /* Modal / sheet container */ --paj-modal-bg: rgba(20,25,40,0.95); --paj-modal-fallback: rgba(10,15,30,0.90); --paj-grabber: rgba(255,255,255,0.3); --paj-bubble-bg: rgba(30,40,60,0.9); /* Notification toast */ --paj-notif-pill-bg: #1C1C1E; --paj-notif-title: #FFFFFF; --paj-notif-body: rgba(255,255,255,0.7); /* Chat */ --paj-chat-bubble-theirs: rgba(255,255,255,0.10); /* Splash / error boundary */ --paj-splash-bg: #1A2235; --paj-splash-text: #FFFFFF; --paj-splash-subtext: rgba(255,255,255,0.7); /* Misc surfaces */ --paj-name-overlay-bg: #1A1F2E; --paj-signal-card-bg: #1C1C1E; --paj-signal-card-title: #FFFFFF; --paj-trip-badge-bg: rgba(0,0,0,0.6); /* Decorative mini-map illustration */ --paj-map-bg: #151A2E; --paj-map-road: #1E2740; --paj-map-block: #1A2240; /* Switch / toggle */ --paj-switch-track: #333333; --paj-switch-thumb: #666666; --paj-toggle-bg: #3A3A3C; --paj-toggle-knob: #636366; /* Accent text in info/tip cards */ --paj-info-accent: #FFB067; --paj-success-accent: #81C784; /* Dialog preview */ --paj-dialog-bg: #1C1C1E; --paj-dialog-bar-bg: #2C2C2E; --paj-icon-muted: #636366; } body { background-color: var(--paj-background); color: var(--paj-dark); font-family: var(--paj-font-family); }