/*
  Froggy FORGE — jetons de design web (couleurs, typographies, rayons, ombres)
  Hérite de froggy-tokens.css (Froggy Network) : Ink, Green, statut, rayons, ombres inchangés.
  Ajoute Spark (accent gaming) et Steel (variante matérielle/pro), et Rajdhani en police de
  titre. Voir DIRECTION.md et 00_Charte-graphique-Froggy-FORGE.html pour la documentation
  complète.
*/

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

:root {
  /* Encre & fonds — hérités de Froggy Network */
  --ink: #0a1f14;
  --ink-2: #1e3a2a;
  --ink-3: #4a6b58;
  --ink-on-dark: #f4faf6;
  --ink-on-dark-2: #c8dfd2;
  --ink-on-dark-3: #7e9c8b;
  --bg: #f4faf6;
  --bg-card: #ffffff;
  --bg-dark: #0a1f14;

  /* Vert Froggy — hérité, ancre d'identité */
  --green: #22c55e;
  --green-2: #15803d;
  --green-3: #4ade80;
  --green-soft: #dcfce7;
  --green-glow: rgba(34, 197, 94, .35);

  /* Spark — NEUF Froggy FORGE, accent gaming exclusif */
  --spark: #ff5a1f;
  --spark-soft: #ffe1d1;
  --spark-glow: rgba(255, 90, 31, .40);

  /* Steel — NEUF Froggy FORGE, variante matérielle/pro */
  --steel: #8b98a5;
  --steel-dark: #1c242b;
  --steel-light: #e7ecef;

  /* Cyan — hérité */
  --cyan: #6ec1e4;
  --cyan-2: #0ea5e9;
  --cyan-soft: #cffafe;

  /* Statut — hérité */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #6ec1e4;

  /* Filets — hérités */
  --rule: rgba(10, 31, 20, .10);
  --rule-strong: rgba(10, 31, 20, .22);
  --rule-on-dark: rgba(244, 250, 246, .10);

  /* Ombres — héritées, + variante glow Spark */
  --shadow-sm: 0 1px 2px rgba(10, 31, 20, .04);
  --shadow-md: 0 1px 2px rgba(10, 31, 20, .04), 0 8px 24px rgba(10, 31, 20, .06);
  --shadow-lg: 0 1px 2px rgba(10, 31, 20, .04), 0 12px 30px -14px rgba(10, 31, 20, .12);
  --shadow-cta: 0 22px 54px -20px rgba(34, 197, 94, .545),
                inset 0 1px 0 rgba(255, 255, 255, .125);
  --shadow-cta-spark: 0 22px 54px -20px rgba(255, 90, 31, .5),
                      inset 0 1px 0 rgba(255, 255, 255, .125);
  --shadow-dark: 0 18px 40px -22px rgba(0, 0, 0, .7),
                 inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Rayons — hérités, 3 rayons + pill */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Typos — Rajdhani neuve pour les titres, Geist/JetBrains Mono hérités */
  --f-display: "Rajdhani", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Substituts Office (PPTX / DOCX — pas d'embed) */
  /* --f-display-office: "Segoe UI Semibold", Calibri, sans-serif; */
  /* --f-sans-office: Calibri, "Trebuchet MS", sans-serif; */
  /* --f-mono-office: Consolas, "Courier New", monospace; */
}

/* Règles d'accessibilité CTA (WCAG AA) */
.btn-primary { color: #061a0d; } /* Ratio 7.94:1 sur #22C55E · AAA */
.btn-spark { color: #1c0a00; } /* Extension de la règle CTA à l'accent Spark */

/* Titres — utiliser Rajdhani, réservé aux titres/wordmark/chiffres, jamais au corps */
h1, h2, h3, .display, .metric {
  font-family: var(--f-display);
  font-weight: 700;
}

/* Motif de marque — dot-grid hérité, + variante Spark pour contextes gaming assumés */
.pattern-dark {
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(110, 193, 228, .35) 1.5px, transparent 2px);
  background-size: 24px 24px;
}
.pattern-light {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(34, 197, 94, .18) 1.5px, transparent 2px);
  background-size: 20px 20px;
}
.pattern-spark {
  /* À réserver aux contextes gaming assumés (site vitrine, communication) — jamais aux
     documents pro (cf. DIRECTION.md, tableau des usages). */
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(255, 90, 31, .30) 1.5px, transparent 2px);
  background-size: 24px 24px;
}