/* ----------------------------------
 * Polices
 * ----------------------------------
 */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* stylelint-disable */
  src:
    url("/fonts/Poppins-Variable-opti.woff2") format("woff2") tech("variations"),
    url("/fonts/Poppins-Variable-opti.woff2") format("woff2-variations");
  /* stylelint-enable */
}

/* ----------------------------------
 * Base
 * ----------------------------------
 */

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-poppins);
  font-size: var(--text-m);
  font-weight: var(--font-weight-regular);

  /* Désactivation du scroll pour les modales */
  &.no-scroll {
    overflow: hidden;
  }
}

/* Couleur de sélection */
*::selection {
  background: var(--selection);
}

/* ----------------------------------
 * Variables spécifiques
 * ----------------------------------
 */
:root {
  --font-mono:
    "SF Mono", monaco, "Cascadia Code", "Roboto Mono", consolas, "Courier New",
    monospace;
}

/* ----------------------------------
 * Styles pour la page d'accueil
 * ----------------------------------
 */

.homepage-header {
  padding: var(--spacing-32);
  border-radius: var(--radius-md);
  text-align: center;
}

.homepage-header h1 {
  margin: 0 0 var(--spacing-8) 0;
  color: var(--on-surface);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
}

.homepage-header p {
  margin: 0;
  color: var(--on-surface-secondary);
  font-size: var(--text-l);
}

.homepage-section {
  padding: var(--spacing-32);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--layer-1);
}

.homepage-section h2 {
  margin: 0 0 var(--spacing-24) 0;
  padding-bottom: var(--spacing-8);
  border-bottom: 2px solid var(--border-medium);
  color: var(--on-surface);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
}

.homepage-section p {
  margin: 0 0 var(--spacing-24) 0;
  color: var(--on-surface-secondary);
}

.homepage-pre {
  padding: var(--spacing-24);
  overflow-x: auto;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}

.homepage-code {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--layer-3);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-14);
}

.homepage-pre .homepage-code {
  padding: 0;
  background: none;
}

.dependency-category {
  padding: var(--spacing-24);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dependency-category h4 {
  margin: 0 0 var(--spacing-16) 0;
  color: var(--on-surface);
  font-size: var(--text-16);
  font-weight: var(--font-weight-semibold);
}

.dependency-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--spacing-8);
}

.dependency-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8);
  border-radius: var(--radius-md);
  background: var(--layer-1);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-14);
}

.dependency-version {
  color: var(--on-surface-secondary);
  font-size: var(--text-14);
}

.homepage-footer {
  margin-top: var(--spacing-32);
  padding: var(--spacing-32);
  border-top: 1px solid var(--border-medium);
  color: var(--on-surface-secondary);
  font-size: var(--text-14);
  text-align: center;
}

/* ----------------------------------
 * Layouts adaptations
 * ----------------------------------
 */

[data-layout="cluster"] {
  gap: var(--gap-s);
}

[data-layout="stack"] {
  gap: var(--gap-s);
}

.styleguide-component-preview[data-layout="stack"] {
  gap: var(--gap-m);
}

/* Classes spécifiques pour la homepage */
.homepage-main {
  display: grid;
  gap: var(--spacing-32);

  @media (--lg) {
    grid-template-columns: repeat(2, 1fr);

    & > .homepage-styleguide {
      grid-column: span 2;
    }
  }
}

.dependency-grid {
  --stack-gap: var(--spacing-16);
}

.homepage-nav {
  margin: 0;
  padding: 0;
}
