/* ============================================================
   ASTREOZ by Proelan — Design Tokens CSS
   Charte graphique v1.0 — 2025
   ============================================================ */

/* ----------------------------------------------------------
   1. COULEURS — Variables CSS
   ---------------------------------------------------------- */
:root {
  /* Palette principale */
  --color-green:        #05F212;  /* Vert primaire — logotype "astreoz" */
  --color-orange:       #FF9F29;  /* Orange secondaire — tagline + accent */
  --color-gray:         #CECDCC;  /* Gris perle — symbole graphique */
  --color-white:        #FFFFFF;  /* Fond principal */
  --color-black:        #1A1A1A;  /* Texte principal */

  /* Variantes fonctionnelles */
  --color-primary:      var(--color-green);
  --color-secondary:    var(--color-orange);
  --color-neutral:      var(--color-gray);
  --color-background:   var(--color-white);
  --color-text:         var(--color-black);
  --color-text-muted:   #666666;
  --color-border:       #DDDDDD;

  /* Nuances du vert (pour hover, états, etc.) */
  --color-green-dark:   #04CC10;  /* hover / pressed */
  --color-green-light:  #7AFCA0;  /* fond léger, badge */
  --color-green-alpha:  rgba(5, 242, 18, 0.12); /* background subtle */

  /* Nuances de l'orange */
  --color-orange-dark:  #E08820;  /* hover / pressed */
  --color-orange-light: #FFD4A0;  /* fond léger, badge */
  --color-orange-alpha: rgba(255, 159, 41, 0.12); /* background subtle */

  /* Nuances du gris */
  --color-gray-light:   #F2F2F2;  /* fond alternatif */
  --color-gray-medium:  #999999;  /* texte secondaire, placeholders */
  --color-gray-dark:    #444444;  /* texte tertiaire */
}


/* ----------------------------------------------------------
   2. TYPOGRAPHIE — Variables CSS
   ---------------------------------------------------------- */
:root {
  /* Familles de polices */
  --font-display:   'Exo 2', 'Nunito', 'Rounded Mplus 1c', sans-serif; /* logotype / titres */
  --font-body:      'Inter', 'DM Sans', 'Open Sans', sans-serif;        /* corps de texte */
  --font-mono:      'JetBrains Mono', 'IBM Plex Mono', monospace;       /* code / données */

  /* Échelle typographique (modular scale ×1.25) */
  --text-xs:    0.75rem;   /* 12px — légendes, mentions légales */
  --text-sm:    0.875rem;  /* 14px — captions, labels */
  --text-base:  1rem;      /* 16px — corps de texte */
  --text-md:    1.125rem;  /* 18px — sous-titres */
  --text-lg:    1.25rem;   /* 20px — titres de section */
  --text-xl:    1.5rem;    /* 24px — H2 */
  --text-2xl:   2rem;      /* 32px — H1 */
  --text-3xl:   2.5rem;    /* 40px — hero title */

  /* Graisse */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Interlignage */
  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* Espacement lettre */
  --letter-spacing-logo: 0.02em; /* recommandé pour le logotype */
  --letter-spacing-caps: 0.08em; /* pour textes tout-caps */
}


/* ----------------------------------------------------------
   3. ESPACEMENTS — Variables CSS
   ---------------------------------------------------------- */
:root {
  /* Base spacing: 4px grid */
  --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 */
  --space-20: 5rem;      /* 80px */
}


/* ----------------------------------------------------------
   4. RAYONS — Variables CSS
   ---------------------------------------------------------- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;  /* pill / badge */
}


/* ----------------------------------------------------------
   5. OMBRES — Variables CSS
   ---------------------------------------------------------- */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.14);
  --shadow-green:  0 4px 16px rgba(5, 242, 18, 0.25);
  --shadow-orange: 0 4px 16px rgba(255, 159, 41, 0.25);
}


/* ----------------------------------------------------------
   6. TRANSITIONS — Variables CSS
   ---------------------------------------------------------- */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}


/* ----------------------------------------------------------
   7. COMPOSANTS TYPIQUES — Classes utilitaires
   ---------------------------------------------------------- */

/* --- Logotype texte --- */
.astreoz-wordmark {
  font-family:      var(--font-display);
  font-weight:      var(--font-weight-regular);
  font-size:        var(--text-2xl);
  color:            var(--color-green);
  letter-spacing:   var(--letter-spacing-logo);
  text-transform:   lowercase; /* TOUJOURS en minuscules */
  line-height:      1;
}

