/* ================================================================
   DESIGN TOKENS — Fermat Chroma  (extrait via Google Stitch)
   Projet : "Fermat Chroma" | Lycée Skillforge Community
   Source : Google Stitch  /  projects/9473171062142251432
   Thème  : Maximalist-Light · Organic Mint · Hyper-Rounded
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ----------------------------------------------------------------
   1.  PALETTE — Couleurs de surface & fond
       La charte remplace le blanc pur par un mint doux et le noir
       par un vert forêt profond (#002117).
   ---------------------------------------------------------------- */
:root {
  /* ► FOND DOMINANT — Pastis Mint (remplace le blanc) */
  --color-background:                #e7fff3;   /* fond de page par défaut  */
  --color-surface:                   #e7fff3;   /* identique au fond         */
  --color-surface-bright:            #e7fff3;
  --color-surface-dim:               #a8e7cd;   /* surfaces atténuées        */

  /* Hiérarchie de conteneurs (du plus clair au plus foncé) */
  --color-surface-container-lowest:  #ffffff;   /* seul endroit où le blanc est admis */
  --color-surface-container-low:     #cbffe8;
  --color-surface-container:         #bbfbe1;
  --color-surface-container-high:    #b6f6db;
  --color-surface-container-highest: #b0f0d6;
  --color-surface-variant:           #b0f0d6;

  /* ----------------------------------------------------------------
     2.  COULEUR DE TEXTE PRINCIPALE — Forest Green (remplace le noir)
         Utilisée pour tout le texte courant, les icônes et les bordures.
     ---------------------------------------------------------------- */
  --color-on-background:             #002117;   /* texte principal (≈ noir organique) */
  --color-on-surface:                #002117;   /* texte sur fond de page             */
  --color-on-surface-variant:        #3c4a42;   /* texte secondaire / sous-titres     */
  --color-outline:                   #6c7a71;   /* bordures & séparateurs             */
  --color-outline-variant:           #bbcabf;   /* bordures légères                   */

  /* Surfaces inversées (ex : tooltips foncés) */
  --color-inverse-surface:           #003829;
  --color-inverse-on-surface:        #befee3;

  /* ----------------------------------------------------------------
     3.  COULEURS D'ACCENTUATION VIVES
         Utilisées sur boutons, badges, éléments interactifs.
     ---------------------------------------------------------------- */

  /* ── Primaire · Vibrant Green (actions, succès, CTA) */
  --color-primary:                   #006c49;   /* vert foncé — état repos button   */
  --color-primary-container:         #10b981;   /* vert vif   — fond badge/bouton   */
  --color-on-primary:                #ffffff;   /* texte sur fond primaire          */
  --color-on-primary-container:      #00422b;   /* texte sur container primaire     */
  --color-primary-fixed:             #6ffbbe;   /* variante claire                  */
  --color-primary-fixed-dim:         #4edea3;   /* variante intermédiaire           */
  --color-inverse-primary:           #4edea3;

  /* ── Secondaire · Electric Blue (navigation, liens, info) */
  --color-secondary:                 #0058be;   /* bleu principal                   */
  --color-secondary-container:       #2170e4;   /* bleu vif — fond badge secondaire */
  --color-on-secondary:              #ffffff;
  --color-on-secondary-container:    #fefcff;
  --color-secondary-fixed:           #d8e2ff;
  --color-secondary-fixed-dim:       #adc6ff;

  /* ── Tertiaire · Flash Orange (alertes, notifications urgentes) */
  --color-tertiary:                  #9d4300;   /* orange foncé — état repos        */
  --color-tertiary-container:        #ff7e2d;   /* orange vif   — badge alerte      */
  --color-on-tertiary:               #ffffff;
  --color-on-tertiary-container:     #622700;
  --color-tertiary-fixed:            #ffdbca;
  --color-tertiary-fixed-dim:        #ffb690;

  /* ── Erreur */
  --color-error:                     #ba1a1a;
  --color-error-container:           #ffdad6;
  --color-on-error:                  #ffffff;
  --color-on-error-container:        #93000a;

  /* Teinte de surface (utilisée pour les ombres organiques) */
  --color-surface-tint:              #006c49;

  /* ── Couleurs d'ombre et shadow (mode clair) */
  --color-shadow-primary:            rgba(0, 108, 73, 0.12);
  --color-shadow-dark-overlay:       rgba(0, 33, 23, 0.5);

  /* ----------------------------------------------------------------
     4.  TYPOGRAPHIE — Familles de polices
         Plus Jakarta Sans : titres  |  Hanken Grotesk : corps & labels
     ---------------------------------------------------------------- */
  --font-headline: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:     'Hanken Grotesk',    system-ui, sans-serif;
  --font-label:    'Hanken Grotesk',    system-ui, sans-serif;

  /* Échelle typographique complète */
  --text-headline-lg-size:    32px;
  --text-headline-lg-weight:  800;
  --text-headline-lg-lh:      40px;
  --text-headline-lg-ls:      -0.02em;

  --text-headline-lg-m-size:  26px;   /* version mobile */
  --text-headline-lg-m-weight:800;
  --text-headline-lg-m-lh:    32px;
  --text-headline-lg-m-ls:    -0.02em;

  --text-headline-md-size:    20px;
  --text-headline-md-weight:  700;
  --text-headline-md-lh:      28px;

  --text-body-lg-size:        18px;
  --text-body-lg-weight:      500;
  --text-body-lg-lh:          26px;

  --text-body-md-size:        16px;
  --text-body-md-weight:      500;
  --text-body-md-lh:          24px;

  --text-label-bold-size:     14px;
  --text-label-bold-weight:   700;
  --text-label-bold-lh:       18px;

  --text-label-sm-size:       12px;
  --text-label-sm-weight:     600;
  --text-label-sm-lh:         16px;

  /* ----------------------------------------------------------------
     5.  ARRONDIS ORGANIQUES — "Hyper-Rounded" (ROUND_EIGHT base)
         Aucun angle à 90° dans l'interface.
     ---------------------------------------------------------------- */
  --radius-sm:      0.25rem;   /*  4px — micro-éléments             */
  --radius:         0.5rem;    /*  8px — par défaut                 */
  --radius-md:      0.75rem;   /* 12px — boutons & inputs           */
  --radius-lg:      1rem;      /* 16px — cartes principales         */
  --radius-xl:      1.5rem;    /* 24px — grands conteneurs          */
  --radius-full:    9999px;    /* pill — chips, badges, avatars     */

  /* ----------------------------------------------------------------
     6.  ESPACEMENTS — Grille 8 px
     ---------------------------------------------------------------- */
  --spacing-base:           8px;
  --spacing-gutter:         16px;
  --spacing-margin-mobile:  16px;
  --spacing-margin-desktop: 32px;
  --spacing-container-max:  1200px;

  /* ----------------------------------------------------------------
     7.  ÉLÉVATION / PROFONDEUR
         Pas de box-shadow noire. Profondeur via empilement tonal
         et bordures colorées de 2px Forest Green.
     ---------------------------------------------------------------- */
  --border-interactive: 2px solid var(--color-on-surface);
  --border-subtle:      1px solid var(--color-outline);
  --shadow-organic:     4px 4px 0 rgba(0, 33, 23, 0.12); /* hard-shadow décalé */
}

