/* ══════════════════════════════════════════
   MONSIEUR GUIZ — Design System Tokens
   Portés depuis src/app/globals.css du repo
   monsieur-guiz-site (Next.js / Tailwind 4).
   Mêmes noms de variables pour rester traçable.
   ══════════════════════════════════════════ */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jost-600.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jost-700.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/jost-800.woff2") format("woff2");
}

:root {
  /* Brand colors */
  --color-brand-purple: #5E00D5;
  --color-brand-purple-light: #EDE0FF;
  --color-brand-teal: #00D1D1;
  --color-brand-teal-light: #B3EEEE;
  --color-brand-teal-dark: #006666;
  --color-brand-teal-mid: #009797;
  --color-brand-indigo: #1A0050;
  --color-accent-salmon: #FE976E;
  --color-accent-coral: #E8623A;
  --color-accent-coral-deep: #D73D00;
  --color-icon-bg: #CCF4F4;

  /* Surfaces */
  --color-surface-white: #FFFFFF;
  --color-surface-off-white: #FDFCFF;
  --color-surface-near-white: #FAFAFA;
  --color-surface-dark: #393938;

  /* Badge soft backgrounds */
  --color-badge-vert-bg: #E6FAF9;
  --color-badge-orange-bg: #FFF3EE;
  --color-badge-indigo-bg: #EEF0FF;
  --color-badge-gris-bg: #ECECEC;

  /* Text */
  --color-text-primary: #393938;
  --color-text-secondary: #6B6B6A;
  --color-text-muted: #767675;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.82);

  /* Typography */
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;

  /* Spacing rhythm */
  --spacing-section: 6rem;
  --spacing-section-lg: 8rem;

  /* Radius */
  --radius-card: 8px;
  --radius-button: 4px;
  --radius-badge: 6px;

  /* Tap target minimum (a11y WCAG 2.5.8) */
  --tap-target-min: 44px;

  /* Animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-base: 0.6s;
  --duration-long: 1s;
  --duration-hover: 0.35s;

  /* Card shadows */
  --shadow-card-hover: 0 20px 40px rgba(94, 0, 213, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
  --shadow-card-soft: 0 2px 16px rgba(94, 0, 213, 0.08);

  /* Typography scale — fluid */
  --text-hero: clamp(2rem, 3.5vw, 3.125rem);
  --text-section: clamp(1.75rem, 3vw, 2.5rem);
  --text-sub: clamp(1.25rem, 2vw, 1.5rem);
  --text-h1: clamp(2.25rem, 4.5vw, 4rem);
  --text-h2: clamp(1.85rem, 3.2vw, 2.75rem);

  /* Tracking */
  --tracking-display: -0.02em;
}