/*
  tokens.css — Design tokens (custom properties uniquement)
  Direction artistique « L'Atelier couture »
  Aucune règle de style ici, uniquement des variables.
*/
:root {
  /* Couleurs de marque (issues du logo) */
  --color-terracotta: #EC7D4B;
  --color-terracotta-deep: #B34F26;   /* usage : fond de bouton + texte blanc (AA) */
  --color-terracotta-soft: #F7C9AE;   /* usage : liseré, fond très clair */
  --color-orange-light: #EF9362;
  --color-brown: #7A5B47;             /* texte profond / titres / boutons secondaires */
  --color-brown-dark: #4A3526;
  --color-ink: #3A2A1E;               /* texte courant, contraste AA garanti sur crème */
  --color-yellow: #FFD707;            /* accent rare : aplats/pastilles, jamais en texte */

  /* Fonds */
  --color-cream: #FBF7F2;
  --color-cream-dark: #F3E7D9;
  --color-cream-deep: #EAD9C4;
  --color-white: #FFFFFF;

  /* États */
  --color-success: #4C7A54;
  --color-success-bg: #E8F0E6;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE8;
  --color-star: #E0912F;
  --color-star-empty: #E4D8C8;

  /* Bordures / lignes */
  --color-border: #E7D9C8;
  --color-border-strong: #D8C3A8;

  /* Typographie */
  --font-display: 'Playfair Display', 'Noto Serif', serif;
  --font-body: 'Karla', 'Roboto', sans-serif;

  --fs-h1: 2rem;         /* 32px mobile */
  --fs-h2: 1.625rem;     /* 26px */
  --fs-h3: 1.25rem;      /* 20px */
  --fs-h4: 1.0625rem;    /* 17px */
  --fs-body: 1rem;       /* 16px */
  --fs-small: 0.875rem;  /* 14px */
  --fs-xsmall: 0.75rem;  /* 12px */
  --fs-lead: 1.125rem;   /* 18px */

  --lh-heading: 1.15;
  --lh-body: 1.6;

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

  /* Rayons (coins doux) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Ombres très diffuses */
  --shadow-soft: 0 8px 24px rgba(58, 42, 30, 0.08);
  --shadow-md: 0 14px 36px rgba(58, 42, 30, 0.12);
  --shadow-lift: 0 20px 48px rgba(58, 42, 30, 0.16);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 220ms var(--ease);

  /* Grille */
  --container-max: 1240px;
  --container-pad: 20px;

  /* z-index */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}