/* ============================================================================
   PORTFOLIO — CLÉMENT LAMORINIÈRE
   tokens.css · Direction artistique « Studio — l'image au premier plan »
   ----------------------------------------------------------------------------
   Registre agence de communication : grands visuels, beaucoup de blanc,
   typographie sans-serif confiante (Satoshi), UNE seule couleur d'accent
   chaude (terracotta), interactions douces. Source unique de vérité.
   ========================================================================== */

/* ===================== POLICE (auto-hébergée, zéro CDN) ===================== */
/* Satoshi — une seule famille pour les titres et le corps.
   Pour changer de police : redéfinir --font-display / --font-body plus bas. */
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- Familles ---- */
  --font-display: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Couleurs ---- */
  --bg:          #f6f4f0;  /* blanc cassé chaud (fond) */
  --bg-2:        #efece5;  /* sections/cartes légèrement teintées */
  --bg-3:        #e8e4db;  /* survols, placeholders */
  --ink:         #16150f;  /* titres + texte */
  --ink-2:       #57534a;  /* texte secondaire */
  --ink-3:       #8a857a;  /* méta, légendes */
  --line:        #e3ded4;  /* filets discrets */
  --line-2:      #d6d0c4;

  --accent:      #c9543b;  /* TERRACOTTA — accent unique */
  --accent-ink:  #b1432b;  /* terracotta foncé : liens/texte sur clair, survols */
  --accent-soft: #f0ddd5;  /* terracotta très pâle : fonds de mise en avant */

  --dark:        #161510;  /* section sombre (contact/footer) */
  --dark-2:      #211f18;
  --on-dark:     #f3f0ea;  /* texte sur sombre */
  --on-dark-2:   #a8a297;

  /* Canaux RGB (pour rgba) */
  --ink-rgb:    22, 21, 15;
  --accent-rgb: 201, 84, 59;

  /* ---- Échelle typographique (fluide, mobile-first, titres généreux) ---- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.14vw, 0.82rem);
  --text-sm:   clamp(0.86rem, 0.83rem + 0.16vw, 0.95rem);
  --text-base: clamp(1.02rem, 0.99rem + 0.2vw, 1.15rem);
  --text-md:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-lg:   clamp(1.55rem, 1.3rem + 1.2vw, 2.3rem);
  --text-xl:   clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --text-2xl:  clamp(2.7rem, 1.9rem + 3.8vw, 5rem);
  --text-3xl:  clamp(3.2rem, 2rem + 6vw, 7.5rem);

  --leading-tight:  1.02;
  --leading-snug:   1.12;
  --leading-normal: 1.62;
  --tracking-tight: -0.02em;   /* gros titres */
  --tracking-label: 0.12em;    /* petits labels en capitales */

  /* ---- Espacements (généreux : beaucoup de blanc) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;
  --section-y: clamp(4.5rem, 3rem + 9vw, 10rem);

  /* ---- Mesures & disposition ---- */
  --container:      1320px;
  --container-text: 760px;    /* largeur de lecture (pages projet) */
  --gutter:         clamp(1.25rem, 5vw, 4.5rem);
  --radius:         12px;     /* médias / cartes : arrondis doux */
  --radius-sm:      8px;
  --radius-pill:    999px;
  --header-h:       72px;

  /* ---- Mouvement (doux, fluide) ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.25s;
  --dur-2: 0.45s;
  --dur-3: 0.7s;

  /* ---- Ombres (douces) ---- */
  --shadow-sm: 0 2px 8px -4px rgba(var(--ink-rgb), 0.18);
  --shadow-md: 0 24px 50px -28px rgba(var(--ink-rgb), 0.40);
  --shadow-lg: 0 40px 80px -36px rgba(var(--ink-rgb), 0.45);

  /* ---- z-index ---- */
  --z-header: 100;
  --z-menu:   200;
  --z-top:    300;
}