/* ============================================================
   Home Smart — Design tokens
   Direction : light luxury éditorial, accent ORANGE.
   Couleurs en oklch pour des dégradés et états cohérents.
   ============================================================ */

:root {
  /* --- Palette : papier chaud + encre profonde --- */
  --paper:        oklch(98.5% 0.008 75);   /* fond principal, blanc cassé chaud */
  --paper-2:      oklch(96.2% 0.012 70);   /* sections alternées */
  --ink:          oklch(22% 0.02 60);      /* texte principal, presque noir chaud */
  --ink-soft:     oklch(44% 0.02 60);      /* texte secondaire */
  --ink-faint:    oklch(62% 0.015 60);     /* légendes, méta */
  --line:         oklch(88% 0.012 70);     /* bordures fines */
  --line-strong:  oklch(80% 0.015 65);

  /* --- Accent ORANGE (Raphael) --- */
  --accent:       oklch(68% 0.19 47);      /* orange signature ~#E8650E */
  --accent-strong:oklch(62% 0.20 42);      /* hover / pressions */
  --accent-soft:  oklch(94% 0.05 60);      /* fonds teintés */
  --accent-ink:   oklch(38% 0.12 45);      /* texte sur fond orange clair */
  --on-accent:    oklch(99% 0.01 80);      /* texte sur orange plein */
  --gradient-warm: linear-gradient(135deg, oklch(72% 0.18 55), oklch(64% 0.20 38));

  /* --- Or (touches luxe) : décoratif uniquement, l'orange reste la couleur d'action --- */
  --gold:        oklch(60% 0.10 85);       /* sur fond clair (labels, filets) */
  --gold-bright: oklch(76% 0.12 88);       /* sur fond sombre (photo, footer) */
  --gold-soft:   oklch(92% 0.05 88);

  /* --- Surfaces sombres ponctuelles (footer, hero overlay) --- */
  --night:        oklch(24% 0.02 55);
  --night-2:      oklch(19% 0.02 55);
  --on-night:     oklch(95% 0.01 80);
  --on-night-soft:oklch(72% 0.015 70);

  /* --- Typographie --- */
  --font-display: "Fraunces", "Times New Roman", serif;       /* éditorial, contrasté */
  --font-sans:    "Satoshi", system-ui, -apple-system, sans-serif;
  --text-xs:   clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --text-2xl:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --text-hero: clamp(2.7rem, 1.4rem + 5.6vw, 6.2rem);
  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.62;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.16em;

  /* --- Espacement & rythme --- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --space-gutter:  clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);
  --maxw:          1240px;
  --maxw-prose:    66ch;

  /* --- Rayons, ombres, profondeur --- */
  --radius-sm: 0.5rem;
  --radius:    0.9rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --shadow-sm:  0 1px 2px oklch(20% 0.02 60 / 0.06), 0 2px 6px oklch(20% 0.02 60 / 0.05);
  --shadow:     0 8px 24px oklch(20% 0.02 60 / 0.08), 0 2px 8px oklch(20% 0.02 60 / 0.05);
  --shadow-lg:  0 24px 60px oklch(20% 0.02 60 / 0.14);
  --shadow-accent: 0 14px 36px oklch(64% 0.20 42 / 0.28);

  /* --- Motion --- */
  --duration-fast:   160ms;
  --duration-normal: 320ms;
  --duration-slow:   620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.36, 0.64, 1);

  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}