/* ============================================
   FullArchNetwork — Shared Design Tokens
   Loaded by all 3 plugins (dashboard / clinics / find).
   Defines a consistent visual identity even if the
   active theme does not provide --fan-* variables.
   ============================================ */

:root {
    /* Brand */
    --fan-navy:        hsl(220, 60%, 15%);
    --fan-navy-deep:   hsl(220, 70%, 8%);
    --fan-teal:        hsl(212, 90%, 45%); /* v1.8.0: rebranded primary to blue */
    --fan-teal-light:  hsl(212, 90%, 95%);
    --fan-gold:        hsl(38, 92%, 50%);

    /* Surfaces */
    --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-input:             hsl(220, 16%, 88%);
    --fan-ring:              hsl(168, 76%, 36%);
    --fan-primary:           hsl(220, 60%, 15%);
    --fan-primary-foreground: #ffffff;

    /* Typography (system fallbacks if Google Fonts unavailable) */
    --fan-font-display: 'Oswald', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    --fan-font-body:    'Barlow', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

    /* Shadows */
    --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), 0 4px 6px hsl(220 30% 12% / 0.05);
    --fan-shadow-elevated:    0 25px 50px -12px hsl(220 30% 12% / 0.15);

    /* Radius */
    --fan-radius-sm: 6px;
    --fan-radius:    10px;
    --fan-radius-lg: 16px;
}

/* ── Universal Button (used across all 3 plugins) ── */
.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-family: var(--fan-font-body); font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: all 0.18s ease;
    line-height: 1; white-space: nowrap;
}
.fan-btn--primary  { background: var(--fan-teal); color: #fff; }
.fan-btn--primary:hover { background: hsl(212, 90%, 38%); transform: translateY(-1px); box-shadow: var(--fan-shadow-card-hover); color: #fff; }
.fan-btn--navy     { background: var(--fan-navy); color: #fff; }
.fan-btn--navy:hover { background: var(--fan-navy-deep); color: #fff; }
.fan-btn--gold     { background: var(--fan-gold); color: var(--fan-navy); }
.fan-btn--gold:hover { background: hsl(38, 92%, 45%); color: var(--fan-navy); }
.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); }
.fan-btn--ghost    { background: transparent; color: var(--fan-foreground); }
.fan-btn--ghost:hover { background: var(--fan-muted); }
.fan-btn--danger   { background: hsl(0, 78%, 50%); color: #fff; }
.fan-btn--danger:hover { background: hsl(0, 78%, 44%); color: #fff; }
.fan-btn--sm       { height: 34px; padding: 0 14px; font-size: 13px; }
.fan-btn--lg       { height: 52px; padding: 0 28px; font-size: 16px; }
.fan-btn[disabled], .fan-btn:disabled { opacity: 0.55; pointer-events: none; }