/* ==========================================================================
   CyberRP — theme.css
   Direction graphique « Signal Night City ».

   CE FICHIER EST LE SEUL POINT DE VÉRITÉ DU THÈME.
   Il ne contient QUE :
     1. les imports de polices Google Fonts ;
     2. des variables CSS (design tokens).

   base.css et components.css ne référencent que ces variables.
   Changer de direction graphique = remplacer ce seul fichier.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=Rajdhani:wght@400;500;600&display=swap');

:root {
  /* ---- Couleurs de la charte (valeurs exactes, ne pas dériver) ---------- */
  --bg: #0D0D0F;          /* fond de page */
  --surface: #1A1A21;     /* cartes, panneaux */
  --text: #F2F2F2;        /* texte principal */
  --text-muted: #8A8A93;  /* texte secondaire */
  --accent: #F5E003;      /* jaune électrique — accent principal */
  --accent-2: #03D8F3;    /* cyan — liens, accents secondaires */
  --alert: #C5003C;       /* rouge — erreurs, avertissements */
  --border: #2A2A33;      /* bordures */

  /* ---- Couleurs dérivées (transparences des tokens ci-dessus) ----------- */
  --bg-voile: rgba(13, 13, 15, 0.88);
  --surface-haut: rgba(242, 242, 242, 0.04);
  --accent-voile: rgba(245, 224, 3, 0.12);
  --accent-2-voile: rgba(3, 216, 243, 0.12);
  --alert-voile: rgba(197, 0, 60, 0.16);
  --ombre: 0 18px 40px rgba(0, 0, 0, 0.55);
  --ombre-douce: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* ---- Typographie ------------------------------------------------------ */
  --font-display: 'Orbitron', 'Segoe UI', 'Trebuchet MS', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --poids-titre: 700;
  --poids-titre-2: 600;
  --poids-texte: 400;
  --poids-texte-fort: 600;

  --taille-xs: 0.8125rem;
  --taille-sm: 0.9375rem;
  --taille-base: 1.0625rem;
  --taille-md: 1.1875rem;
  --taille-lg: 1.5rem;
  --taille-xl: 2rem;
  --taille-2xl: 2.5rem;
  --taille-hero: clamp(2.4rem, 8vw, 4.75rem);
  --taille-section: clamp(1.6rem, 4.5vw, 2.4rem);

  --interligne: 1.65;
  --interligne-titre: 1.1;
  --interlettre-titre: 0.06em;
  --interlettre-sur-titre: 0.28em;

  /* ---- Rythme et gabarit ------------------------------------------------ */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --esp-9: 6.5rem;

  --largeur-max: 1180px;
  --largeur-texte: 74ch;
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);

  /* ---- Motifs « Signal Night City » ------------------------------------- */
  --coupe: 14px;          /* taille de l'angle coupé (clip-path) */
  --coupe-sm: 8px;
  --epaisseur-filet: 1px;
  --rayon: 0px;           /* la charte refuse les arrondis */

  /* Angles coupés : coin haut-droit + coin bas-gauche */
  --clip-coupe: polygon(
    0 0,
    calc(100% - var(--coupe)) 0,
    100% var(--coupe),
    100% 100%,
    var(--coupe) 100%,
    0 calc(100% - var(--coupe))
  );
  --clip-coupe-sm: polygon(
    0 0,
    calc(100% - var(--coupe-sm)) 0,
    100% var(--coupe-sm),
    100% 100%,
    var(--coupe-sm) 100%,
    0 calc(100% - var(--coupe-sm))
  );

  /* Hachures diagonales jaune/noir — séparateurs de section */
  --hachures: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 14px,
    var(--bg) 14px 28px
  );
  --hachures-epaisseur: 10px;

  /* Scanlines très subtiles — réservées au hero */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(242, 242, 242, 0.045) 0 1px,
    transparent 1px 4px
  );
  --scanlines-opacite: 0.55;

  /* Grille de fond discrète */
  --grille-fond:
    linear-gradient(to right, rgba(42, 42, 51, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 42, 51, 0.55) 1px, transparent 1px);
  --grille-pas: 64px;

  /* ---- Mouvement -------------------------------------------------------- */
  --transition-rapide: 120ms ease-out;
  --transition: 200ms ease-out;
  --transition-lente: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --glitch-duree: 420ms;

  /* ---- Focus ------------------------------------------------------------ */
  --focus-couleur: var(--accent-2);
  --focus-epaisseur: 3px;
  --focus-decalage: 3px;
}