:root {
    --fan-navy:        hsl(220, 60%, 15%);
    --fan-navy-deep:   hsl(220, 70%, 8%);
    --fan-teal:        hsl(168, 76%, 36%);
    --fan-teal-light:  hsl(168, 76%, 95%);
    --fan-gold:        hsl(38, 92%, 50%);
    --fan-background:        hsl(220, 25%, 98%);
    --fan-foreground:        hsl(220, 30%, 12%);
    --fan-card:              #ffffff;
    --fan-secondary:         hsl(220, 20%, 96%);
    --fan-muted:             hsl(220, 16%, 92%);
    --fan-muted-foreground:  hsl(220, 10%, 45%);
    --fan-border:            hsl(220, 16%, 88%);
    --fan-primary:           hsl(220, 60%, 15%);
    --fan-primary-foreground: #ffffff;
    --fan-font-display: 'Oswald', 'Inter', system-ui, sans-serif;
    --fan-font-body:    'Barlow', 'Inter', system-ui, sans-serif;
    --fan-shadow-card:        0 1px 3px hsl(220 30% 12% / 0.06), 0 1px 2px hsl(220 30% 12% / 0.04);
    --fan-shadow-card-hover:  0 10px 25px -5px hsl(220 30% 12% / 0.10);
    --fan-radius-sm: 6px;
    --fan-radius:    10px;
    --fan-radius-lg: 16px;
}
.fan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--fan-radius-sm); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all 0.18s ease; }
.fan-btn--primary { background: var(--fan-teal); color: #fff; }
.fan-btn--primary:hover { background: hsl(168, 76%, 30%); color: #fff; }
.fan-btn--outline { background: transparent; border-color: var(--fan-border); color: var(--fan-foreground); }
.fan-btn--outline:hover { border-color: var(--fan-teal); color: var(--fan-teal); }