/* SKURO — jetons de design (source : docs/charte/DESIGN.md, direction « Dark Tech Premium »)
   Toute couleur, police ou rayon utilisé par le site vient d'ici. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Couleurs */
  --bg: #07090D;
  --bg-elevated: #0B0F14;
  --surface: #11161D;
  --surface-hover: #151C24;
  --border: #25303C;
  --border-strong: #354555;
  --text: #F5F7FA;
  --text-secondary: #B7C0CC;
  --text-muted: #8C98A7;
  --accent: #4FD1FF;
  --accent-ink: #071018;
  --accent-soft: #5DF2C1;
  --success: #34D399;
  --error: #F87171;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent-wash-1: rgba(79, 209, 255, 0.08);
  --accent-wash-2: rgba(79, 209, 255, 0.16);

  /* Typographies */
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-display: clamp(3rem, 6.4vw, 6.2rem);
  --fs-h2: clamp(2.25rem, 4.1vw, 4.3rem);
  --fs-h3: clamp(1.35rem, 2.2vw, 2rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-label: 0.76rem;

  /* Espacements */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;
  --section-y: clamp(72px, 10vw, 144px);
  --gutter: clamp(20px, 4vw, 64px);
  --content-max: 1280px;

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 180ms;
  --t-card: 220ms;
  --t-reveal: 550ms;
  --t-scene: 800ms;
}