/* ============================================================
   Satyam Advisory · tokens.css
   Variables CSS — palette, typo, spacings, radii, transitions
   Source verrouillée : Satyam_Decision_Palette_Decouplee_2026-05-24.md
   ============================================================ */

:root {
  /* ---------- PALETTE ÉTENDUE (site + outbound + propales) ---------- */
  --color-ivoire: #FAF7F2;        /* fond principal 60% */
  --color-navy: #0A1628;          /* structurant 30% */
  --color-cuivre: #A8431B;        /* accent 10% — CTA, liens, sceau */
  --color-anthracite: #1F2937;    /* texte corps */
  --color-gris-perle: #E8E4DD;    /* sections de respiration */

  /* Variantes contextuelles */
  --color-cuivre-hover: #8C3815;
  --color-cuivre-soft: rgba(168, 67, 27, 0.08);
  --color-navy-soft: rgba(10, 22, 40, 0.06);
  --color-anthracite-soft: #4B5563;  /* Solide pour WCAG AA — ratio 7.07 sur ivoire (passe AA Normal + AAA) */

  /* Indicateurs (usage rare) */
  --color-success: #0F5132;
  --color-warning: #7C2D12;

  /* ---------- PALETTE SIGNATURE (logo, favicon, signature email) ---------- */
  --color-or-pale: #C9A66B;
  --color-or-clair: #D9BC85;
  --color-navy-signature: #0F1B2E;
  --color-ivoire-chaud: #F0E8D6;
  --color-ivoire-gris: #A8A092;

  /* ---------- TYPOGRAPHIE ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Échelle typographique fluide (clamp min - vw - max) */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);        /* 36 → 64 px */
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);        /* 28 → 40 px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);    /* 22 → 28 px */
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* 18 → 22 px */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 px */
  --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15 px */
  --fs-mono: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);    /* 15 → 16 px */
  --fs-epigraphe: 0.75rem;                              /* 12 px fixe */

  /* Hauteurs de ligne */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.8;

  /* Espacement lettres */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.03em;
  --ls-wider: 0.08em;
  --ls-caps: 0.12em;

  /* ---------- ESPACEMENTS (échelle 4-base) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Padding sections */
  --section-py-mobile: var(--space-7);
  --section-py-desktop: var(--space-9);

  /* ---------- CONTAINER ---------- */
  --container-narrow: 72rem;   /* 1152px — prose éditoriale élargie */
  --container-base: 72rem;     /* 1152px — sections standard */
  --container-wide: 88rem;     /* 1408px — heros large + grilles */
  --container-pad-mobile: var(--space-5);
  --container-pad-desktop: var(--space-7);

  /* ---------- RADII ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* ---------- BORDERS ---------- */
  --border-hair: 1px solid var(--color-anthracite-soft);
  --border-soft: 1px solid var(--color-gris-perle);
  --border-strong: 2px solid var(--color-navy);
  --border-cuivre: 1px solid var(--color-cuivre);

  /* ---------- OMBRES (parcimonieuses, Brunswick-style) ---------- */
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-card: 0 2px 8px rgba(10, 22, 40, 0.06);

  /* ---------- TRANSITIONS ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Z-INDEX ---------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---------- NAV ---------- */
  --nav-height-mobile: 64px;
  --nav-height-desktop: 72px;

  /* ---------- BREAKPOINTS (référence — utilisés en media queries) ---------- */
  /* mobile : base (sans MQ)
     tablet : 768px
     desktop : 1280px */

  /* ---------- FOCUS WCAG AA ---------- */
  --focus-outline: 3px solid var(--color-cuivre);
  --focus-offset: 2px;
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}