/* ============================================================
   VARIABLES.CSS — Design tokens centralisés
   Portfolio Exocé Kalemba | DevOps · Cloud · Automation
   ============================================================ */

:root {

  /* ── Fonds ──────────────────────────────────────────────── */
  --bg-primary:    #0a192f;   /* Fond principal — bleu nuit profond       */
  --bg-secondary:  #112240;   /* Cards, sections alternées                */
  --bg-tertiary:   #1d3461;   /* Hover nav, éléments de profondeur        */
  --bg-terminal:   #0d1117;   /* Fond fenêtre terminal (très sombre)      */
  --bg-terminal-bar: #1e2530; /* Barre de titre du terminal               */

  /* ── Accents DevOps ─────────────────────────────────────── */
  --accent-cyan:   #64ffda;   /* Vert pipeline CI/CD ✓ — couleur phare   */
  --accent-blue:   #3a7bd5;   /* Bleu électrique — boutons, liens         */
  --accent-purple: #9b59b6;   /* Violet — badges, tags secondaires        */
  --accent-green:  #00ff88;   /* Vert terminal — statuts "running"        */
  --accent-yellow: #ffd700;   /* Jaune dot terminal                       */
  --accent-red:    #ff5f57;   /* Rouge dot terminal                       */

  /* ── Texte ──────────────────────────────────────────────── */
  --text-primary:   #ccd6f6;  /* Titres, texte fort                       */
  --text-secondary: #8892b0;  /* Corps de texte courant                   */
  --text-muted:     #4a5568;  /* Placeholders, labels discrets            */
  --text-accent:    #64ffda;  /* Texte accentué (=accent-cyan)            */
  --text-white:     #e6f1ff;  /* Blanc chaud — headings hero              */

  /* ── Bordures ───────────────────────────────────────────── */
  --border-subtle:  rgba(100, 255, 218, 0.07);
  --border-normal:  rgba(100, 255, 218, 0.15);
  --border-active:  rgba(100, 255, 218, 0.45);
  --border-card:    rgba(255, 255, 255, 0.05);

  /* ── Typographie ────────────────────────────────────────── */
  --font-sans: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;

  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-md:   1.125rem;  /*  18px */
  --fs-lg:   1.25rem;   /*  20px */
  --fs-xl:   1.5rem;    /*  24px */
  --fs-2xl:  2rem;      /*  32px */
  --fs-3xl:  2.5rem;    /*  40px */
  --fs-4xl:  3.25rem;   /*  52px */
  --fs-hero: clamp(2.8rem, 6vw, 4.5rem);

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-relaxed:1.8;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Espacement ─────────────────────────────────────────── */
  --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 */
  --section-pad: clamp(4.5rem, 9vw, 7rem);

  /* ── Coins arrondis ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Ombres ─────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 20px rgba(100, 255, 218, 0.12);
  --shadow-glow-blue: 0 0 25px rgba(58, 123, 213, 0.25);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.4),
                  0 0 0 1px rgba(100, 255, 218, 0.05);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max: 1100px;
  --navbar-height: 70px;
  --terminal-font-size: 0.82rem;
}