/* ============================================================
   SYSTÈME DE DESIGN

   Parti pris : monochrome premium. Les actions principales sont
   en encre (bouton noir sur crème, blanc sur noir), la couleur est
   réservée aux états sémantiques et à un accent teal unique.

   Pourquoi : sur un site de salon, les vidéos et photos du client
   sont la vraie couleur de la page. Une interface neutre les met en
   valeur au lieu de rivaliser avec elles — et elle ne ressemble ni au
   bleu iOS par défaut, ni au violet dégradé qu'on voit partout.

   Toutes les valeurs vivent ici : aucune couleur en dur ailleurs.
   ============================================================ */

/* ---------- Polices auto-hébergées ----------
   Fichiers variables : une seule requête couvre toutes les graisses.
   Auto-hébergées parce que la politique CSP interdit les CDN de
   polices — et cela supprime au passage une dépendance externe. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../public/fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap; /* le texte reste lisible pendant le chargement */
}

@font-face {
  font-family: "Inter Var";
  src: url("../public/fonts/inter.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* ---------- Fonds : crème tiède, pas le gris bleuté d'iOS ---------- */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f0eee9; /* champs, tuiles, rangées */

  /* ---------- Textes ---------- */
  --ink: #0f0f0f;
  --muted: #5a5751; /* gris tiède — marge de contraste sur le fond animé */

  /* ---------- Traits ---------- */
  --border: rgba(15, 15, 15, 0.09);
  --border-strong: rgba(15, 15, 15, 0.2);

  /* ---------- Action principale : l'encre ----------
     Bouton noir sur fond clair : le langage de Vercel et Linear.
     Contraste maximal, aucune ambiguïté sur ce qu'il faut cliquer. */
  --accent: #0f0f0f;
  --accent-hover: #2e2e2e;
  --accent-ink: #ffffff;

  /* ---------- Accent chromatique : sélection et liens ----------
     Un teal profond, distinct du vert de succès et du rouge d'erreur,
     et assez inhabituel pour ne pas faire « gabarit ». */
  --tint: #0a6068; /* accent en TEXTE (prix, heures, liens) */
  --tint-fill: #0c757f; /* accent en REMPLISSAGE (jour ou créneau choisi) */
  --accent-soft: rgba(12, 117, 127, 0.1);

  /* ---------- États sémantiques ---------- */
  --success: #1a6b39;
  --success-bg: rgba(26, 107, 57, 0.11);
  --danger: #c0261d;
  --danger-hover: #a01d16;
  --danger-bg: rgba(192, 38, 29, 0.09);
  --info: #0a6068;
  --info-bg: rgba(12, 117, 127, 0.1);
  --warn: #8a5000;
  --warn-bg: rgba(190, 120, 0, 0.13);

  /* ---------- Profondeur ----------
     Ombres franches mais courtes : la hiérarchie vient des surfaces
     et de l'espace, pas d'un halo flou. */
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.05);
  --shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 6px 20px rgba(15, 15, 15, 0.06);
  --shadow-lg: 0 2px 4px rgba(15, 15, 15, 0.05), 0 12px 32px rgba(15, 15, 15, 0.1);
  --shadow-modal: 0 24px 60px rgba(15, 15, 15, 0.22), 0 4px 16px rgba(15, 15, 15, 0.08);

  /* ---------- Géométrie ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px; /* contrôles */
  --radius: 18px; /* cartes */
  --radius-lg: 24px; /* grandes surfaces */
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--tint-fill);

  /* ---------- Espacement (échelle de 4 px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---------- Mouvement ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* sortie « ressort » */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 320ms;

  /* ---------- Typographie ----------
     Bricolage Grotesque porte le caractère sur les titres ;
     Inter assure la lisibilité du texte courant. */
  --font-display: "Bricolage Grotesque", "Inter Var", system-ui, sans-serif;
  --font-sans: "Inter Var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 6vw, 3rem);

  /* ---------- Verre dépoli et voiles ---------- */
  --frost: rgba(255, 255, 255, 0.93);
  --scrim: rgba(15, 15, 15, 0.4);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Noir profond légèrement tiède, surfaces étagées façon Linear. */
    --bg: #0b0b0c;
    --surface: #161617;
    --surface-2: #1f1f21;

    --ink: #f5f4f1;
    --muted: #a3a09a;

    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.22);

    /* En sombre, l'action principale s'inverse : blanc sur noir. */
    --accent: #f5f4f1;
    --accent-hover: #ffffff;
    --accent-ink: #0f0f0f;

    --tint: #4fd1de;
    --tint-fill: #0c757f;
    --accent-soft: rgba(79, 209, 222, 0.14);

    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.13);
    --danger: #ff7b6f;
    --danger-hover: #ff9d94;
    --danger-bg: rgba(255, 123, 111, 0.13);
    --info: #4fd1de;
    --info-bg: rgba(79, 209, 222, 0.13);
    --warn: #f0b355;
    --warn-bg: rgba(240, 179, 85, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5);

    --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--tint);

    --frost: rgba(22, 22, 23, 0.93);
    --scrim: rgba(0, 0, 0, 0.65);

    color-scheme: dark;
  }
}