/*
 * JETONS — SOURCE UNIQUE DU VISUEL de onlyway.be
 *
 * styles.css n'utilise QUE des var(--…) définies ici. Une couleur, une taille,
 * une durée qui change, change ICI et nulle part ailleurs.
 * Nommage par RÔLE, convention shadcn (--background, --foreground, --primary…).
 *
 * Direction : nuit, ivoire, une seule lueur ambrée. Le site est toujours
 * sombre, il n'a pas de thème clair (choix de marque, pas un oubli).
 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/Hanken-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Couleurs */
  --background: oklch(0.14 0.005 60);
  --foreground: oklch(0.93 0.015 85);
  --muted-foreground: oklch(0.70 0.015 85);
  --primary: oklch(0.78 0.11 75);          /* la lueur ambrée */
  --border: oklch(0.93 0.015 85 / 0.18);
  --scrim: oklch(0.10 0.005 60 / 0.55);    /* voile sur les photos */
  --scrim-strong: oklch(0.10 0.005 60 / 0.85);

  /* Typographie */
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-display: clamp(2.5rem, 1.2rem + 7vw, 7rem);
  --text-statement: clamp(2rem, 1rem + 5vw, 5.5rem);
  --text-title: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  --tracking-wide: 0.18em;
  --tracking-display: 0.04em;
  --tracking-hero: 0.22em;
  --weight-thin: 200;
  --leading-tight: 1.05;
  --leading-body: 1.6;

  /* Espacements (grille de 4 px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --gutter: var(--space-4);           /* marge latérale sur téléphone */
  --gutter-wide: var(--space-12);     /* marge latérale au-delà de 48rem */
  --measure: 34rem;                   /* largeur de lecture */
  --touch-target: 48px;               /* zone tactile minimale */
  --header-height: 4rem;
  --header-blur: 12px;

  /* Le signe de marque : l'anneau de lumière (le « O » de Only Way) */
  --ring-mark: 1.125rem;              /* dans l'en-tête */
  --ring-large: min(70vw, 28rem);     /* dans la section contact */
  --ring-stroke: 1.5px;
  --ring-glow: 0 0 0.75rem var(--primary);
  --ring-glow-large: 0 0 3rem var(--primary), inset 0 0 3rem var(--primary);
  --scroll-cue-height: 3rem;

  /* Mouvement */
  --duration-reveal: 1400ms;
  --duration-zoom: 24s;
  --duration-fast: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --zoom-scale: 1.08;
  --reveal-offset: 1.5rem;
  --duration-breathe: 6s;
  --breathe-dim: 0.55;
}