/* ===========================================
   🌐 GLOBAL CSS – SNAPZONE
   Reset, polices, base document, accessibilité
=========================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Passion+One:wght@400;700;900&family=Gabarito:wght@400..900&display=swap');

/* --- Reset moderne --- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* --- Smooth rendering + box model --- */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* ===========================================
   🎨 POLICES (seules variables de global.css)
=========================================== */

:root {
  --font-title: 'Passion One', sans-serif;
  --font-text: 'Gabarito', sans-serif;
  --lh-title: 1.1;
  --lh-body: 1.5;
}

/* ===========================================
   🧱 BASE DU DOCUMENT
=========================================== */

html,
body {
  margin: 0;
  height: 100%;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base, var(--font-text));
  font-size: var(--font-size-base);
  line-height: var(--lh-body);
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===========================================
   ♿ ACCESSIBILITÉ
=========================================== */

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-focus, #4a90e2) !important;
  outline-offset: 3px;
}

/* ===========================================
   ✨ TYPOGRAPHIE
=========================================== */

h1 {
  font-family: var(--font-title);
  font-size: var(--font-size-xl);
  font-weight: 900;
  line-height: var(--lh-title);
  letter-spacing: 0.5px;
}

h2 {
  font-family: var(--font-title);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--lh-title);
}

h3 {
  font-family: var(--font-title);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--lh-title);
}

p {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* UI numérique : scores, timer, data */
.ui-text {
  font-family: var(--font-text);
  font-size: var(--font-size-md);
  font-weight: 600;
}

/* Texte secondaire */
.small-text {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}