/* ---------------------------------------------------------------------------
   elone.eu — jetons de design
   Structure, typographie et échelle reprises du design system Nexus (dc2scale),
   sans aucun élément de marque. Chromatique : base zinc très sombre,
   accent rose + accent bleu acier.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Typographie */
  --font-sans: "Overused Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-title: "Clash Display", "Overused Grotesk", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Surfaces */
  --bg: #09090b;
  --surface: #101013;
  --surface-raised: #18181b;
  --surface-overlay: #1f1f23;
  --line: #27272a;
  --line-strong: #3f3f46;

  /* Texte */
  --fg: #fafafa;
  --fg-muted: #a1a1aa;
  --fg-subtle: #71717a;

  /* Primaire — rose */
  --primary-200: #fecdd6;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-950: #4c0519;

  /* Accents secondaires */
  --accent-blue: #8ebfff;
  --accent-steel: #747b87;

  /* Rayons */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;

  /* Rythme */
  --container: 80rem;
  --gutter: 1.5rem;
  --header-h: 4.5rem;

  /* Courbes — vocabulaire d'animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Ombres / lueurs */
  --glow-primary: 0 0 60px -10px color-mix(in oklab, var(--primary-500) 55%, transparent);
  --shadow-card: 0 1px 0 0 color-mix(in oklab, #fff 6%, transparent) inset,
                 0 24px 48px -32px rgb(0 0 0 / 0.9);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2.5rem;
    --header-h: 5rem;
  }
}