/* ============================================================
   Dupuis Maxence — Design System tokens
   Color + Type + spacing + motion (from Figma "Portfolio Maxence")
   ============================================================ */

@font-face {
  font-family: "Liberation Mono";
  src: url("../fonts/LiberationMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("../fonts/LiberationMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("../fonts/LiberationMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("../fonts/LiberationMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap");

:root {
  /* Surfaces */
  --bg-page:        #0a0a0b;
  --bg-card:        #232325;
  --bg-white:       #ffffff;

  /* Foregrounds */
  --fg-1:           #efefef;
  --fg-2:           #fbfbfb;
  --fg-ink:         #232325;
  --fg-muted:       rgba(239, 239, 239, 0.55);

  /* Brand — Yellow */
  --yellow-50:      #ffd980;
  --yellow-500:     #ffb300;
  --yellow-600:     #f0ca00;
  --yellow-muted:   rgba(255, 179, 0, 0.35);

  /* Brand — Lime (sparingly) */
  --lime-300:       #def29a;

  /* Strokes */
  --line-soft:      rgba(0, 0, 0, 0.10);
  --line-on-dark:   #efefef;

  /* Shadows */
  --shadow-card:    0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-project: 10px 10px 5.8px 0 rgba(0, 0, 0, 0.25);

  /* Overlays */
  --img-overlay:    rgba(0, 0, 0, 0.50);

  /* Fonts */
  --font-mono:      "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display:   "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-pixel:     "Liberation Mono", monospace;

  /* Type scale */
  --fs-display:     40px;
  --fs-h1:          32px;
  --fs-h2:          24px;
  --fs-h3:          15px;
  --fs-lead:        20px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-meta:        13px;
  --fs-micro:       12px;

  --lh-tight:       0.9;
  --lh-body:        1.0;
  --lh-readable:    1.45;

  /* Radii */
  --radius-xs:      2px;
  --radius-sm:      5px;
  --radius-md:      10px;
  --radius-pill:    33px;
  --radius-round:   50%;

  /* Spacing */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        25px;
  --space-7:        30px;
  --space-8:        35px;
  --space-10:       50px;
  --space-12:       70px;
  --space-16:      100px;

  /* Motion */
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --motion-fast:    120ms;
  --motion-base:    220ms;
}