@import "./tools/reset.css";
@import "./tools/typo.css";
@import "./tools/layout.css";

@import "./modules/logo.css";
@import "./modules/main.css";
@import "./modules/navbar.css";
@import "./modules/hero.css";
@import "./modules/button.css";
@import "./modules/video.css";
@import "./modules/container.css";
@import "./modules/input.css";
@import "./modules/img.css";

@import "./sections/projects.css";
@import "./sections/heroSection.css";
@import "./sections/articles.css";
@import "./sections/footer.css";
@import "./sections/blog.css";

:root {
  --font-mono: "Geist Mono", monospace;
  --font-sans: "inter", sans-serif;
  --font-serif: "Playfair Display SC", serif;

  --text-base: 18px;
  /* 18 / 16 (default font-size natif navigateur) */
  --space-base: 1.125rem;

  /* 6 / 16 (default font-size natif navigateur) */
  --radius-base: 0.375rem;
  --ratio: 1.2;

  --space-3xs: calc(var(--space-base) / pow(var(--ratio), 6));
  --space-2xs: calc(var(--space-base) / pow(var(--ratio), 3));
  --space-xs: calc(var(--space-base) / pow(var(--ratio), 2));
  --space-sm: calc(var(--space-base) / pow(var(--ratio), 1));
  --space-md: calc(var(--space-base) * pow(var(--ratio), 1));
  --space-lg: calc(var(--space-base) * pow(var(--ratio), 2));
  --space-xl: calc(var(--space-base) * pow(var(--ratio), 3));
  --space-2xl: calc(var(--space-base) * pow(var(--ratio), 4));
  --space-3xl: calc(var(--space-base) * pow(var(--ratio), 5));

  --container-padding: var(--space-xl);
  --container-width: calc(100% - var(--container-padding) * 2);

  --background: #fff;
  --color-foreground: #060606;
  --color-secondary-foreground: #888;
  --border-color: #e6e6e6;

  /* Transition */
  --transition: 0.1s;
  --transition-smooth: 0.4s;

  /* Rounded */
  --ratio-rounded: 6;

  --rounded-sm: calc(var(--space-base) / pow(var(--ratio-rounded), 1));
  --rounded-md: var(--radius-base);
  --rounded-lg: calc(var(--space-base) * pow(var(--ratio-rounded), 1));
  --rounded-xl: calc(var(--space-base) * pow(var(--ratio-rounded), 2));
  --rounded-full: 999px;

  /* Button */
  --bg-button-primary: #eaeaea;
  --bg-button-secondary: linear-gradient(180deg, #fff3 0%, #fff0 100%), #131313;
  --bg-button-secondary-hover: #212224;
  --bg-button-primary-hover: #d3d3d3;

  /* Metier */
  --globalNavigation-height: 120px;
  --border-width: 1px;

  --accent-hover: rgb(110, 255, 96);
}

.homepageHero_typography {
  line-height: 0.8;
  font-size: 5rem;
  text-wrap: balance;
}