/* --- Tagline "by Proelan" --- */
.astreoz-tagline {
  font-family:    var(--font-display);
  font-weight:    var(--font-weight-regular);
  font-style:     italic;
  font-size:      var(--text-sm);
  color:          var(--color-orange);
  letter-spacing: 0.01em;
}

/* --- Bouton primaire (vert) --- */
.btn-primary {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-6);
  background-color: var(--color-green);
  color:            var(--color-black);
  font-family:      var(--font-body);
  font-weight:      var(--font-weight-bold);
  font-size:        var(--text-base);
  border:           none;
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    box-shadow       var(--transition-fast),
                    transform        var(--transition-fast);
  text-decoration:  none;
}
.btn-primary:hover {
  background-color: var(--color-green-dark);
  box-shadow:       var(--shadow-green);
  transform:        translateY(-1px);
}
.btn-primary:active {
  transform:        translateY(0);
  box-shadow:       none;
}

/* --- Bouton secondaire (orange) --- */
.btn-secondary {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-6);
  background-color: var(--color-orange);
  color:            var(--color-black);
  font-family:      var(--font-body);
  font-weight:      var(--font-weight-bold);
  font-size:        var(--text-base);
  border:           none;
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    box-shadow       var(--transition-fast),
                    transform        var(--transition-fast);
  text-decoration:  none;
}
.btn-secondary:hover {
  background-color: var(--color-orange-dark);
  box-shadow:       var(--shadow-orange);
  transform:        translateY(-1px);
}

/* --- Bouton outline (contour orange) --- */
.btn-outline {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-6);
  background-color: transparent;
  color:            var(--color-orange);
  font-family:      var(--font-body);
  font-weight:      var(--font-weight-bold);
  font-size:        var(--text-base);
  border:           2px solid var(--color-orange);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    color            var(--transition-fast);
  text-decoration:  none;
}
.btn-outline:hover {
  background-color: var(--color-orange);
  color:            var(--color-black);
}

/* --- Badge / tag vert --- */
.badge-green {
  display:          inline-block;
  padding:          var(--space-1) var(--space-3);
  background-color: var(--color-green-alpha);
  color:            var(--color-green-dark);
  border:           1px solid var(--color-green);
  border-radius:    var(--radius-full);
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      var(--font-weight-bold);
  letter-spacing:   var(--letter-spacing-caps);
  text-transform:   uppercase;
}

/* --- Badge / tag orange --- */
.badge-orange {
  display:          inline-block;
  padding:          var(--space-1) var(--space-3);
  background-color: var(--color-orange-alpha);
  color:            var(--color-orange-dark);
  border:           1px solid var(--color-orange);
  border-radius:    var(--radius-full);
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      var(--font-weight-bold);
  letter-spacing:   var(--letter-spacing-caps);
  text-transform:   uppercase;
}

/* --- Card --- */
.card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-6);
  box-shadow:       var(--shadow-sm);
  transition:       box-shadow var(--transition-base),
                    transform  var(--transition-base);
}
.card:hover {
  box-shadow:       var(--shadow-md);
  transform:        translateY(-2px);
}

/* Accentuation verte gauche */
.card--accent-green {
  border-left: 4px solid var(--color-green);
}
.card--accent-orange {
  border-left: 4px solid var(--color-orange);
}

/* --- Divider de section --- */
.section-divider {
  width:            60px;
  height:           4px;
  background:       linear-gradient(90deg, var(--color-green), var(--color-orange));
  border-radius:    var(--radius-full);
  margin:           var(--space-4) 0;
}

/* --- Texte accentué --- */
.text-green  { color: var(--color-green);  }
.text-orange { color: var(--color-orange); }
.text-muted  { color: var(--color-text-muted); }

/* --- Fond coloré --- */
.bg-green-subtle  { background-color: var(--color-green-alpha);  }
.bg-orange-subtle { background-color: var(--color-orange-alpha); }
.bg-gray-light    { background-color: var(--color-gray-light);   }


/* ----------------------------------------------------------
   8. IMPORT GOOGLE FONTS (optionnel — décommenter si besoin)
   ---------------------------------------------------------- */
/*
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');
*/