/* ============================================================
   DESIGN SYSTEM — Sofiane Achab Portfolio (v2)
   Source unique des tokens & composants (couleurs, typo,
   boutons, tags). Importé par le styleguide et les pages.
   Polices : Cormorant + Sometype Mono via Google Fonts,
   Helvetica Neue = police système.
   ============================================================ */

:root {
  /* ---- Couleurs ---- */
  --c1: #EEEEEE; /* gris clair   */
  --c2: #D7E9D6; /* vert clair   */
  --c3: #FEF2A0; /* jaune        */
  --c4: #1E391F; /* vert foncé   */
  --c5: #5E3122; /* marron       */

  /* ---- Polices ---- */
  --font-serif: 'Cormorant', Georgia, serif;
  --font-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'Sometype Mono', ui-monospace, monospace;
}

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

.ds-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 49px;
  line-height: 1.05;      /* 105% */
  letter-spacing: -0.025em; /* -2.5% */
  color: var(--c4);
}

.ds-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 39px;
  line-height: 1.15;      /* 115% */
  letter-spacing: -0.03em;  /* -3% */
  color: var(--c4);
}

/* Paragraphes : Helvetica Neue, 19px, 170%, -4% — 3 graisses */
.ds-p,
.ds-p-medium,
.ds-p-bold {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.7;       /* 170% */
  letter-spacing: -0.04em;  /* -4% */
  color: var(--c4);
}
.ds-p        { font-weight: 300; } /* Light   */
.ds-p-medium { font-weight: 500; } /* Medium  */
.ds-p-bold   { font-weight: 700; } /* Bold    */

/* Links (remplace aussi l'ancien "Caption") */
.ds-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;       /* 130% */
  letter-spacing: -0.02em;  /* -2% */
  color: var(--c4);
}

/* ============================================================
   BOUTONS — 3 types, états default & hover
   ============================================================ */

.btn {
  position: relative;       /* repère pour le soulignement du tertiaire */
  display: inline-flex;
  align-items: center;
  width: fit-content;       /* hug le contenu, même dans un parent flex/stretch */
  max-width: 100%;
  align-self: flex-start;   /* ne s'étire pas dans un flex-column */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;

  /* Surlignement « stabilo » : la couleur de hover est un calque de fond qui
     s'étend de gauche à droite. Le texte se peint toujours au-dessus des
     fonds : pas de question d'ordre d'empilement. */
  background-image: linear-gradient(var(--btn-hl, transparent),
                                    var(--btn-hl, transparent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.36s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.3s ease;
}
.btn:hover { background-size: 100% 100%; }
/* flèche qui apparaît au hover (types pleins) */
.btn::after {
  content: '→';
  display: inline-block;
  min-width: 0;      /* laisse max-width:0 réduire réellement le flex-item */
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  transition: max-width 0.22s ease, opacity 0.22s ease, margin-left 0.22s ease;
}
.btn:hover::after {
  max-width: 1.4em;
  opacity: 1;
  margin-left: 8px;
}

/* background-color, surtout pas le raccourci `background` : il effacerait
   le dégradé de surlignement défini au-dessus. */

/* Primary : vert foncé (C4), surligné en vert clair (C2) */
.btn--primary            { background-color: var(--c4); color: var(--c1); --btn-hl: var(--c2); }
.btn--primary:hover      { color: var(--c4); }

/* Secondary : vert clair (C2), surligné en vert foncé (C4) */
.btn--secondary          { background-color: var(--c2); color: var(--c4); --btn-hl: var(--c4); }
.btn--secondary:hover    { color: var(--c1); }

/* Tertiary : lien mono, soulignement animé au hover (pas de flèche) */
.btn--tertiary {
  background: none;
  color: var(--c4);
  padding: 0;
  border-radius: 0;
  position: relative;
  overflow: visible;
}
.btn--tertiary::after { content: none; }
.btn--tertiary::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}
.btn--tertiary:hover::before { width: 100%; }

/* ============================================================
   TAGS — 3 couleurs, états default & hover
   Default : texte "Links" surligné, sans padding.
   Hover   : bordure basse + padding (0 15px 5px 0).
   ============================================================ */

.tag {
  display: inline;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0 5px 0;         /* 5px en bas dans les deux états */
  cursor: default;

  /* 2 couches de fond :
     1. le trait « stabilo » qui se trace de gauche à droite au hover
     2. le surlignement plein, présent dans les deux états              */
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(var(--tag-hl), var(--tag-hl));
  background-size: 0% 0.5px, 100% 100%;
  background-position: left bottom, left top;
  background-repeat: no-repeat;
  transition: background-size 0.36s cubic-bezier(0.65, 0, 0.35, 1),
              padding 0.28s ease;
}
.tag:hover {
  padding: 0 15px 5px 0;      /* + 15px à droite au hover */
  background-size: 100% 0.5px, 100% 100%;
}

.tag--yellow { color: var(--c4); --tag-hl: var(--c3); }
.tag--green  { color: var(--c4); --tag-hl: var(--c2); }
.tag--brown  { color: var(--c3); --tag-hl: var(--c5); }

/* ============================================================
   RESPONSIVE — échelles typographiques
   Les tailles Links (13px) et les composants ne bougent pas :
   seuls les titres et les paragraphes se réduisent.
   ============================================================ */

@media (max-width: 1024px) {
  .ds-h1 { font-size: 40px; }
  .ds-h2 { font-size: 32px; }
}

@media (max-width: 600px) {
  .ds-h1 { font-size: 32px; }
  .ds-h2 { font-size: 26px; }
  .ds-p, .ds-p-medium, .ds-p-bold { font-size: 17px; }

  /* au doigt, il n'y a pas de survol : on fige les tags dans leur état par
     défaut pour éviter un décalage au tap */
  .tag:hover { padding: 0 0 5px 0; background-size: 0% 0.5px, 100% 100%; }
}