/* ─── HoopSync — Design tokens & utilitaires partagés ────────────────── */
/* À inclure dans les pages avec : <link rel="stylesheet" href="hoopsync.css"> */

:root {
  /* Couleurs marque */
  --hs-blue: #1d4ed8;
  --hs-blue-dark: #1e40af;
  --hs-blue-deep: #1e3a8a;
  --hs-navy: #0f172a;
  --hs-blue-light: #EFF6FF;

  /* Texte */
  --hs-text: #0f172a;
  --hs-text-soft: #475569;
  --hs-text-muted: #64748B;
  --hs-text-faded: #94A3B8;

  /* Surfaces */
  --hs-bg: #F8FAFC;
  --hs-surface: #FFFFFF;
  --hs-border: #E2E8F0;
  --hs-border-soft: #F1F5F9;
  --hs-divider: #CBD5E1;

  /* Statut */
  --hs-success: #22C55E;
  --hs-success-bg: #F0FDF4;
  --hs-success-border: #BBF7D0;
  --hs-success-text: #166534;
  --hs-danger: #DC2626;
  --hs-danger-bg: #FEF2F2;
  --hs-danger-border: #FECACA;
  --hs-danger-text: #991B1B;
  --hs-warning: #F59E0B;

  /* Rayons */
  --hs-radius-sm: 8px;
  --hs-radius: 12px;
  --hs-radius-lg: 16px;
  --hs-radius-xl: 24px;

  /* Shadows */
  --hs-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --hs-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --hs-shadow-lg: 0 12px 40px rgba(29,78,216,0.12);

  /* Polices */
  --hs-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ─── Reset commun ────────────────────────────────────────────────── */
.hs-reset *, .hs-reset *::before, .hs-reset *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Boutons ─────────────────────────────────────────────────────── */
.hs-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--hs-blue); color: white;
  font-weight: 800; font-size: 14px; font-family: inherit;
  padding: 13px 20px; border: none; border-radius: var(--hs-radius);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.hs-btn-primary:hover { background: var(--hs-blue-dark); }
.hs-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.hs-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: white; color: var(--hs-text-soft);
  font-weight: 700; font-size: 14px; font-family: inherit;
  padding: 12px 18px; border: 1.5px solid var(--hs-border); border-radius: var(--hs-radius);
  cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.hs-btn-secondary:hover { background: var(--hs-bg); color: var(--hs-text-soft); }

.hs-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--hs-danger); color: white;
  font-weight: 800; font-size: 14px; font-family: inherit;
  padding: 12px 20px; border: none; border-radius: var(--hs-radius);
  cursor: pointer;
  transition: background 0.15s;
}
.hs-btn-danger:hover { background: #B91C1C; }

/* ─── Champs de formulaire ────────────────────────────────────────── */
.hs-input, .hs-select, .hs-textarea {
  width: 100%;
  border: 1.5px solid var(--hs-border); border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px; font-family: inherit;
  color: var(--hs-text); background: white;
  outline: none;
  transition: border-color 0.15s;
}
.hs-input:focus, .hs-select:focus, .hs-textarea:focus { border-color: var(--hs-blue); }
.hs-textarea { resize: vertical; min-height: 120px; }

.hs-label {
  display: block;
  font-size: 12px; font-weight: 700;
  color: var(--hs-text-soft);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* ─── Cartes ──────────────────────────────────────────────────────── */
.hs-card {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 20px;
}

/* ─── Messages d'état ─────────────────────────────────────────────── */
.hs-msg {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.hs-msg.success { background: var(--hs-success-bg); border: 1px solid var(--hs-success-border); color: var(--hs-success-text); }
.hs-msg.error   { background: var(--hs-danger-bg);  border: 1px solid var(--hs-danger-border);  color: var(--hs-danger-text); }

/* ─── Pills / badges ──────────────────────────────────────────────── */
.hs-pill {
  display: inline-block;
  background: var(--hs-blue-light); color: var(--hs-blue);
  font-size: 11px; font-weight: 800;
  padding: 6px 14px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ─── Liens ───────────────────────────────────────────────────────── */
.hs-link { color: var(--hs-blue); font-weight: 700; text-decoration: none; }
.hs-link:hover { text-decoration: underline; }

/* ─── Helpers texte ───────────────────────────────────────────────── */
.hs-text-muted { color: var(--hs-text-muted); }
.hs-text-faded { color: var(--hs-text-faded); }
.hs-text-center { text-align: center; }