@font-face {
  font-family: "Mplus Rounded";
  src: url(../fonts/mplus-Medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Mplus Rounded";
  src: url(../fonts/mplus-Black.woff2) format("woff2");
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito.ttf) format("truetype-variations");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  /* Couleurs de la marque, reprises de logos/README.md */
  --velours-0: #050d2a;
  --velours-1: #0a1c49;
  --velours-2: #113772;
  --velours-3: #17478f;
  --velours-4: #1f549e;

  --or-0: #fff4d0;
  --or-1: #f3da96;
  --or-2: #dcb45c;
  --or-3: #b9872f;
  --or-4: #8a5f1c;

  --marine: #0a1636;
  --parchemin: #fbf6ea;
  --parchemin-creux: #f1e7d2;

  /* Mode clair : la scène est un parchemin, le décor reste en velours */
  --fond: var(--parchemin);
  --papier: #ffffff;
  --papier-creux: var(--parchemin-creux);
  --encre: var(--marine);
  --encre-2: rgba(10, 22, 54, 0.66);
  --encre-3: rgba(10, 22, 54, 0.38);
  --trait: rgba(10, 22, 54, 0.12);
  --surface-haute: #ffffff;
  --surface-basse: var(--parchemin-creux);

  --sur-velours: #f3f6ff;
  --sur-velours-2: rgba(243, 246, 255, 0.7);
  --sur-velours-3: rgba(243, 246, 255, 0.42);
  --velours-relief: rgba(255, 255, 255, 0.12);

  --accent: var(--or-2);
  --accent-clair: var(--or-1);
  --accent-sombre: var(--or-4);
  --azur: #2f6fd0;
  --vert: #2f8f4e;
  --rouge: #c0392b;

  --titre: "Mplus Rounded", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  --texte: "Nunito", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  --code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-28: 1.75rem;

  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-22: 22px;
  --r-28: 28px;

  --verre: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
  --relief: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --filet-or: inset 0 0 0 1px rgba(220, 180, 92, 0.45);
  --ombre-douce: 0 1px 2px rgba(5, 13, 42, 0.1), 0 8px 20px rgba(5, 13, 42, 0.12);
  --ombre-portee: 0 2px 0 rgba(5, 13, 42, 0.14), 0 14px 34px rgba(5, 13, 42, 0.18);
  --ombre-scene: 0 30px 80px rgba(5, 13, 42, 0.32);
  --rebond: cubic-bezier(0.34, 1.4, 0.64, 1);
  --doux: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lateral-largeur: 15.5rem;
  --droite-largeur: 17rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: var(--velours-0);
    --papier: #0c1b3d;
    --papier-creux: #0a1734;
    --encre: var(--sur-velours);
    --encre-2: rgba(243, 246, 255, 0.7);
    --encre-3: rgba(243, 246, 255, 0.4);
    --trait: rgba(243, 246, 255, 0.14);
    --surface-haute: #16305e;
    --surface-basse: #102547;

    --accent: var(--or-2);
    --accent-clair: var(--or-1);
    --accent-sombre: var(--or-3);
    --azur: #6ea6ff;
    --vert: #4ec777;
    --rouge: #ff6b6b;

    --verre: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
    --relief: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4);
    --ombre-portee: 0 2px 0 rgba(0, 0, 0, 0.5), 0 14px 34px rgba(0, 0, 0, 0.5);
    --ombre-scene: 0 30px 80px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
  }
}