/**
 * @file 01-tokens.css
 * @project Nails-Manucure-v1
 * @description Variables CSS uniquement (design tokens).
 * @version 1.0.0
 * @standards CSS Living Standard, WCAG 2.2
 * @updated 2026-04-26
 */

:root {
  /* Couleurs primaires */
  --plum: #2C2028;
  --plum-mid: #3D2E38;
  --plum-soft: #5C4858;
  --ivory: #FAF7F4;
  --ivory-mid: #F2ECE6;
  --ivory-dark: #E6DDD4;
  --ivory-deep: #D8CCBF;

  /* Accents */
  --rose: #C4869A;
  --rose-light: #DDB0C0;
  --rose-pale: #F5E8ED;
  --rose-deep: #A36478;
  --champagne: #D4A574;
  --champagne-l: #E8C9A4;
  --champagne-p: #F7EDE1;
  --berry: #8B3A52;
  --berry-dark: #6E2A3F;
  --berry-glow: rgba(139, 58, 82, 0.2);

  /* Textes */
  --text: #2C2028;
  --text-soft: #5C4858;
  --text-mute: #6B5D65;
  --text-xmute: #C0B4BA;

  /* Surfaces (tokens manquants   audit design system) */
  --surface-white: #FBF9F7;
  --surface-warm: #F5EDEF;
  --surface-neutral: #F0EAE5;
  --border-light: #F0EAE5;
  --border-soft: #E6DDD4;

  /* Utilitaires */
  --white: #FFFFFF;
  --overlay: rgba(44, 32, 40, 0.7);

  /* Typo */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Nunito Sans', system-ui, sans-serif;

  /* Échelle */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 5rem;
  --fs-6xl: 7rem;

  /* Espacements */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Rayon */
  --r-sm: 6px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-full: 9999px;
  --r-nail: 60% 40% 55% 45% / 40% 40% 60% 60%;

  /* Ombres */
  --sh-sm: 0 2px 8px rgba(44, 32, 40, 0.07);
  --sh-md: 0 8px 28px rgba(44, 32, 40, 0.10);
  --sh-lg: 0 20px 60px rgba(44, 32, 40, 0.14);
  --sh-berry: 0 10px 36px rgba(139, 58, 82, 0.28);
  --sh-rose: 0 8px 28px rgba(196, 134, 154, 0.25);

  /* Easing */
  --ease-q: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-e: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-s: cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══ FLUID TOKENS   320px → 4K ═══ */

  /* Container fluide */
  --container: min(1320px, calc(100vw - 48px));
  --container-wide: min(1600px, calc(100vw - 48px));
  --content-text: min(900px, calc(100vw - 64px));

  /* Typo fluide (min, preferred, max) */
  --fs-h1: clamp(2rem, 1.2rem + 3vw, 4rem);
  --fs-h2: clamp(1.4rem, 1rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  --fs-small: clamp(0.78rem, 0.72rem + 0.15vw, 0.9rem);
  --fs-label: clamp(0.62rem, 0.55rem + 0.15vw, 0.72rem);

  /* Espacement fluide */
  --sp-section: clamp(40px, 4vw, 128px);
  --sp-block: clamp(24px, 3vw, 80px);
  --sp-hero-pb: clamp(60px, 8vw, 120px);
  --sp-hero-pt: clamp(80px, 10vw, 160px);

  /* Hero prix fluide */
  --fs-price: clamp(2.5rem, 2rem + 5vw, 5rem);

  /* Grille fluide   colonnes auto-fill */
  --grid-2: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  --grid-3: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  --grid-4: repeat(auto-fit, minmax(min(260px, 100%), 1fr));

  /* Breakpoints (pour JS / media queries reference) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1600px;
}