/* ============================================================
   FRVGMENTS — Design tokens
   Traduction du système « Living Identity Observatory »
   (projet Clément Buisson) en identité FRVGMENTS élargie.
   Retiré (contenu client) : palette « nature vivante » (verts),
   portraits, nœuds de cartographie, manifeste client.
   Conservé (système) : base charbon/ivoire, gris technique,
   or pâle décisionnel, typo 3 familles, grille, motion.
   ============================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* -- Couleurs (système FRVGMENTS, sans les verts client) -- */
  --fvg-void: #050706;
  --fvg-charcoal: #0a0d0b;
  --fvg-ivory: #e8e5d9;
  --fvg-fog: #cbd0c7;
  --fvg-gray: #7a7c77;
  --fvg-gold: #b9964d;

  --surface-deep: var(--fvg-void);
  --surface-dark: var(--fvg-charcoal);
  --panel-dark: rgba(10, 13, 11, 0.84);

  --text-primary: var(--fvg-ivory);
  --text-secondary: rgba(232, 229, 217, 0.72);
  --text-muted: rgba(232, 229, 217, 0.45);

  --hairline: rgba(232, 229, 217, 0.16);
  --hairline-soft: rgba(232, 229, 217, 0.08);
  --active: rgba(185, 150, 77, 0.72);

  /* -- Typographie -- */
  --font-display: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --type-display-xl: clamp(4rem, 11vw, 12rem);
  --type-display-l: clamp(2.75rem, 7vw, 8rem);
  --type-heading-m: clamp(2rem, 4vw, 4.5rem);
  --type-body-l: clamp(1.25rem, 1.8vw, 2rem);
  --type-body: clamp(1rem, 1.05vw, 1.125rem);
  --type-meta: clamp(0.6875rem, 0.75vw, 0.8125rem);

  --line-display: 0.94;
  --line-body: 1.5;
  --letter-meta: 0.12em;

  /* -- Grille -- */
  --margin: clamp(20px, 5vw, 96px);
  --gap: clamp(12px, 1.4vw, 28px);

  /* Zones sûres iOS / navigateurs intégrés (Instagram notamment). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --ios-chrome-live-top: 0px;
  --ios-chrome-live-bottom: 0px;

  /* -- Motion -- */
  --ease-precise: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-organic: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 180ms;
  --dur-ui: 320ms;
  --dur-reveal: 700ms;
  --dur-scene: 1200ms;
  --dur-transformation: 1800ms;

  /* -- Territoires par domaine (accents subtils, système minéral conservé,
        aucune couleur client) : chaque domaine a sa température de brume et
        son point d'accent. Le JS lit ces mêmes valeurs pour les constellations. -- */
  --pole-fog: rgba(203, 208, 199, 0.075);   /* défaut / hors travaux */
  --pole-accent: rgba(185, 150, 77, 0.5);

  /* 01 Brand & Corporate — acier froid */
  --pole0-fog: rgba(176, 196, 208, 0.08);
  --pole0-accent: rgba(198, 214, 224, 0.55);
  /* 02 Entertainment & Culture — or chaud */
  --pole1-fog: rgba(208, 190, 150, 0.085);
  --pole1-accent: rgba(197, 160, 86, 0.62);
  /* 03 Events & Experiences — ivoire vif */
  --pole2-fog: rgba(226, 224, 212, 0.09);
  --pole2-accent: rgba(232, 229, 217, 0.6);
  /* 04 Hospitality & Travel — sable tiède */
  --pole3-fog: rgba(210, 196, 172, 0.088);
  --pole3-accent: rgba(200, 172, 128, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-ui: 1ms;
    --dur-reveal: 1ms;
    --dur-scene: 1ms;
    --dur-transformation: 1ms;
  }
}