/* ═══════════════════════════════════════════════
   variables.css — Design tokens & global reset
   PI Media Football Management System
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Brand colours */
  --green:    #1a7a3c;
  --green-d:  #0f5228;
  --green-l:  #e8f5ee;
  --green-m:  #2d9d55;
  --gold:     #f5a623;
  --gold-l:   #fef6e4;
  --gold-d:   #c47d0a;
  --red:      #e74c3c;
  --blue:     #2980b9;

  /* Surfaces */
  --bg:       #f7f8f6;
  --bg2:      #ffffff;
  --bg3:      #eef0eb;

  /* Text */
  --text:     #1a1c18;
  --muted:    #6b7280;

  /* Borders & effects */
  --border:   #e2e5de;
  --shadow:   0 2px 12px rgba(0, 0, 0, 0.07);

  /* Geometry */
  --radius:    10px;
  --radius-lg: 16px;

  /* Animation */
  --transition: all 0.2s ease;
}

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

/* ── Base ── */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

/* ── Typography scale ── */
h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; }

/* ── Keyframe animations ── */
@keyframes pulse       { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }
@keyframes liveBg      { 0%, 100% { background: var(--red) } 50% { background: #c0392b } }
@keyframes fadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp     { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes toastIn     { from { transform: translateX(60px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes loginShake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.login-shake           { animation: loginShake .4s ease; }