/* ============================================
   VARIABLES CSS — Design System Compta Consult
   ============================================ */

:root {
  /* --- Couleurs principales --- */
  --color-navy:         #1A2A3A;
  --color-navy-dark:    #0F1C28;
  --color-gold:         #C9A96E;
  --color-ivory:        #F5F3EF;
  --color-ivory-dark:   #EDE8E0;

  /* --- Couleurs texte --- */
  --color-text-primary:   #1A2A3A;
  --color-text-body:      #444441;
  --color-text-secondary: #5F5E5A;

  /* --- Couleurs utilitaires --- */
  --color-border:       #D3D1C7;
  --color-white:        #FFFFFF;

  /* --- Texte sur fond navy (contrastes validés AA) --- */
  --on-navy:            rgba(255, 255, 255, 0.86);  /* corps de texte */
  --on-navy-muted:      rgba(255, 255, 255, 0.7);   /* secondaire, liens */
  --on-navy-line:       rgba(255, 255, 255, 0.3);   /* soulignés */
  --on-navy-faint:      rgba(255, 255, 255, 0.12);  /* séparateurs, fonds de tags */

  /* --- Typographie — Familles --- */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Typographie — Tailles --- */
  --text-display:   44px;
  --text-h1:        36px;
  --text-h2:        28px;
  --text-h3:        22px;
  --text-body:      16px;
  --text-small:     14px;
  --text-ui:        12px;
  --text-tag:       11px;

  /* --- Typographie — Chiffres décoratifs (stats, numéros de service) --- */
  --text-figure-lg: 48px;
  --text-figure:    36px;
  --text-figure-sm: 32px;

  /* --- Typographie — Line-heights --- */
  --lh-display:     1.25;
  --lh-h1:          1.25;
  --lh-h2:          1.3;
  --lh-h3:          1.4;
  --lh-body:        1.7;
  --lh-small:       1.6;
  --lh-ui:          1.4;

  /* --- Typographie — Letter-spacing --- */
  --ls-serif:       0.02em;
  --ls-nav:         0.06em;
  --ls-eyebrow:     0.12em;
  --ls-button:      0.10em;

  /* --- Typographie — Graisses --- */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-bold:        700;

  /* --- Espacements --- */
  --space-2xs:      4px;
  --space-xs:       8px;
  --space-sm:       16px;
  --space-md:       24px;
  --space-lg:       40px;
  --space-xl:       64px;

  /* --- Conteneur --- */
  --container-max:  1120px;
  --container-pad:  24px;

  /* --- Rayons de bordure --- */
  --radius-xs:      1px;
  --radius-sm:      3px;
  --radius-md:      12px;

  /* --- Bordures --- */
  --border-hairline: 1px;
  --border-control:  1.5px;
  --border-accent:   2px;

  /* --- Ombres --- */
  --shadow-sm:      0 1px 3px rgba(26, 42, 58, 0.05);
  --shadow-md:      0 4px 20px rgba(26, 42, 58, 0.08);

  /* --- Transitions --- */
  --transition:     150ms ease;

  /* --- Hauteurs fixes --- */
  --navbar-height:  80px;

  /* --- Tailles mobile (appliquées dans le media query de pages.css) --- */
  --text-display-mobile: 32px;
  --text-figure-mobile:  24px;
}