/* ================================================================
   MODE SOMBRE — Variables adaptées
   ================================================================ */
html[data-theme="dark"] {
  /* ► Fonds sombres */
  --color-background:                #002117;   /* fond très foncé (vert forêt profond) */
  --color-surface:                   #002117;
  --color-surface-bright:            #003a2a;
  --color-surface-dim:               #001a14;

  /* Hiérarchie de conteneurs mode sombre */
  --color-surface-container-lowest:  #000d0a;
  --color-surface-container-low:     #001a14;
  --color-surface-container:         #003a2a;
  --color-surface-container-high:    #004d3a;
  --color-surface-container-highest: #005d47;
  --color-surface-variant:           #005d47;

  /* ► Texte mode sombre (inversion) */
  --color-on-background:             #befee3;   /* texte clair sur fond sombre */
  --color-on-surface:                #befee3;
  --color-on-surface-variant:        #8dd9c0;
  --color-outline:                   #5e9d87;
  --color-outline-variant:           #3a6b55;

  /* ► Surfaces inversées */
  --color-inverse-surface:           #e7fff3;
  --color-inverse-on-surface:        #002117;

  /* ► ACCENTUATION mode sombre (couleurs légèrement plus pastel) */
  /* Primaire : Vibrant Green adapté pour le sombre */
  --color-primary:                   #a3ffd6;   /* vert plus clair — meilleure lisibilité sur fond sombre */
  --color-primary-container:         #5de8ad;   /* container vert pastel */
  --color-on-primary:                #002117;   /* texte sombre sur accent clair */
  --color-on-primary-container:      #001a0f;
  --color-primary-fixed:             #6ffbbe;
  --color-primary-fixed-dim:         #4edea3;
  --color-inverse-primary:           #006c49;

  /* Secondaire : Electric Blue adapté */
  --color-secondary:                 #adc6ff;   /* bleu plus clair pour sombre */
  --color-secondary-container:       #5998ff;   /* bleu vif mais lisible */
  --color-on-secondary:              #000d3d;
  --color-on-secondary-container:    #000a1f;
  --color-secondary-fixed:           #d8e2ff;
  --color-secondary-fixed-dim:       #adc6ff;

  /* Tertiaire : Flash Orange adapté */
  --color-tertiary:                  #ffb690;   /* orange plus clair */
  --color-tertiary-container:        #ff9770;   /* orange vif pero lisible */
  --color-on-tertiary:               #3a1900;
  --color-on-tertiary-container:     #200d00;
  --color-tertiary-fixed:            #ffdbca;
  --color-tertiary-fixed-dim:        #ffb690;

  /* Erreur mode sombre */
  --color-error:                     #ffb4ab;
  --color-error-container:           #93000a;
  --color-on-error:                  #570003;
  --color-on-error-container:        #ffdad6;

  /* Teinte de surface mode sombre */
  --color-surface-tint:              #a3ffd6;

  /* ── Couleurs d'ombre mode sombre */
  --color-shadow-primary:            rgba(0, 0, 0, 0.3);
  --color-shadow-dark-overlay:       rgba(0, 0, 0, 0.7);
}

