/* =========================================================================
   Design system SEOscope, couche 1 : jetons
   =========================================================================
   Aucune règle de composant ici, uniquement des valeurs.

   Ce fichier est autonome et ne décrit que SEOscope. Les identités des autres
   agents vivent dans leur propre projet.

   Pour changer l'identité visuelle, il suffit de toucher au bloc « Identité »
   ci-dessous : quatre variables commandent l'ensemble de l'interface.
   ========================================================================= */

:root {
  /* ---- Palette neutre ------------------------------------------------- */
  --l2bg-ink-950: #0a0d14;
  --l2bg-ink-900: #11151f;
  --l2bg-ink-800: #1a2030;
  --l2bg-ink-700: #262e42;
  --l2bg-ink-600: #3a4459;
  --l2bg-ink-500: #5c6880;
  --l2bg-ink-400: #8792a8;
  --l2bg-ink-300: #b4bdcd;
  --l2bg-ink-200: #d8dee8;
  --l2bg-ink-100: #eef1f6;
  --l2bg-ink-50:  #f7f9fc;
  --l2bg-white:   #ffffff;

  /* ---- Couleurs sémantiques ------------------------------------------ */
  /* Volontairement désaturées par rapport aux rouges et verts par défaut :
     un rapport d'audit affiche beaucoup de pastilles, des couleurs criardes
     rendent la lecture fatigante. */
  --l2bg-critical:     #d3352f;
  --l2bg-critical-bg:  #fdf0ef;
  --l2bg-warning:      #b8730a;
  --l2bg-warning-bg:   #fdf6e9;
  --l2bg-success:      #1a7a52;
  --l2bg-success-bg:   #edf7f2;
  --l2bg-info:         #2563c9;
  --l2bg-info-bg:      #eef3fd;

  /* ---- Couleurs de score ---------------------------------------------- */
  /* Jeu distinct des couleurs sémantiques, et c'est volontaire. Les couleurs
     sémantiques servent à des dizaines de petites pastilles dans un rapport
     long : elles doivent rester sobres pour ne pas fatiguer. Les couleurs de
     score servent à un seul grand aplat, la jauge, où la lisibilité vient de
     la saturation. Ne pas mélanger les deux jeux. */
  --l2bg-score-good: #10c97f;
  --l2bg-score-mid:  #ff9012;
  --l2bg-score-bad:  #f7423a;
  --l2bg-score-none: var(--l2bg-ink-300);

  /* ---- Identité ------------------------------------------------------- */
  /* Les quatre seules variables à modifier pour changer l'identité visuelle. */
  --l2bg-accent:        #6d28d9;
  --l2bg-accent-strong: #5620ad;
  --l2bg-accent-soft:   #f2ecfd;
  --l2bg-accent-ink:    #ffffff;
  --l2bg-gradient: linear-gradient(135deg, #6d28d9 0%, #1e5eff 100%);

  /* ---- Typographie ---------------------------------------------------- */
  --l2bg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
  --l2bg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                    Consolas, monospace;

  /* Échelle modulaire, ratio 1.2. Assez de niveaux pour hiérarchiser un
     rapport dense, assez peu pour rester cohérent. */
  --l2bg-text-xs:   0.75rem;   /* 12px */
  --l2bg-text-sm:   0.875rem;  /* 14px */
  --l2bg-text-base: 1rem;      /* 16px */
  --l2bg-text-lg:   1.125rem;  /* 18px */
  --l2bg-text-xl:   1.375rem;  /* 22px */
  --l2bg-text-2xl:  1.75rem;   /* 28px */
  --l2bg-text-3xl:  2.25rem;   /* 36px */
  --l2bg-text-4xl:  3rem;      /* 48px */

  --l2bg-weight-normal: 400;
  --l2bg-weight-medium: 500;
  --l2bg-weight-semi:   600;
  --l2bg-weight-bold:   700;

  --l2bg-leading-tight: 1.2;
  --l2bg-leading-snug:  1.4;
  --l2bg-leading-normal:1.6;
  --l2bg-leading-loose: 1.75;

  /* ---- Espacement, base 4px ------------------------------------------ */
  --l2bg-space-1:  0.25rem;
  --l2bg-space-2:  0.5rem;
  --l2bg-space-3:  0.75rem;
  --l2bg-space-4:  1rem;
  --l2bg-space-5:  1.25rem;
  --l2bg-space-6:  1.5rem;
  --l2bg-space-8:  2rem;
  --l2bg-space-10: 2.5rem;
  --l2bg-space-12: 3rem;
  --l2bg-space-16: 4rem;
  --l2bg-space-20: 5rem;

  /* ---- Rayons --------------------------------------------------------- */
  --l2bg-radius-sm:   6px;
  --l2bg-radius-md:   10px;
  --l2bg-radius-lg:   16px;
  --l2bg-radius-xl:   24px;
  --l2bg-radius-full: 999px;

  /* ---- Ombres --------------------------------------------------------- */
  --l2bg-shadow-xs: 0 1px 2px rgba(10, 13, 20, 0.05);
  --l2bg-shadow-sm: 0 2px 8px rgba(10, 13, 20, 0.06);
  --l2bg-shadow-md: 0 8px 24px rgba(10, 13, 20, 0.08);
  --l2bg-shadow-lg: 0 20px 48px rgba(10, 13, 20, 0.12);
  --l2bg-ring: 0 0 0 3px color-mix(in srgb, var(--l2bg-accent) 25%, transparent);

  /* ---- Mouvement ------------------------------------------------------ */
  --l2bg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --l2bg-duration-fast: 120ms;
  --l2bg-duration-base: 220ms;
  --l2bg-duration-slow: 420ms;

  /* ---- Mise en page --------------------------------------------------- */
  --l2bg-container: 1120px;
  --l2bg-container-narrow: 760px;
  --l2bg-header-height: 64px;

  /* ---- Rôles de surface (thème clair) --------------------------------- */
  --l2bg-bg:            var(--l2bg-ink-50);
  --l2bg-bg-elevated:   var(--l2bg-white);
  --l2bg-bg-sunken:     var(--l2bg-ink-100);
  --l2bg-border:        var(--l2bg-ink-200);
  --l2bg-border-strong: var(--l2bg-ink-300);
  --l2bg-text:          var(--l2bg-ink-900);
  --l2bg-text-muted:    var(--l2bg-ink-500);
  --l2bg-text-subtle:   var(--l2bg-ink-400);
}

/* =========================================================================
   Thème sombre
   Bascule sur les rôles uniquement. Les valeurs de palette ne changent pas,
   ce qui évite d'entretenir deux jeux de couleurs en parallèle.
   ========================================================================= */
:root[data-theme="dark"] {
  --l2bg-bg:            var(--l2bg-ink-950);
  --l2bg-bg-elevated:   var(--l2bg-ink-900);
  --l2bg-bg-sunken:     #06080d;
  --l2bg-border:        var(--l2bg-ink-700);
  --l2bg-border-strong: var(--l2bg-ink-600);
  --l2bg-text:          var(--l2bg-ink-100);
  --l2bg-text-muted:    var(--l2bg-ink-400);
  --l2bg-text-subtle:   var(--l2bg-ink-500);

  /* L'accent doux doit redevenir sombre, sinon il éclaire toute l'interface. */
  --l2bg-accent-soft: #211337;

  --l2bg-critical-bg: #2a1614;
  --l2bg-warning-bg:  #2a2011;
  --l2bg-success-bg:  #10261d;
  --l2bg-info-bg:     #121f38;

  --l2bg-critical: #f07a74;
  --l2bg-warning:  #e5a53c;
  --l2bg-success:  #4fc08d;
  --l2bg-info:     #6fa3f5;

  /* Sur fond sombre, on remonte la luminosité plutôt que la saturation :
     un vert très saturé sur du noir vibre et devient pénible à fixer. */
  --l2bg-score-good: #25e396;
  --l2bg-score-mid:  #ffa63d;
  --l2bg-score-bad:  #ff6259;
  --l2bg-score-none: var(--l2bg-ink-500);

  --l2bg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --l2bg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --l2bg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --l2bg-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   Accessibilité
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --l2bg-duration-fast: 1ms;
    --l2bg-duration-base: 1ms;
    --l2bg-duration-slow: 1ms;
  }
}