/* ==========================================================
   PaaS vitrine v2 — Design Tokens
   Dark Cyberpunk Premium · cible Direction technique (CTO/CISO)
   Tous les autres fichiers CSS héritent ces tokens via var()
   ========================================================== */

:root{
  /* ---------- COULEURS · brand ---------- */
  /* Cyber Premium (Vercel/Linear) — ink blue profond, indigo/cyan doux */
  --c-bg:           #070B14;            /* void / page background */
  --c-bg-elev:      #0B1120;            /* elevated surface (cards lvl 2) */
  --c-surface:      #0E1524;            /* primary surface (cards) */
  --c-surface-2:    #131C30;            /* hover / nested surface */
  --c-surface-3:    #1A2540;            /* highest elev */

  /* Accents */
  --c-cyan:         #6EE7FF;            /* primary accent — cyan adouci */
  --c-cyan-soft:    #7DA8FF;            /* gradient mid-stop */
  --c-violet:       #818CF8;            /* secondary accent — indigo premium */
  --c-violet-soft:  #A5B4FC;            /* gradient mid-stop */
  --c-green:        #34D399;            /* success / live state */
  --c-amber:        #FFB454;            /* warning */
  --c-red:          #FF5577;            /* critical / danger */

  /* Texte */
  --c-text:         #F5F7FB;            /* primary text */
  --c-text-strong:  #FFFFFF;            /* headlines / max contrast */
  --c-text-body:    #C7D0E0;            /* body copy */
  --c-text-muted:   #8B94AD;            /* labels, captions, mono */
  --c-text-faint:   #5A6379;            /* placeholders, disabled */

  /* Bordures */
  --c-border:       rgba(148,163,255,0.10);
  --c-border-strong:rgba(129,140,248,0.28);
  --c-border-violet:rgba(129,140,248,0.24);
  --c-border-hover: rgba(110,231,255,0.45);

  /* ---------- GRADIENTS ---------- */
  --g-brand:        linear-gradient(110deg,#6EE7FF 0%,#7DA8FF 45%,#818CF8 100%);
  --g-cta:          linear-gradient(135deg,#5B8DEF 0%,#7C6CF6 100%);
  --g-cta-hover:    linear-gradient(135deg,#6E9CFF 0%,#8B7BFF 100%);
  --g-surface:      linear-gradient(180deg,rgba(14,21,36,0.82),rgba(11,17,32,0.72));
  --g-glass:        linear-gradient(180deg,rgba(14,21,36,0.78),rgba(11,17,32,0.62));
  --g-text:         linear-gradient(110deg,#F5F7FB 0%,#C7D0E0 100%);

  /* ---------- OMBRES & GLOW ---------- */
  /* Halos MAÎTRISÉS — diffusion douce colorée, plus de néon fluo */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:      0 24px 60px rgba(0,0,0,0.45);
  --shadow-cta:     0 1px 0 rgba(255,255,255,0.08) inset,
                    0 10px 30px rgba(91,141,239,0.28),
                    0 2px 8px rgba(0,0,0,0.35);
  --shadow-cta-h:   0 1px 0 rgba(255,255,255,0.12) inset,
                    0 16px 44px rgba(124,108,246,0.38),
                    0 4px 12px rgba(0,0,0,0.4);
  --shadow-card:    0 12px 40px rgba(0,0,0,0.45),
                    0 0 0 1px rgba(148,163,255,0.06);
  --shadow-card-h:  0 20px 60px rgba(0,0,0,0.55),
                    0 0 0 1px rgba(129,140,248,0.30),
                    0 0 40px rgba(129,140,248,0.10);

  --glow-cyan:      0 0 10px rgba(110,231,255,0.30);
  --glow-violet:    0 0 10px rgba(129,140,248,0.30);
  --glow-green:     0 0 8px rgba(52,211,153,0.40);

  /* ---------- TYPOGRAPHIE ---------- */
  --ff-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-display:     'Space Grotesk', 'Inter', sans-serif;
  --ff-mono:        'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* Tailles (échelle modulaire 1.25) */
  --fs-xs:          12px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          20px;
  --fs-xl:          24px;
  --fs-2xl:         30px;
  --fs-3xl:         38px;
  --fs-4xl:         48px;
  --fs-5xl:         60px;
  --fs-6xl:         76px;
  --fs-7xl:         92px;

  /* Tracking */
  --tracking-tight: -0.034em;
  --tracking-snug:  -0.02em;
  --tracking-normal:0;
  --tracking-mono:  0.06em;
  --tracking-wide:  0.18em;

  /* Line heights */
  --lh-tight:       1.04;
  --lh-snug:        1.2;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;

  /* ---------- ESPACEMENT (échelle 4px) ---------- */
  --sp-0:           0;
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-7:           32px;
  --sp-8:           40px;
  --sp-9:           48px;
  --sp-10:          64px;
  --sp-11:          80px;
  --sp-12:          96px;
  --sp-13:          120px;
  --sp-14:          160px;

  /* ---------- RAYONS ---------- */
  --r-xs:           4px;
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           14px;
  --r-xl:           20px;
  --r-2xl:          28px;
  --r-full:         9999px;

  /* ---------- TRANSITIONS ---------- */
  --t-fast:         120ms cubic-bezier(.4,0,.2,1);
  --t-base:         200ms cubic-bezier(.4,0,.2,1);
  --t-slow:         360ms cubic-bezier(.22,1,.36,1);
  --t-spring:       420ms cubic-bezier(.34,1.56,.64,1);

  /* ---------- Z-INDEX ---------- */
  --z-bg:           0;
  --z-base:         1;
  --z-elevated:     10;
  --z-overlay:      100;
  --z-modal:        1000;
  --z-toast:        2000;

  /* ---------- CONTENU ---------- */
  --max-content:    1240px;
  --max-prose:      720px;
  --header-h:       72px;
}

/* Préfère couleur claire si OS le demande, mais on reste dark by design (produit B2B technique) */
@media (prefers-color-scheme: light){
  :root{
    /* on conserve dark — pas de light theme dans cette refonte */
  }
}