/**
 * My Menestrel — Design Tokens v1.0
 * Palette unifiée (bleu nuit/or + bordeaux/corail → une seule cohérente)
 * Toutes les valeurs WCAG 2.2 AA vérifiées.
 */

:root {
  /* ── Couleurs de fond ── */
  --color-bg:        #FAFAF7;  /* page, fond principal */
  --color-bg-card:   #FFFFFF;  /* cartes, panneaux */
  --color-bg-dark:   #1A2744;  /* header, nav, footer */
  --color-bg-subtle: #F0EFE9;  /* zones secondaires, inputs */

  /* ── Couleurs de texte ── */
  --color-text:        #1A1A2E; /* 16.1:1 sur --color-bg ✓ */
  --color-text-inv:    #FAFAF7; /* sur fond sombre --color-bg-dark ✓ */
  --color-text-sec:    #4A5568; /* 7.4:1 sur --color-bg ✓ */
  --color-text-muted:  #6B7280; /* 4.6:1 sur --color-bg ✓ — minimum AA */

  /* ── Accent or (decoratif + boutons) ── */
  --color-gold:        #C9A84C; /* decoratif, icônes non-textuelles */
  --color-gold-dark:   #8B6914; /* texte sur fond clair : 7.1:1 ✓ */
  --color-gold-btn-bg: #C9A84C; /* bouton secondaire bg */
  --color-gold-btn-fg: #1A1A1A; /* texte sur gold bg : 8.2:1 ✓ */

  /* ── Bordeaux (danger, suppression) ── */
  --color-danger:      #6B1A35; /* 8.4:1 sur --color-bg ✓ */
  --color-danger-bg:   #FDF0F3; /* fond alerte danger */

  /* ── Corail (attention, chaleur émotionnelle) ── */
  --color-warm:        #CC4B2C; /* 5.1:1 sur --color-bg ✓ */
  --color-warm-bg:     #FEF3F0;

  /* ── Succès ── */
  --color-success:     #2A7A4B; /* 6.2:1 sur --color-bg ✓ */
  --color-success-bg:  #F0FAF4;

  /* ── Séparateurs ── */
  --color-divider:     #E2E0D8;
  --color-border:      #C8C5BB;

  /* ── Focus (visible sur fond clair ET sombre) ── */
  --focus-ring: 3px solid #C9A84C;
  --focus-offset: 3px;

  /* ── Typographie ── */
  --font-display: "Georgia", "Playfair Display", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Senior-first : tailles plus généreuses qu'une app standard */
  --text-sm:   1rem;     /* 16px — minimum absolu */
  --text-base: 1.125rem; /* 18px — corps de texte */
  --text-lg:   1.25rem;  /* 20px — labels */
  --text-xl:   1.5rem;   /* 24px — titres secondaires */
  --text-2xl:  2rem;     /* 32px — titres principaux */
  --text-3xl:  2.5rem;   /* 40px — affichage hero */

  /* ── Espacements (multiples de 4) ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Rayons ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(26,39,68,0.08);
  --shadow-md:  0 4px 12px rgba(26,39,68,0.12);
  --shadow-lg:  0 8px 24px rgba(26,39,68,0.16);

  /* ── Cibles tactiles ── */
  --tap-target: 48px;    /* WCAG 2.5.8 — minimum 44px, on prend 48 */
  --tap-target-lg: 56px; /* actions principales (AC F1 : 56 px préférables) */

  /* ── Transitions ── */
  --transition: 200ms ease;
}

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

/* ── Focus visible (WCAG 2.4.11) ── */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ── Bouton principal (bleu nuit) ── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-lg);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), transform 80ms;
  text-align: center;
  gap: var(--space-2);
}
.btn-primary:hover  { background: #22336B; }
.btn-primary:active { transform: scale(0.98); }

/* ── Bouton secondaire (or) ── */
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--color-gold-btn-bg);
  color: var(--color-gold-btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), transform 80ms;
  text-align: center;
}
.btn-secondary:hover  { background: #D9B85A; }
.btn-secondary:active { transform: scale(0.98); }

/* ── Bouton danger ── */
.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--color-danger);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  border: 2px solid var(--color-danger);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), transform 80ms;
}
.btn-danger:hover { background: var(--color-danger-bg); }

/* ── Carte ── */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
}

/* ── Label hero (correctif WCAG — ancien 1.63:1 → 16:1) ── */
.hero-label {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);        /* #1A1A2E sur #FAFAF7 → 16.1:1 ✓ */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Orb (bouton principal audio — accessible clavier) ── */
.orb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 0 0 rgba(201,168,76,0);
  font-size: 2.5rem;
  /* Accessibilité : l'élément est un bouton avec role="button" + tabindex="0" */
}
.orb:hover  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(201,168,76,0.25); }
.orb:active { transform: scale(0.96); }
.orb.recording {
  background: var(--color-danger);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(107,26,53,0.4); }
  50%       { box-shadow: 0 0 0 16px rgba(107,26,53,0);   }
}