/* ==========================================================================
   hoomie dev — design tokens
   Même direction artistique que hoomie maison (domotique), accent lavande
   au lieu de menthe.
   Source de vérité des valeurs visuelles. Ne pas écrire de valeur en dur
   ailleurs : utiliser ces variables. Modifications : agent Fondations seulement.
   ========================================================================== */

/* Police Manrope (variable 200–800, sous-ensemble latin) hébergée localement :
   aucune requête vers Google. Licence : assets/fonts/OFL-Manrope.txt */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-variable-latin.woff2") format("woff2");
}

:root {
  /* ---------- Couleurs : texte ---------- */
  --c-ink: #16181D;          /* titres, boutons primaires, fonds sombres */
  --c-ink-2: #3E4450;        /* texte sur fonds pastel */
  --c-muted: #4A505C;        /* paragraphes */
  --c-subtle: #5A6270;       /* légendes, labels, 2e partie des titres */

  /* ---------- Couleurs : surfaces ---------- */
  --c-bg: #EDEFF2;           /* fond derrière la coque */
  --c-surface: #F6F7F9;      /* coque, cartes sur fond blanc */
  --c-surface-2: #E6E9ED;    /* bloc visuel du hero */
  --c-surface-3: #F1F2F4;    /* bulles neutres de la timeline */
  --c-white: #FFFFFF;
  --c-line: #E1E4E8;
  --c-line-strong: #D5DAE0;
  --c-input-border: #838A95; /* bordure des champs : 3.5:1 sur blanc, 3.2:1 sur --c-surface (RGAA 3.3) */

  /* ---------- Couleurs : marque ---------- */
  --c-accent: #DCD8FB;       /* lavande — jamais en texte sur fond clair */
  --c-accent-ink: #2B2748;   /* texte courant sur lavande (10:1) */
  --c-accent-label: #5B4FB0; /* sur-titres (6.6:1 sur blanc, 4.8:1 sur lavande) */
  --c-lavender: #DCD8FB;
  --c-mint: #C8F0DA;         /* couleur de hoomie maison (renvoi vers la domotique) */
  --c-lime: #EEF5B0;
  --c-sky: #BFE3EC;

  /* ---------- Couleurs : états ---------- */
  --c-success: #2E9B63;
  --c-live: #FF6B5E;
  --c-danger: #B42318;       /* erreurs de formulaire (6.6:1 sur blanc) */
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: #C3C7CF;
  --c-focus: #5B4FB0;

  /* ---------- Typographie ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(40px, 5.4vw, 72px);
  --fs-h2: clamp(32px, 3.6vw, 44px);
  --fs-h3: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-stat: 26px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-card: 1.55;
  --lh-body: 1.6;

  --ls-display: -0.035em;
  --ls-heading: -0.03em;
  --ls-eyebrow: 0.12em;

  /* ---------- Espacements (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-20: 80px;

  /* ---------- Rayons ---------- */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-phone: 48px;
  --r-pill: 999px;

  /* ---------- Ombres (widgets flottants uniquement) ---------- */
  --shadow-float: 0 10px 30px rgba(22, 24, 29, 0.08);
  --shadow-float-lg: 0 12px 32px rgba(22, 24, 29, 0.12);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --gutter: var(--space-8);       /* 32px desktop */
  --section-y: var(--space-18);   /* 72px */
  --page-pad-y: var(--space-6);
  --header-pad-y: 22px;           /* marge verticale de l'en-tête (base.css, hero plein écran) */
  --touch: 44px;

  /* ---------- Mouvement ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
}

@media (max-width: 720px) {
  :root {
    --gutter: var(--space-4);     /* 16px mobile */
    --section-y: var(--space-14); /* 56px */
    --page-pad-y: var(--space-2);
  }
}