/* StudioHub Design Tokens v1.0
   Semantic color & typography variables for consistent visual language across the application
   All tokens use --sh-* prefix for CSS custom properties
*/

:root {
  /* =====================================================
     SEMANTIC COLOR TOKENS
     ===================================================== */

  /* Gold: Payment, Commission, Money, Financial
     Utilisé pour tous les éléments liés à l'argent, commissions, et transactions */
  --sh-semantic-gold: #f0b400;
  --sh-semantic-gold-light: #ffd966;
  --sh-semantic-gold-dark: #d4a017;
  --sh-semantic-gold-subtle: rgba(240, 180, 0, 0.12);
  --sh-semantic-gold-hover: rgba(240, 180, 0, 0.2);

  /* Green/Vert: Paid, Confirmed, Accepted, Success
     Utilisé pour indiquer le succès, la confirmation, et les transactions complétées */
  --sh-semantic-vert: #10b981;
  --sh-semantic-vert-light: #6ee7b7;
  --sh-semantic-vert-dark: #047857;
  --sh-semantic-vert-subtle: rgba(16, 185, 129, 0.12);
  --sh-semantic-vert-hover: rgba(16, 185, 129, 0.2);

  /* Orange: Pending, Authorization, In Progress, Awaiting Action
     Utilisé pour les états en attente, les autorisations en cours, et les actions requises */
  --sh-semantic-orange: #f97316;
  --sh-semantic-orange-light: #fed7aa;
  --sh-semantic-orange-dark: #ea580c;
  --sh-semantic-orange-subtle: rgba(249, 115, 22, 0.12);
  --sh-semantic-orange-hover: rgba(249, 115, 22, 0.2);

  /* Red/Rouge: Error, Cancelled, Failed, Declined, Danger
     Utilisé pour les erreurs, les annulations, les statuts échoués, et les avertissements critiques */
  --sh-semantic-rouge: #ef4444;
  --sh-semantic-rouge-light: #fca5a5;
  --sh-semantic-rouge-dark: #991b1b;
  --sh-semantic-rouge-subtle: rgba(239, 68, 68, 0.12);
  --sh-semantic-rouge-hover: rgba(239, 68, 68, 0.2);

  /* Blue: Information, Notification, Alert, Help
     Utilisé pour les messages d'information, notifications, et contenu secondaire */
  --sh-semantic-blue: #3b82f6;
  --sh-semantic-blue-light: #93c5fd;
  --sh-semantic-blue-dark: #1e40af;
  --sh-semantic-blue-subtle: rgba(59, 130, 246, 0.12);
  --sh-semantic-blue-hover: rgba(59, 130, 246, 0.2);

  /* =====================================================
     TYPOGRAPHY SCALE
     ===================================================== */

  /* Hero: Extra large, primary visual hierarchy
     Utilisé pour les titres majeurs, bannières, et éléments d'accent primaire */
  --sh-font-size-hero: 2.5rem;
  --sh-font-weight-hero: 700;
  --sh-line-height-hero: 1.2;
  --sh-letter-spacing-hero: -0.02em;

  /* H1: Largest section heading
     Utilisé pour les titres de pages et sections principales */
  --sh-font-size-h1: 2rem;
  --sh-font-weight-h1: 700;
  --sh-line-height-h1: 1.3;
  --sh-letter-spacing-h1: -0.01em;

  /* H2: Large subsection heading
     Utilisé pour les sous-titres et sections secondaires */
  --sh-font-size-h2: 1.5rem;
  --sh-font-weight-h2: 700;
  --sh-line-height-h2: 1.4;
  --sh-letter-spacing-h2: 0;

  /* H3: Medium heading
     Utilisé pour les sous-sections et titres de cartes */
  --sh-font-size-h3: 1.25rem;
  --sh-font-weight-h3: 700;
  --sh-line-height-h3: 1.4;
  --sh-letter-spacing-h3: 0;

  /* Subtitle: Prominent secondary text
     Utilisé pour les sous-titres et texte secondaire important */
  --sh-font-size-subtitle: 1rem;
  --sh-font-weight-subtitle: 500;
  --sh-line-height-subtitle: 1.5;
  --sh-letter-spacing-subtitle: 0;

  /* Body: Main content text
     Utilisé pour le texte principal du corps et contenu lisible */
  --sh-font-size-body: 0.95rem;
  --sh-font-weight-body: 400;
  --sh-line-height-body: 1.6;
  --sh-letter-spacing-body: 0;

  /* Caption: Small supplementary text
     Utilisé pour les légendes, texte d'aide, et annotations */
  --sh-font-size-caption: 0.8rem;
  --sh-font-weight-caption: 400;
  --sh-line-height-caption: 1.5;
  --sh-letter-spacing-caption: 0.01em;
}

/* ========================================================
   UTILITY CLASSES FOR TYPOGRAPHY
   Use these classes to quickly apply typography tokens
   ======================================================== */

.sh-hero {
  font-size: var(--sh-font-size-hero);
  font-weight: var(--sh-font-weight-hero);
  line-height: var(--sh-line-height-hero);
  letter-spacing: var(--sh-letter-spacing-hero);
}
/* ========================================================
   SEMANTIC COLOR UTILITY CLASSES
   Apply semantic colors for text,
backgrounds { color: var(--sh-semantic-gold); }