malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): theme harmonization and semantic tokens
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2026-01-01 19:05:26 -08:00
parent 6bdabb0e60
commit 6d957f1c92
5 changed files with 90 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/components/layout-editor/LayoutEditor.tsx
View file

@ -206,44 +206,50 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
{/* Selected Slot Panel */} {/* Selected Slot Panel */}
{selectedSlot && ( {selectedSlot && (
// Panel container - kept existing glassmorphism but ensured semantic borders
<div className="w-80 border-l border-border bg-card/80 backdrop-blur-xl p-6 absolute right-0 top-0 bottom-0 shadow-2xl z-10 transition-transform animate-in slide-in-from-right"> <div className="w-80 border-l border-border bg-card/80 backdrop-blur-xl p-6 absolute right-0 top-0 bottom-0 shadow-2xl z-10 transition-transform animate-in slide-in-from-right">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-display font-semibold text-foreground">Slot Details</h3> <h3 className="text-lg font-display font-semibold text-foreground">Slot Details</h3>
<button <button
onClick={() => setSelectedSlot(null)} onClick={() => setSelectedSlot(null)}
className="text-slate-400 hover:text-white" className="text-muted-foreground hover:text-foreground transition-colors p-1 hover:bg-secondary rounded"
> >
✕ ✕
</button> </button>
</div> </div>
<div className="space-y-3 text-sm"> <div className="space-y-4 text-sm">
<div> <div className="grid grid-cols-[80px_1fr] items-center">
<span className="text-slate-400">Position:</span> <span className="text-muted-foreground">Position:</span>
<span className="ml-2 text-white">R{selectedSlot.row} C{selectedSlot.column}</span> <span className="text-foreground font-mono bg-secondary/50 px-2 py-0.5 rounded w-fit">R{selectedSlot.row} C{selectedSlot.column}</span>
</div> </div>
<div> <div className="grid grid-cols-[80px_1fr] items-center">
<span className="text-slate-400">Status:</span> <span className="text-muted-foreground">Status:</span>
<span className={cn( <span className={cn(
'ml-2', 'px-2 py-0.5 rounded font-medium text-xs w-fit',
selectedSlot.status === 'OCCUPIED' && 'text-emerald-400', selectedSlot.status === 'OCCUPIED' && 'bg-primary/10 text-primary border border-primary/20',
selectedSlot.status === 'EMPTY' && 'text-slate-400', selectedSlot.status === 'EMPTY' && 'bg-secondary text-muted-foreground border border-border',
selectedSlot.status === 'DAMAGED' && 'text-red-400', selectedSlot.status === 'DAMAGED' && 'bg-destructive/10 text-destructive border border-destructive/20',
selectedSlot.status === 'RESERVED' && 'text-yellow-400', selectedSlot.status === 'RESERVED' && 'bg-warning/10 text-warning border border-warning/20',
)}> )}>
{selectedSlot.status} {selectedSlot.status}
</span> </span>
</div> </div>
{selectedSlot.plantType && ( {selectedSlot.plantType && (
<> <>
<div> <div className="grid grid-cols-[80px_1fr] items-start pt-2 border-t border-border mt-2">
<span className="text-slate-400">Plant:</span> <span className="text-muted-foreground mt-0.5">Plant:</span>
<span className="ml-2 text-white">{selectedSlot.plantType.name}</span> <div>
<span className="text-foreground font-medium block">{selectedSlot.plantType.name}</span>
{selectedSlot.plantType.strain && (
<span className="text-xs text-muted-foreground">{selectedSlot.plantType.strain}</span>
)}
</div>
</div> </div>
{selectedSlot.tagNumber && ( {selectedSlot.tagNumber && (
<div> <div className="grid grid-cols-[80px_1fr] items-center">
<span className="text-slate-400">Tag:</span> <span className="text-muted-foreground">Tag:</span>
<span className="ml-2 text-white font-mono">{selectedSlot.tagNumber}</span> <span className="text-foreground font-mono text-xs border border-border px-1.5 py-0.5 rounded bg-background">{selectedSlot.tagNumber}</span>
</div> </div>
)} )}
</> </>
@ -251,18 +257,18 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="mt-6 space-y-2"> <div className="mt-8 space-y-3">
{selectedSlot.status === 'EMPTY' && ( {selectedSlot.status === 'EMPTY' && (
<button className="w-full px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-sm rounded transition-colors"> <button className="w-full px-3 py-2.5 bg-primary hover:bg-primary-hover text-primary-foreground font-medium text-sm rounded-lg shadow-sm transition-all hover:shadow-md active:scale-95">
Place Plant Place Plant
</button> </button>
)} )}
{selectedSlot.status === 'OCCUPIED' && ( {selectedSlot.status === 'OCCUPIED' && (
<> <>
<button className="w-full px-3 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm rounded transition-colors"> <button className="w-full px-3 py-2 bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-strong text-sm rounded-lg transition-colors">
Move Plant Move Plant
</button> </button>
<button className="w-full px-3 py-2 bg-red-600 hover:bg-red-500 text-white text-sm rounded transition-colors"> <button className="w-full px-3 py-2 bg-destructive/10 hover:bg-destructive/20 text-destructive hover:text-destructive-foreground border border-destructive/20 hover:border-destructive/30 text-sm rounded-lg transition-all">
Remove Plant Remove Plant
</button> </button>
</> </>

54
frontend/src/components/layout-editor/RackConfigModal.tsx
View file

@ -70,13 +70,13 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
<div className="absolute inset-0 bg-black/60" onClick={onClose} /> <div className="absolute inset-0 bg-black/60" onClick={onClose} />
{/* Modal */} {/* Modal */}
<div className="relative bg-slate-800 rounded-xl shadow-2xl w-full max-w-lg mx-4 border border-slate-600"> <div className="relative bg-card rounded-xl shadow-2xl w-full max-w-lg mx-4 border border-border animate-in scale-in">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-700"> <div className="flex items-center justify-between px-6 py-4 border-b border-border">
<h2 className="text-lg font-semibold text-white">Configure Section</h2> <h2 className="text-lg font-semibold text-foreground">Configure Section</h2>
<button <button
onClick={onClose} onClick={onClose}
className="text-slate-400 hover:text-white transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
> >
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
@ -87,22 +87,22 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
{/* Name & Code */} {/* Name & Code */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-1">Name</label> <label className="block text-sm font-medium text-foreground mb-1">Name</label>
<input <input
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white focus:outline-none focus:border-emerald-500" className="w-full px-3 py-2 bg-secondary/50 border border-input rounded text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-sans"
placeholder="e.g., Table 1" placeholder="e.g., Table 1"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-1">Code</label> <label className="block text-sm font-medium text-foreground mb-1">Code</label>
<input <input
type="text" type="text"
value={code} value={code}
onChange={(e) => setCode(e.target.value)} onChange={(e) => setCode(e.target.value)}
className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white focus:outline-none focus:border-emerald-500" className="w-full px-3 py-2 bg-secondary/50 border border-input rounded text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-mono"
placeholder="e.g., T1" placeholder="e.g., T1"
/> />
</div> </div>
@ -110,7 +110,7 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
{/* Section Type */} {/* Section Type */}
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-2">Section Type</label> <label className="block text-sm font-medium text-foreground mb-2">Section Type</label>
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-5 gap-2">
{SUBTYPE_OPTIONS.map((opt) => ( {SUBTYPE_OPTIONS.map((opt) => (
<button <button
@ -119,8 +119,8 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
className={cn( className={cn(
'flex flex-col items-center p-2 rounded border transition-colors', 'flex flex-col items-center p-2 rounded border transition-colors',
subtype === opt.value subtype === opt.value
? 'border-emerald-500 bg-emerald-900/30 text-emerald-400' ? 'border-primary bg-primary/10 text-primary'
: 'border-slate-600 bg-slate-700 text-slate-300 hover:border-slate-500' : 'border-border bg-secondary/30 text-muted-foreground hover:border-border-strong hover:text-foreground'
)} )}
title={opt.desc} title={opt.desc}
> >
@ -133,50 +133,50 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
{/* Dimensions */} {/* Dimensions */}
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-2">Dimensions</label> <label className="block text-sm font-medium text-foreground mb-2">Dimensions</label>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div> <div>
<label className="block text-xs text-slate-400 mb-1">Rows</label> <label className="block text-xs text-muted-foreground mb-1">Rows</label>
<input <input
type="number" type="number"
value={rows} value={rows}
onChange={(e) => setRows(Math.max(1, Math.min(50, parseInt(e.target.value) || 1)))} onChange={(e) => setRows(Math.max(1, Math.min(50, parseInt(e.target.value) || 1)))}
min={1} min={1}
max={50} max={50}
className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white text-center focus:outline-none focus:border-emerald-500" className="w-full px-3 py-2 bg-secondary/50 border border-input rounded text-foreground text-center focus:outline-none focus:border-primary font-mono"
/> />
</div> </div>
<div> <div>
<label className="block text-xs text-slate-400 mb-1">Columns</label> <label className="block text-xs text-muted-foreground mb-1">Columns</label>
<input <input
type="number" type="number"
value={columns} value={columns}
onChange={(e) => setColumns(Math.max(1, Math.min(50, parseInt(e.target.value) || 1)))} onChange={(e) => setColumns(Math.max(1, Math.min(50, parseInt(e.target.value) || 1)))}
min={1} min={1}
max={50} max={50}
className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white text-center focus:outline-none focus:border-emerald-500" className="w-full px-3 py-2 bg-secondary/50 border border-input rounded text-foreground text-center focus:outline-none focus:border-primary font-mono"
/> />
</div> </div>
<div> <div>
<label className="block text-xs text-slate-400 mb-1">Tiers</label> <label className="block text-xs text-muted-foreground mb-1">Tiers</label>
<input <input
type="number" type="number"
value={tiers} value={tiers}
onChange={(e) => setTiers(Math.max(1, Math.min(10, parseInt(e.target.value) || 1)))} onChange={(e) => setTiers(Math.max(1, Math.min(10, parseInt(e.target.value) || 1)))}
min={1} min={1}
max={10} max={10}
className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white text-center focus:outline-none focus:border-emerald-500" className="w-full px-3 py-2 bg-secondary/50 border border-input rounded text-foreground text-center focus:outline-none focus:border-primary font-mono"
/> />
</div> </div>
</div> </div>
<p className="text-xs text-slate-500 mt-2"> <p className="text-xs text-muted-foreground mt-2">
Total positions: <span className="text-emerald-400 font-medium">{totalSlots}</span> Total positions: <span className="text-primary font-mono">{totalSlots}</span>
</p> </p>
</div> </div>
{/* Visual Preview */} {/* Visual Preview */}
<div className="bg-slate-900 rounded p-3"> <div className="bg-secondary/20 rounded p-4 border border-border/50">
<p className="text-xs text-slate-400 mb-2">Preview</p> <p className="text-xs text-muted-foreground mb-2">Preview</p>
<div <div
className="grid gap-1" className="grid gap-1"
style={{ style={{
@ -187,29 +187,29 @@ export function RackConfigModal({ rack, isOpen, onClose, onSave }: RackConfigMod
{Array.from({ length: Math.min(rows * columns, 50) }, (_, i) => ( {Array.from({ length: Math.min(rows * columns, 50) }, (_, i) => (
<div <div
key={i} key={i}
className="aspect-square bg-slate-700 border border-dashed border-slate-600 rounded" className="aspect-square bg-secondary border border-dashed border-border rounded-sm"
style={{ minWidth: '12px', minHeight: '12px' }} style={{ minWidth: '12px', minHeight: '12px' }}
/> />
))} ))}
</div> </div>
{rows * columns > 50 && ( {rows * columns > 50 && (
<p className="text-xs text-slate-500 mt-1">Showing first 50 slots</p> <p className="text-xs text-muted-foreground mt-1 italic">Showing first 50 slots</p>
)} )}
</div> </div>
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-3 px-6 py-4 border-t border-slate-700"> <div className="flex justify-end gap-3 px-6 py-4 border-t border-border bg-secondary/10">
<button <button
onClick={onClose} onClick={onClose}
className="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors" className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
Cancel Cancel
</button> </button>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving || !name.trim()} disabled={saving || !name.trim()}
className="px-4 py-2 text-sm bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded transition-colors" className="px-4 py-2 text-sm bg-primary hover:bg-primary-hover disabled:bg-primary/50 disabled:cursor-not-allowed text-primary-foreground rounded transition-colors font-medium shadow-sm hover:shadow-md"
> >
{saving ? 'Saving...' : 'Save Changes'} {saving ? 'Saving...' : 'Save Changes'}
</button> </button>

57
frontend/src/components/layout-editor/RackVisualizer.tsx
View file

@ -45,11 +45,11 @@ const TIER_TAB_HEIGHT = 24;
// Subtype visual styles // Subtype visual styles
const SUBTYPE_STYLES = { const SUBTYPE_STYLES = {
TABLE: { bg: 'bg-amber-900/20', border: 'border-amber-700', Icon: Table }, TABLE: { bg: 'bg-yellow-500/10', border: 'border-yellow-500/20', Icon: Table },
RACK: { bg: 'bg-slate-800/50', border: 'border-slate-600', Icon: Server }, RACK: { bg: 'bg-secondary/30', border: 'border-border', Icon: Server },
TRAY: { bg: 'bg-emerald-900/20', border: 'border-emerald-700', Icon: Box }, TRAY: { bg: 'bg-primary/10', border: 'border-primary/20', Icon: Box },
HANGER: { bg: 'bg-purple-900/20', border: 'border-purple-700', Icon: GripVertical }, HANGER: { bg: 'bg-purple-500/10', border: 'border-purple-500/20', Icon: GripVertical },
FLOOR: { bg: 'bg-stone-900/20', border: 'border-stone-600', Icon: Square }, FLOOR: { bg: 'bg-muted/50', border: 'border-border', Icon: Square },
}; };
export function RackVisualizer({ export function RackVisualizer({
@ -96,21 +96,21 @@ export function RackVisualizer({
return ( return (
<div className={cn('inline-block group', className)}> <div className={cn('inline-block group', className)}>
{/* Rack header */} {/* Rack header */}
<div className={cn('flex items-center gap-2 px-3 py-1.5 rounded-t-lg border-b-0', style.bg, style.border, 'border')}> <div className={cn('flex items-center gap-2 px-3 py-2 rounded-t-lg border-b-0 backdrop-blur-sm', style.bg, style.border, 'border')}>
<style.Icon className="w-5 h-5 text-slate-300" /> <style.Icon className="w-4 h-4 text-muted-foreground" />
<span className="text-sm font-medium text-white">{rack.name}</span> <span className="text-sm font-medium text-foreground">{rack.name}</span>
<span className="text-xs text-slate-400">({rack.code})</span> <span className="text-xs text-muted-foreground font-mono">({rack.code})</span>
<div className="ml-auto flex items-center gap-2"> <div className="ml-auto flex items-center gap-2">
{rack.tiers > 1 && ( {rack.tiers > 1 && (
<span className="text-xs text-slate-400">Tier {selectedTier}/{rack.tiers}</span> <span className="text-xs text-muted-foreground font-mono">T{selectedTier}/{rack.tiers}</span>
)} )}
{onConfigClick && ( {onConfigClick && (
<button <button
onClick={() => onConfigClick(rack)} onClick={() => onConfigClick(rack)}
className="opacity-0 group-hover:opacity-100 p-1 text-slate-400 hover:text-white hover:bg-slate-600 rounded transition-all" className="opacity-0 group-hover:opacity-100 p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-all"
title="Configure section" title="Configure section"
> >
<Settings className="w-4 h-4" /> <Settings className="w-3.5 h-3.5" />
</button> </button>
)} )}
</div> </div>
@ -118,15 +118,15 @@ export function RackVisualizer({
{/* Tier tabs (if multi-tier) */} {/* Tier tabs (if multi-tier) */}
{rack.tiers > 1 && ( {rack.tiers > 1 && (
<div className="flex border-l border-r" style={{ borderColor: style.border.replace('border-', '') }}> <div className="flex border-l border-r border-border" style={{ borderColor: style.border.replace('border-', '') }}>
{Array.from({ length: rack.tiers }, (_, i) => i + 1).map(tier => ( {Array.from({ length: rack.tiers }, (_, i) => i + 1).map(tier => (
<button <button
key={tier} key={tier}
className={cn( className={cn(
'flex-1 text-xs py-1 transition-colors', 'flex-1 text-[10px] py-1 transition-colors font-mono',
tier === selectedTier tier === selectedTier
? 'bg-emerald-600 text-white' ? 'bg-primary/20 text-primary font-bold'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700' : 'bg-secondary/50 text-muted-foreground hover:bg-secondary'
)} )}
> >
T{tier} T{tier}
@ -137,7 +137,7 @@ export function RackVisualizer({
{/* Grid */} {/* Grid */}
<div <div
className={cn('p-1 rounded-b-lg border', style.bg, style.border)} className={cn('p-1 rounded-b-lg border shadow-sm', style.bg, style.border)}
style={{ width: gridWidth + 8, minHeight: gridHeight + 8 }} style={{ width: gridWidth + 8, minHeight: gridHeight + 8 }}
> >
<div <div
@ -217,37 +217,36 @@ function PlantSlot({ slot, isHighlighted, onClick, onDrop }: PlantSlotProps) {
onDrop={handleDrop} onDrop={handleDrop}
className={cn( className={cn(
'rounded flex items-center justify-center cursor-pointer transition-all duration-150', 'rounded flex items-center justify-center cursor-pointer transition-all duration-150',
'border-2', 'border',
// Empty slot styles // Empty slot styles
slot.status === 'EMPTY' && !isDragOver && 'border-dashed border-slate-600 bg-slate-800/30 hover:border-slate-500', slot.status === 'EMPTY' && !isDragOver && 'border-dashed border-border/50 bg-card/20 hover:border-border hover:bg-card/40',
// Drag over state - highlight // Drag over state - highlight
isDragOver && 'border-solid border-emerald-400 bg-emerald-500/30 scale-105 shadow-lg shadow-emerald-500/20', isDragOver && 'border-solid border-primary bg-primary/20 scale-105 shadow-[0_0_10px_rgba(37,99,235,0.3)]',
// Occupied // Occupied
isOccupied && 'border-solid', isOccupied && 'border-solid border-transparent shadow-sm',
// Damaged // Damaged
isDamaged && 'border-red-500 bg-red-900/30', isDamaged && 'border-destructive bg-destructive/10',
// Reserved // Reserved
isReserved && 'border-yellow-500 bg-yellow-900/20 border-solid', isReserved && 'border-warning bg-warning/10 border-solid',
// Highlighted (searched) // Highlighted (searched)
isHighlighted && 'ring-2 ring-emerald-400 ring-offset-1 ring-offset-slate-900' isHighlighted && 'ring-2 ring-primary ring-offset-1 ring-offset-background'
)} )}
style={{ style={{
width: SLOT_SIZE, width: SLOT_SIZE,
height: SLOT_SIZE, height: SLOT_SIZE,
backgroundColor: isOccupied ? slot.plantType?.colour : undefined, backgroundColor: isOccupied ? slot.plantType?.colour : undefined,
borderColor: isOccupied ? slot.plantType?.colour : undefined,
}} }}
title={isOccupied ? `${slot.plantType?.name} (${slot.tagNumber || 'No tag'})` : `Empty - R${slot.row}C${slot.column}`} title={isOccupied ? `${slot.plantType?.name} (${slot.tagNumber || 'No tag'})` : `Empty - R${slot.row}C${slot.column}`}
> >
{isOccupied && ( {isOccupied && (
<span className="text-white text-xs font-bold drop-shadow-md"> <span className="text-white text-xs font-bold font-mono drop-shadow-md tracking-tighter">
{slot.plantType?.strain?.substring(0, 3) || '•'} {slot.plantType?.strain?.substring(0, 3) || '•'}
</span> </span>
)} )}
{isDamaged && <span className="text-red-400">✕</span>} {isDamaged && <span className="text-destructive">✕</span>}
{isReserved && <span className="text-yellow-400 text-xs">◆</span>} {isReserved && <span className="text-warning text-xs">◆</span>}
{isDragOver && !isOccupied && ( {isDragOver && !isOccupied && (
<span className="text-emerald-400 text-lg">+</span> <span className="text-primary text-lg animate-pulse">+</span>
)} )}
</div> </div>
); );

9
frontend/src/index.css
View file

@ -110,9 +110,12 @@
/* ===== DARK MODE (Fediversion Theme) ===== */ /* ===== DARK MODE (Fediversion Theme) ===== */
.dark { .dark {
/* Backgrounds - Zinc scale */ /* Backgrounds - Zinc scale */
--color-bg-primary: #09090b; /* zinc-950 */ --color-bg-primary: #09090b;
--color-bg-secondary: #18181b; /* zinc-900 */ /* zinc-950 */
--color-bg-tertiary: #27272a; /* zinc-800 */ --color-bg-secondary: #18181b;
/* zinc-900 */
--color-bg-tertiary: #27272a;
/* zinc-800 */
--color-bg-elevated: #18181b; --color-bg-elevated: #18181b;
/* Text - improved contrast */ /* Text - improved contrast */

2
frontend/tailwind.config.js
View file

@ -110,7 +110,7 @@ export default {
// Linear-inspired typography // Linear-inspired typography
fontFamily: { fontFamily: {
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
display: ['Space Grotesk', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'], display: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'], // Switched back to Inter per user request
mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'], mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'],
}, },
fontSize: { fontSize: {