/* ================================================================
   CLASSES UTILITAIRES — à composer dans vos composants
   ================================================================ */

/* ── Fonds ── */
.bg-surface        { background-color: var(--color-surface); }
.bg-surface-low    { background-color: var(--color-surface-container-low); }
.bg-surface-card   { background-color: var(--color-surface-container); }
.bg-primary        { background-color: var(--color-primary-container); }
.bg-secondary      { background-color: var(--color-secondary-container); }
.bg-tertiary       { background-color: var(--color-tertiary-container); }

/* ── Textes ── */
.text-default      { color: var(--color-on-surface); font-family: var(--font-body); }
.text-muted        { color: var(--color-on-surface-variant); font-family: var(--font-body); }
.text-on-primary   { color: var(--color-on-primary); }
.text-on-secondary { color: var(--color-on-secondary); }

/* ── Typographie ── */
.headline-lg {
  font-family:    var(--font-headline);
  font-size:      var(--text-headline-lg-size);
  font-weight:    var(--text-headline-lg-weight);
  line-height:    var(--text-headline-lg-lh);
  letter-spacing: var(--text-headline-lg-ls);
  color:          var(--color-on-background);
}
.headline-md {
  font-family: var(--font-headline);
  font-size:   var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-lh);
  color:       var(--color-on-background);
}
.body-lg {
  font-family: var(--font-body);
  font-size:   var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-lh);
  color:       var(--color-on-surface);
}
.body-md {
  font-family: var(--font-body);
  font-size:   var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
  color:       var(--color-on-surface);
}
.label-bold {
  font-family: var(--font-label);
  font-size:   var(--text-label-bold-size);
  font-weight: var(--text-label-bold-weight);
  line-height: var(--text-label-bold-lh);
}
.label-sm {
  font-family: var(--font-label);
  font-size:   var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-lh);
}

