/* ==========================================================================
   SENTINELLE — Design Tokens
   Direction : terminal réel (inspiration Gruvbox), pas de néon générique.
   À importer/référencer tel quel dans le design system du site.
   ========================================================================== */

:root {
  /* Couleurs — fond */
  --bg: #1d2021;            /* fond principal, brun-gris chaud très sombre */
  --bg-surface: #282828;    /* cartes, fenêtres terminal */
  --bg-elevated: #32302f;   /* barres de titre, éléments au-dessus de surface */

  /* Couleurs — texte */
  --fg: #ebdbb2;            /* texte principal, blanc cassé chaud */
  --fg-muted: #a89984;      /* texte secondaire */
  --fg-dim: #7c6f64;        /* texte tertiaire, légendes, timestamps */

  /* Couleurs — accents */
  --amber: #fe8019;         /* accent principal : CTA, liens actifs, focus */
  --amber-dim: #d65d0e;     /* variante foncée (hover, ombre portée nette) */
  --green: #b8bb26;         /* succès, bonnes réponses, indicateur "live" */
  --red: #fb4934;           /* erreurs, mauvaises réponses */
  --yellow: #fabd2f;        /* avertissement / accent secondaire (ex: dot terminal) */

  /* Bordures */
  --border: #3c3836;        /* bordure standard, 1px, jamais d'ombre floue à la place */

  /* Typographie */
  --font-mono: 'JetBrains Mono', monospace;   /* nav, prompts, boutons, data, labels */
  --font-sans: 'Space Grotesk', sans-serif;   /* corps de texte, paragraphes */

  /* Échelle typographique (rem, base 16px) */
  --text-xs: 0.75rem;    /* 12px — timestamps, fineprint */
  --text-sm: 0.8125rem;  /* 13px — nav, boutons */
  --text-base: 1rem;     /* 16px — corps */
  --text-lg: 1.0625rem;  /* 17px — sous-titre hero */
  --text-xl: 1.5rem;     /* 24px — titres de section (mobile) */
  --text-2xl: 2rem;      /* 32px — titres de section */
  --text-hero: clamp(2rem, 5vw, 3.25rem); /* titre principal */

  /* Rayons — volontairement quasi nuls, esprit terminal/CLI */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-full: 50%;   /* réservé aux dots de statut uniquement */

  /* Ombres — bannies au profit de bordures nettes.
     Seule exception tolérée : profondeur du panneau terminal en hero. */
  --shadow-terminal: 0 20px 60px -20px rgba(0, 0, 0, 0.6);

  /* Espacement (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;

  /* Interlignage */
  --leading-tight: 1.12;
  --leading-normal: 1.5;
}

/* ==========================================================================
   RÈGLES D'USAGE — à respecter pour rester cohérent avec la direction validée
   ==========================================================================

   1. INTERDITS
      - Pas de gradient bleu/violet type SaaS générique.
      - Pas de box-shadow floue sur les cartes/boutons (utiliser --border à la place).
      - Pas de border-radius > 0 sauf sur les dots de statut (--radius-full).
      - Pas de vert néon pur (#00ff00 ou équivalent) : rester sur --green (#b8bb26),
        plus terreux, cohérent avec la palette.

   2. TYPOGRAPHIE
      - --font-mono : tout ce qui est "système" — nav, prompts, boutons, labels,
        données chiffrées (ports, timestamps, code).
      - --font-sans : uniquement le texte courant / paragraphes de contenu.
      - Ne jamais mélanger : un titre de section en sans peut avoir un eyebrow
        en mono au-dessus, mais un même bloc de texte ne change pas de police.

   3. COULEUR SÉMANTIQUE
      - --green : réservé aux états de succès / bonnes réponses / indicateurs "actif".
      - --red : réservé aux erreurs / mauvaises réponses.
      - --amber : accent d'action (CTA, liens, focus, hover). Ne pas l'utiliser
        pour du texte informatif neutre.

   4. STRUCTURE
      - Les marqueurs de séquence (numéros, puces) doivent porter un sens réel
        (timestamp, étape temporelle, log) — jamais un simple 01/02/03 décoratif.
      - Bordures 1px --border partout où un séparateur est nécessaire.

   5. ACCESSIBILITÉ (non négociable)
      - Contraste texte/fond conforme AA minimum (vérifier --fg-dim sur --bg,
        c'est la paire la plus faible du système).
      - Focus clavier toujours visible : outline 2px solid var(--amber), offset 2px.
      - Respecter prefers-reduced-motion pour toute animation (curseur clignotant,
        typing effect, scroll reveal).
*/