/*
 * variables.css
 * Design tokens — palette, typographie, espacements, ombres.
 * Toute nouvelle couleur ou taille doit passer par une variable ici,
 * jamais en valeur "en dur" dans les autres fichiers CSS.
 */

:root {
  /* --- Couleurs de marque (identité Terr'Art'Psy) --- */
  --color-cream: #f5f0e6;         /* fond principal */
  --color-cream-soft: #efe8da;    /* fond alterné des sections */
  --color-paper: #fbf8f2;         /* cartes, blocs clairs */

  --color-sage: #6b7658;          /* vert olive — "Terr" */
  --color-sage-dark: #4c5540;
  --color-sage-tint: #e4e6d9;

  --color-terracotta: #bb6a45;    /* terre cuite — "Art" */
  --color-terracotta-dark: #93502f;
  --color-terracotta-tint: #f1ddd0;

  --color-navy: #33475a;          /* bleu nuit — "Psy" */
  --color-navy-dark: #212f3c;
  --color-navy-tint: #dde3e8;

  --color-text: #362f27;          /* texte principal (contraste AA/AAA sur crème) */
  --color-text-soft: #5c5347;
  --color-text-invert: #f7f3ea;

  --color-border: #ded4c0;
  --color-success: #4c6b4f;
  --color-error: #a13d3d;

  /* --- Typographie --- */
  --font-display: "Yellowtail", "Segoe Script", cursive;      /* logo / signature */
  --font-heading: "Playfair Display", "Georgia", serif;        /* titres */
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;    /* texte courant */

  --fs-900: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);
  --fs-800: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --fs-700: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  --fs-600: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.875rem;

  /* --- Espacements --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* --- Mise en page --- */
  --container-max: 1160px;
  --container-narrow: 760px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(54, 47, 39, 0.06);
  --shadow-md: 0 12px 32px rgba(54, 47, 39, 0.1);
  --shadow-lg: 0 20px 50px rgba(33, 47, 60, 0.16);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}