/* ===========================================================================
   Cabinet Virginie Socrate — Design Tokens
   Source de vérité de la charte graphique. À importer dans le futur projet
   Astro via:  <link rel="stylesheet" href="/brand/tokens.css" />
   =========================================================================== */

:root {
  /* ---------- Couleurs : palette principale (réf. moodboard Dija Studio) ---------- */
  --color-sage-900: #6D7A71;   /* sage profond — texte sur fond clair, headings d'accent */
  --color-sage-300: #CDD9C5;   /* sage clair — surfaces apaisantes */
  --color-terracotta: #BA806A; /* accent chaud — CTA, soulignés, liens */

  /* ---------- Verts d'action (direction retenue le 2026-08-18, hero « Immersion ») ----------
     Le terracotta n'est plus la couleur d'action : il reste dans la palette pour un
     usage ponctuel, mais tous les CTA, accents et micro-signes passent au vert. */
  --color-green-deep: #3B6355;  /* actions, accents sur fond clair */
  --color-green-mid:  #7FB8A6;  /* accents sur fond sombre (topbar, footer, méga-CTA) */
  --color-green-soft: #D8E6DD;  /* surfaces douces, halos */

  /* ---------- Terracotta de contact (2026-08-18) ----------
     Réservé aux téléphones et aux liens de prise de RDV : le chaud signale « joignable ».
     #BA806A d'origine ne dépasse pas 3.1:1 en texte, d'où deux déclinaisons calées AA. */
  --color-contact:       #96583F;  /* texte sur fond clair — 5.3:1 sur paper, 4.6:1 sur cream */
  --color-contact-light: #C99377;  /* texte sur fond encre — 5.1:1 */
  --color-contact-strong:#A85A34;  /* aplats : boutons de réservation Doctolib — texte paper à 4.7:1 */
  --color-cream: #EFEADD;      /* arrière-plan principal, papier */
  --color-sand: #E8D7C7;       /* arrière-plan secondaire, cartes douces */

  /* ---------- Couleurs : neutres dérivés ---------- */
  --color-ink: #2A2F2C;        /* texte principal — sage très foncé, plus doux que le noir */
  --color-ink-soft: #4A524D;   /* texte secondaire */
  --color-ink-mute: #7E8780;   /* texte tertiaire, légendes */
  --color-line: #DCD6C8;       /* séparateurs subtils sur cream */
  --color-line-strong: #B9B0A0;
  --color-paper: #FBF8F1;      /* blanc cassé légèrement plus clair que cream */
  --color-white: #FFFFFF;

  /* ---------- États ---------- */
  --color-success: #6D7A71;
  --color-error: #A85541;
  --color-focus: #BA806A;

  /* ---------- Typographie ---------- */
  /* Display : Fraunces — serif éditorial, lettres généreuses, signature wellness */
  --font-display: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  /* Body : Inter — sans-serif neutre, lisible, moderne */
  --font-body: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  /* Mono : pour micro-données (téléphone, prix, etc.) */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle modulaire (ratio ~1.25 — Major Third) */
  --text-2xs: 0.6875rem;   /* 11px — labels en capitales */
  --text-xs:  0.8125rem;   /* 13px — légendes */
  --text-sm:  0.9375rem;   /* 15px — body secondaire */
  --text-base:1.0625rem;   /* 17px — body principal, lecture confortable */
  --text-md:  1.25rem;     /* 20px — sous-titres */
  --text-lg:  1.625rem;    /* 26px — h4 */
  --text-xl:  2.0625rem;   /* 33px — h3 */
  --text-2xl: 2.625rem;    /* 42px — h2 */
  --text-3xl: 3.5rem;      /* 56px — h1 */
  --text-display: clamp(3rem, 6vw + 1rem, 5.5rem); /* hero — fluide */

  /* Graisses */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Hauteurs de ligne */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Tracking — capitales étirées pour le côté "spa éditorial" */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.22em;

  /* ---------- Espacement (échelle 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Rayons ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-xs: 0 1px 2px rgba(42, 47, 44, 0.04);
  --shadow-sm: 0 4px 12px rgba(42, 47, 44, 0.06);
  --shadow-md: 0 12px 28px rgba(42, 47, 44, 0.08);
  --shadow-lg: 0 24px 60px rgba(42, 47, 44, 0.12);

  /* ---------- Layout ---------- */
  --content-width: 72ch;
  --container-narrow: 720px;
  --container: 1120px;
  --container-wide: 1320px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Animations ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}