/* ==========================================================================
   King Host — Design tokens
   Source unique de vérité pour les couleurs, espacements, typo et ombres.
   Modifiez ce fichier pour re-thémer tout le site.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #08090c;
  --bg-soft: #0d0e12;
  --bg-elevated: #121319;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-strong: #141519;
  --black: #060709;

  /* --- Lignes ------------------------------------------------------------ */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-gold: rgba(214, 177, 92, 0.28);
  --line-gold-strong: rgba(214, 177, 92, 0.5);

  /* --- Texte ------------------------------------------------------------- */
  --text: #f6f2e8;
  --text-soft: #d3cec4;
  --muted: #a09c93;
  --muted-dim: #77736c;

  /* --- Or (couleur de marque) -------------------------------------------- */
  --gold: #d6b15c;
  --gold-light: #f1d58e;
  --gold-deep: #9d7425;
  --gold-glow: rgba(214, 177, 92, 0.12);

  /* --- Sémantique -------------------------------------------------------- */
  --success: #5cd68f;
  --danger: #e0685f;
  --info: #6fa8e0;

  /* --- Dégradés ---------------------------------------------------------- */
  --grad-gold: linear-gradient(135deg, var(--gold-light), var(--gold));
  --grad-gold-text: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  --grad-cta: linear-gradient(135deg, #b5892f, #d9b961 50%, #9f7626);

  /* --- Rayons ------------------------------------------------------------ */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- Ombres ------------------------------------------------------------ */
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 14px 34px rgba(214, 177, 92, 0.18);

  /* --- Typographie ------------------------------------------------------- */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sora", var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  /* Échelle fluide : s'adapte sans media query entre 360px et 1400px */
  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --fs-base: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.8vw, 5.6rem);

  /* --- Espacements ------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Respiration verticale des sections, réduite automatiquement sur mobile */
  --section-gap: clamp(64px, 9vw, 118px);

  /* --- Layout ------------------------------------------------------------ */
  --shell-max: 1180px;
  --shell-pad: clamp(18px, 4vw, 32px);
  --header-h: 76px;

  /* --- Mouvement --------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 240ms var(--ease);
  --t-slow: 460ms var(--ease);

  /* --- Profondeur -------------------------------------------------------- */
  --z-header: 40;
  --z-drawer: 60;
  --z-noise: 90;
}