/* ==========================================================
   Capital Talent Invest — Design tokens
   Source unique de la charte graphique (variables CSS).
   ========================================================== */

:root {
  /* ===== Palette de marque (extraite du logo CTI) ===== */
  --brand-deep:        #0A4F87;
  --brand-deep-dark:   #073C68;
  --brand-deep-darker: #052A4A;
  --brand-cyan:        #2BBCD9;
  --brand-cyan-light:  #6FD5E8;
  --brand-cyan-pale:   #E8F7FB;
  --brand-green:       #7CC242;
  --brand-green-dark:  #5DA02D;
  --brand-green-pale:  #F0F8E8;

  /* ===== Neutres ===== */
  --ink:        #0F1B2D;   /* texte principal */
  --ink-soft:   #3B4A60;   /* texte secondaire */
  --ink-mute:   #6B7A90;   /* hints, metadata */
  --line:       #E3E8EF;   /* bordures visibles */
  --line-soft:  #EEF2F7;   /* séparateurs subtils */
  --cream:      #FAFAF7;   /* fond sections claires */
  --paper:      #FCFBF8;   /* fond pages légales */
  --white:      #FFFFFF;

  /* ===== Sémantique ===== */
  --success:        #2E9C5A;
  --success-bg:     #E8F6EE;
  --warning:        #D4A52A;
  --warning-bg:     #FBF3DC;
  --error:          #C03A2B;
  --error-bg:       #FBE9E6;
  --info:           var(--brand-deep);
  --info-bg:        #E6F0F8;

  /* ===== Typographie ===== */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ===== Échelle fluide ===== */
  --fs-display:   clamp(2.5rem, 5vw, 4rem);       /* H1 hero */
  --fs-h1:        clamp(2rem, 4vw, 3rem);         /* H1 standard */
  --fs-h2:        clamp(1.65rem, 3vw, 2.4rem);    /* H2 */
  --fs-h3:        clamp(1.25rem, 2vw, 1.5rem);    /* H3 */
  --fs-h4:        1.125rem;
  --fs-lead:      clamp(1.05rem, 1.4vw, 1.2rem);  /* lead paragraphs */
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-micro:     0.75rem;

  /* ===== Layout ===== */
  --wrap:         1240px;
  --wrap-narrow:  880px;
  --wrap-prose:   720px;
  --wrap-wide:    1440px;
  --gutter:       24px;
  --gutter-lg:    32px;

  /* ===== Échelle d'espacement (multiplicatif ×4) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 120px;

  /* ===== Rayons ===== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ===== Ombres (teinte bleue de marque) ===== */
  --shadow-xs: 0 1px 2px rgba(10, 79, 135, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 79, 135, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 79, 135, 0.10);
  --shadow-lg: 0 18px 48px rgba(10, 79, 135, 0.14);
  --shadow-xl: 0 32px 80px rgba(10, 79, 135, 0.18);

  /* ===== Transitions ===== */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast:       150ms;
  --t-base:       220ms;
  --t-slow:       400ms;

  /* ===== Z-index (échelle progressive) ===== */
  --z-base:        1;
  --z-sticky:      10;
  --z-header:      50;
  --z-sticky-cta:  60;
  --z-cookie:      70;
  --z-modal-back:  80;
  --z-modal:       90;
  --z-toast:       100;

  /* ===== Breakpoints (référence pour @media) =====
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
  */
}