/* ── Arrondis ── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Boutons (Bold + bordure Forest Green, sans dégradé) ── */
.btn-primary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  padding:          10px 20px;
  font-family:      var(--font-label);
  font-size:        var(--text-label-bold-size);
  font-weight:      var(--text-label-bold-weight);
  color:            var(--color-on-primary);
  background-color: var(--color-primary-container);   /* #10b981 Vibrant Green */
  border:           var(--border-interactive);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:hover {
  transform:    translateY(-1px) scale(1.02);
  box-shadow:   var(--shadow-organic);
}
.btn-primary:active {
  transform:    translateY(1px) scale(0.98);
  box-shadow:   none;
}

.btn-secondary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  padding:          10px 20px;
  font-family:      var(--font-label);
  font-size:        var(--text-label-bold-size);
  font-weight:      var(--text-label-bold-weight);
  color:            var(--color-on-secondary);
  background-color: var(--color-secondary-container);  /* #2170e4 Electric Blue */
  border:           var(--border-interactive);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-secondary:hover {
  transform:    translateY(-1px) scale(1.02);
  box-shadow:   var(--shadow-organic);
}

/* ── Cartes (fond tonal + bordure 2px Forest Green) ── */
.card {
  background-color: var(--color-surface-container);  /* #bbfbe1 */
  border:           var(--border-interactive);
  border-radius:    var(--radius-lg);
  padding:          var(--spacing-gutter);
}

/* ── Badges / Chips ── */
.badge-primary {
  display:          inline-block;
  padding:          2px 10px;
  font-family:      var(--font-label);
  font-size:        var(--text-label-sm-size);
  font-weight:      var(--text-label-sm-weight);
  color:            var(--color-on-primary-container);
  background-color: var(--color-primary-container);   /* Vibrant Green */
  border-radius:    var(--radius-full);
}
.badge-secondary {
  display:          inline-block;
  padding:          2px 10px;
  font-family:      var(--font-label);
  font-size:        var(--text-label-sm-size);
  font-weight:      var(--text-label-sm-weight);
  color:            var(--color-on-secondary);
  background-color: var(--color-secondary-container);  /* Electric Blue */
  border-radius:    var(--radius-full);
}
.badge-alert {
  display:          inline-block;
  padding:          2px 10px;
  font-family:      var(--font-label);
  font-size:        var(--text-label-sm-size);
  font-weight:      var(--text-label-sm-weight);
  color:            var(--color-on-tertiary);
  background-color: var(--color-tertiary-container);   /* Flash Orange */
  border-radius:    var(--radius-full);
}

/* ── Champs de saisie ── */
.input-field {
  width:            100%;
  padding:          10px 14px;
  font-family:      var(--font-body);
  font-size:        var(--text-body-md-size);
  color:            var(--color-on-surface);
  background-color: var(--color-surface-container-low);
  border:           var(--border-subtle);
  border-radius:    var(--radius-md);
  outline:          none;
  transition:       border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-field:focus {
  border:     2px solid var(--color-primary-container);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ================================================================
   BASE PAGE — Application des tokens globaux
   ================================================================ */
html, body {
  margin:           0;
  padding:          0;
  background-color: var(--color-background);          /* #e7fff3 Pastis Mint */
  color:            var(--color-on-background);        /* #002117 Forest Green */
  font-family:      var(--font-body);
  font-size:        var(--text-body-md-size);
  font-weight:      var(--text-body-md-weight);
  line-height:      var(--text-body-md-lh);
  -webkit-font-smoothing: antialiased;
}

/* ── Adaptation mobile (headline réduit) ── */
@media (max-width: 640px) {
  .headline-lg {
    font-size:   var(--text-headline-lg-m-size);
    line-height: var(--text-headline-lg-m-lh);
  }
}