/* RacqTrack — "Hard court night" theme Dark is the default. Light is opt-in via [data-theme="light"] on . Every color the app uses must come from a variable in this file. */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces — 0 is the page, higher numbers step toward the viewer */ --rt-surface-0: #0F172A; --rt-surface-1: #1E293B; --rt-surface-2: #273449; --rt-surface-3: #33415A; /* Text */ --rt-text-primary: #F1F5F9; --rt-text-secondary: #94A3B8; --rt-text-muted: #78899E; --rt-text-disabled: #55637A; /* Borders */ --rt-border: #334155; --rt-border-strong: #475569; /* Primary — court blue. Interactive controls, links, focus. */ --rt-primary: #3B82F6; --rt-primary-hover: #60A5FA; --rt-primary-bg: #172D53; --rt-primary-text: #93C5FD; --rt-on-primary: #08142B; /* Accent — optic yellow. Reserved for the single most important thing on screen (active job, primary CTA). Never decorative. */ --rt-accent: #D9F02F; --rt-accent-hover: #E4F55C; --rt-accent-bg: #3A4308; --rt-accent-text: #CBE81A; --rt-on-accent: #2A3105; /* Job status pipeline — each pairs a tint (bg) with readable text */ --rt-st-received-bg: #2A3646; --rt-st-received-text: #CBD5E1; --rt-st-queued-bg: #2E2453; --rt-st-queued-text: #C4B5FD; --rt-st-progress-bg: #3A4308; --rt-st-progress-text: #D9F02F; --rt-st-ready-bg: #0D3320; --rt-st-ready-text: #6EE7A8; --rt-st-closed-bg: #232F42; --rt-st-closed-text: #8FA0B5; /* Semantic */ --rt-success-bg: #0D3320; --rt-success-text: #6EE7A8; --rt-success: #22C55E; --rt-warning-bg: #422C06; --rt-warning-text: #FCD34D; --rt-warning: #F59E0B; --rt-danger-bg: #40161A; --rt-danger-text: #FCA5A5; --rt-danger: #EF4444; --rt-info-bg: #172D53; --rt-info-text: #93C5FD; --rt-info: #3B82F6; --rt-focus-ring: 0 0 0 2px var(--rt-surface-0), 0 0 0 4px var(--rt-primary); --rt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); } :root[data-theme="light"] { color-scheme: light; --rt-surface-0: #F1F5F9; --rt-surface-1: #F8FAFC; --rt-surface-2: #FFFFFF; --rt-surface-3: #FFFFFF; --rt-text-primary: #0F172A; --rt-text-secondary: #475569; --rt-text-muted: #64748B; --rt-text-disabled: #94A3B8; --rt-border: #E2E8F0; --rt-border-strong: #CBD5E1; --rt-primary: #2563EB; --rt-primary-hover: #1D4ED8; --rt-primary-bg: #DBEAFE; --rt-primary-text: #1E40AF; --rt-on-primary: #FFFFFF; /* Optic yellow keeps its punch as a fill, but never carries text on light */ --rt-accent: #CBE81A; --rt-accent-hover: #B8D40F; --rt-accent-bg: #F2FAC4; --rt-accent-text: #55620A; --rt-on-accent: #2A3105; --rt-st-received-bg: #E2E8F0; --rt-st-received-text: #334155; --rt-st-queued-bg: #EDE9FE; --rt-st-queued-text: #5B21B6; --rt-st-progress-bg: #F2FAC4; --rt-st-progress-text: #55620A; --rt-st-ready-bg: #DCFCE7; --rt-st-ready-text: #166534; --rt-st-closed-bg: #F1F5F9; --rt-st-closed-text: #64748B; --rt-success-bg: #DCFCE7; --rt-success-text: #166534; --rt-success: #16A34A; --rt-warning-bg: #FEF3C7; --rt-warning-text: #92400E; --rt-warning: #D97706; --rt-danger-bg: #FEE2E2; --rt-danger-text: #991B1B; --rt-danger: #DC2626; --rt-info-bg: #DBEAFE; --rt-info-text: #1E40AF; --rt-info: #2563EB; --rt-focus-ring: 0 0 0 2px var(--rt-surface-0), 0 0 0 4px var(--rt-primary); --rt-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); } /* Follow the OS when the user has not chosen explicitly */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } /* Spacing, radius, type — density is tuned for dense job queues */ :root { --rt-radius-sm: 6px; --rt-radius: 8px; --rt-radius-lg: 12px; --rt-radius-pill: 999px; --rt-space-1: 4px; --rt-space-2: 8px; --rt-space-3: 12px; --rt-space-4: 16px; --rt-space-5: 24px; --rt-space-6: 32px; --rt-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --rt-text-xs: 12px; --rt-text-sm: 13px; --rt-text-base: 15px; --rt-text-lg: 18px; --rt-text-xl: 22px; --rt-h-control: 36px; } body { background: var(--rt-surface-0); color: var(--rt-text-primary); font-family: var(--rt-font-sans); font-size: var(--rt-text-base); line-height: 1.6; margin: 0; } /* Tensions, string gauges, serial numbers, and QR payloads are tabular data. Monospace with lining figures keeps columns aligned. */ .rt-num, .rt-tension, .rt-serial { font-family: var(--rt-font-mono); font-variant-numeric: tabular-nums lining-nums; } :where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: var(--rt-focus-ring); } /* Status chips — color is never the only signal. Each chip carries an icon and a text label so it survives grayscale, colorblindness, and printing. */ .rt-status { display: inline-flex; align-items: center; gap: var(--rt-space-1); padding: 3px 10px; border-radius: var(--rt-radius-pill); font-size: var(--rt-text-xs); white-space: nowrap; } .rt-status--received { background: var(--rt-st-received-bg); color: var(--rt-st-received-text); } .rt-status--queued { background: var(--rt-st-queued-bg); color: var(--rt-st-queued-text); } .rt-status--progress { background: var(--rt-st-progress-bg); color: var(--rt-st-progress-text); } .rt-status--ready { background: var(--rt-st-ready-bg); color: var(--rt-st-ready-text); } .rt-status--closed { background: var(--rt-st-closed-bg); color: var(--rt-st-closed-text); } .rt-status--overdue { background: var(--rt-danger-bg); color: var(--rt-danger-text); } /* Labels and QR tags print pure black on white regardless of active theme. Thermal label printers have no grayscale to give. */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { --rt-surface-0: #FFFFFF; --rt-surface-1: #FFFFFF; --rt-surface-2: #FFFFFF; --rt-text-primary: #000000; --rt-text-secondary: #000000; --rt-border: #000000; --rt-border-strong: #000000; } .rt-status { border: 1px solid #000; background: #FFF !important; color: #000 !important; } .rt-no-print { display: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }