/* kryble — design tokens
   Généré à partir de la charte graphique kryble (v1, 17/09/2026)
   À importer dans le CSS global de l'application. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* Couleurs de marque */
  --kryble-ink: #1B2735;      /* ardoise — texte principal, fonds sombres */
  --kryble-paper: #F7F5F1;    /* blanc cassé — fond clair */
  --kryble-accent: #D98526;   /* ambre — accent, CTA, prospect qualifié */
  --kryble-muted: #6B7280;    /* gris — texte secondaire */
  --kryble-border: #E3DFD6;   /* gris chaud — bordures, séparateurs */

  /* Typographie */
  --kryble-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --kryble-font-body: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;

  /* Rayon / spacing de base (cohérent avec les cartes du logo) */
  --kryble-radius-sm: 8px;
  --kryble-radius-md: 12px;
  --kryble-radius-lg: 18px;
}

/* Variante sombre : mêmes tokens, rôles inversés */
[data-theme="dark"] {
  --kryble-ink: #F7F5F1;
  --kryble-paper: #1B2735;
  --kryble-border: #2C3A4D;
}

.kryble-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kryble-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--kryble-ink);
}
.kryble-logo svg { height: 1.6em; width: auto; }