/* Tokens de Design System yngoufack.org */

:root {
  /* Backgrounds */
  --yn-bg:          #0B0D0F;
  --yn-surface:     #131618;
  --yn-surface-2:   #1A1D22;

  /* Borders */
  --yn-border:      #21262D;
  --yn-border-accent: rgba(0, 212, 161, 0.4);

  /* Accent */
  --yn-accent:      #00D4A1;
  --yn-accent-dim:  rgba(0, 212, 161, 0.10);
  --yn-accent-mid:  rgba(0, 212, 161, 0.22);

  /* Text */
  --yn-text:        #E8EBF0;
  --yn-muted:       #6B7684;
  --yn-label:       #9CA8B6;

  /* Typography */
  --yn-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --yn-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Font weights */
  --yn-fw-400: 400;
  --yn-fw-500: 500;
  --yn-fw-600: 600;
  --yn-fw-700: 700;

  /* Spacing */
  --yn-space-xs: 0.5rem;
  --yn-space-sm: 1rem;
  --yn-space-md: 1.5rem;
  --yn-space-lg: 2rem;
  --yn-space-xl: 2.5rem;
  --yn-space-2xl: 3rem;

  /* Border radius */
  --yn-radius-sm: 6px;
  --yn-radius-md: 10px;
  --yn-radius-lg: 12px;
  --yn-radius-xl: 16px;

  /* Élévation & effets (surchargés par blog-theme.css) */
  --yn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --yn-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --yn-shadow-hover: 0 12px 32px rgba(0, 212, 161, 0.12);
  --yn-wash: linear-gradient(135deg, rgba(0, 212, 161, 0.06), rgba(57, 197, 207, 0.04));
  --yn-border-w: 0.5px;

  /* Largeur de lecture (pages article / projet) */
  --yn-measure: 920px;
}