/* =====================================================================
   Fotova Creation — jetons de design
   Charte 'Luxury Soft' (crème, cachemire, anthracite) tenue dans une
   structure de vitrine : la photographie commande, l'interface se tait.
   ===================================================================== */

:root {
  /* --- Couleurs ---------------------------------------------------
     La charte reste la source ; l'anthracite est seulement approfondi
     pour tenir le contraste des très petits caractères de l'interface. */
  --c-ink:            #23201E; /* texte courant et titres */
  --c-ink-strong:     #100E0D; /* emphase, fonds pleins */
  --c-ink-muted:      #6B625C; /* texte secondaire (4.9:1 sur crème) */
  --c-surface:        #FFFFFF; /* fond des écrans produit */
  --c-surface-warm:   #FAF8F5; /* fond des écrans éditoriaux */
  --c-cream:          #F1EDE6; /* trames et cadres d'image vides */
  --c-cashmere:       #C8B38A; /* accent identitaire — filets uniquement */
  --c-taupe:          #4B4133; /* sous-titres */
  --c-sand:           #D0C9BB; /* neutre UI */
  --c-gold:           #8B6D3B; /* valorisation — seul accent lisible en texte */
  --c-rule:           #E6E2DB; /* séparateurs discrets */
  --c-danger:         #7A2323; /* erreurs : le seul rouge lisible sur clair */
  --c-danger-strong:  #5E1B1B;

  /* Cashmere et sand n'atteignent pas le contraste AA : réservés aux
     filets, bordures et aplats décoratifs, jamais au texte. */

  /* --- Typographie ------------------------------------------------
     La sérif porte les titres éditoriaux et le nom de la marque.
     L'interface — navigation, prix, libellés, boutons — est en Inter :
     une sérif en petit corps se lit mal et date la page. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display:  clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);
  --fs-h1:       clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --fs-h2:       clamp(1.375rem, 1rem + 1.4vw, 2rem);
  --fs-h3:       clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead:     clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-ui:       0.8125rem;  /* navigation, noms de pièces, prix */
  --fs-eyebrow:  0.6875rem;  /* surtitres, boutons, libellés de champ */

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  --ls-eyebrow: 0.14em; /* capitales espacées, comme la baseline du logo */
  --ls-ui:      0.06em;
  --ls-display: -0.02em;

  /* --- Espacement (base 4px) -------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Respiration verticale des sections, resserrée sur mobile */
  --section-y: clamp(var(--sp-12), 7vw, var(--sp-24));

  /* --- Mise en page ------------------------------------------------ */
  --container: 82.5rem;    /* 1320px : la grille respire jusqu'en 1440 */
  --measure: 36rem;        /* longueur de ligne lisible */
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Grille pleine largeur : la photographie va presque au bord, et
     les gouttières se comptent en pixels, pas en centimètres. */
  --edge: clamp(0.5rem, 1.4vw, 1.25rem);
  --grid-gap: clamp(0.25rem, 0.6vw, 0.5rem);

  --header-h: 4rem;

  /* --- Arrondis -----------------------------------------------------
     Le site reste à angles vifs : seules les photographies sont
     adoucies, juste assez pour que le coin cesse de piquer. Les petites
     vignettes prennent la moitié — à 60 ou 72 px, le même rayon y
     paraîtrait deux fois plus marqué. Le bandeau d'ouverture garde ses
     angles : il touche les bords de l'écran. */
  --r-image: 6px;
  --r-image-sm: 3px;

  /* --- Mouvement ---------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
  --dur-slow: 480ms;
}

/* Le mouvement est un ornement : il disparaît si l'utilisateur le refuse. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}