/* ==========================================================================
   Design tokens — Out of Nowhere Studio
   Ajuste ces valeurs pour matcher la charte du site existant si besoin.
   ========================================================================== */

:root {
  /* ---- Couleurs de base (dark/minimal) ---- */
  --color-bg: #0a0a0c;
  --color-bg-alt: #121216;
  --color-surface: #17171c;
  --color-border: #26262c;

  --color-text: #f2f2f0;
  --color-text-muted: #9a9aa2;
  --color-text-dim: #5c5c66;

  /* ---- Accents par section (repris de la logique nav-pill du site studio) ---- */
  --accent-primary: #7c5cff;   /* violet — accent par défaut */
  --accent-secondary: #ff5c7c; /* rose */
  --accent-tertiary: #5cd6ff;  /* cyan */
  --accent-quaternary: #ffd45c; /* jaune */

  /* ---- Typographie ---- */
  --font-display: 'Covered By Your Grace', cursive;
  --font-heading: 'Anton', sans-serif;
  --font-base: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 5.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- Spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* ---- Structure d'espacement : Page > container > section > row > colonnes > bloc ----
     - space-section-gap : écart entre deux SECTIONS (le même partout sur le site,
       déjà utilisé par .about/.services/.services-recent/.contact/.bento/.project__block)
     - space-row-gap     : écart entre deux ROWS à l'intérieur d'une même section (plus petit) ---- */
  --space-section-gap: calc(var(--space-xl) + var(--space-lg));
  --space-row-gap: var(--space-lg);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* ---- Bento grid ---- */
  --bento-gap: 1rem;

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-default);
  --transition-base: 0.4s var(--ease-default);
  --transition-slow: 0.8s var(--ease-default);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-parallax: 10;
  --z-content: 20;
  --z-nav: 100;
  --z-modal: 200;
}