/* ============================================
   DESIGN TOKENS — Didier Charton Portfolio
   ============================================ */

:root {
  /* Couleurs principales */
  --color-primary:        #1a365d;   /* Bleu foncé — titres, header */
  --color-accent:         #2b6cb0;   /* Bleu moyen — liens, boutons actifs */
  --color-accent-hover:   #1e4e8c;   /* Bleu foncé au hover */

  /* Fond et surfaces */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f8f9fa;   /* Sections alternées */
  --color-bg-dark:        #1a365d;   /* Footer */

  /* Texte */
  --color-text:           #2d3748;
  --color-text-light:     #718096;
  --color-text-inv:       #ffffff;

  /* Bordures */
  --color-border:         #e2e8f0;
  --color-border-dark:    #cbd5e0;

  /* Feedback */
  --color-pdf:            #c0392b;   /* Rouge icône PDF */

  /* Typographie */
  --font-base: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  2rem;       /* 32px */
  --font-size-4xl:  2.5rem;     /* 40px */
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espacements */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* Layout */
  --container-max: 1200px;
  --header-height: 64px;

  /* Bordures arrondies */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Breakpoints (pour documentation, usage via media queries) */
  /* --bp-sm: 640px, --bp-md: 768px, --bp-lg: 1024px, --bp-xl: 1280px */
}