/**
 * MyKarfour — Charte graphique (source unique des tokens)
 * Documentation : docs/CHARTE_GRAPHIQUE.md
 */

:root {
  /* ── Couleurs marque ── */
  --mk-primary: #0EA7A7;
  --mk-primary-dark: #0c8f8f;
  --mk-primary-darker: #0c8c8c;
  --mk-primary-deep: #0c6f6f;
  --mk-primary-alt: #0A7A7A;

  --mk-secondary: #FACC15;
  --mk-secondary-ui: #F59E0B;
  --mk-secondary-dark: #d97706;

  /* ── Surfaces & teintes ── */
  --mk-primary-light: rgba(14, 167, 167, 0.1);
  --mk-primary-muted: rgba(14, 167, 167, 0.06);
  --mk-primary-soft: rgba(14, 167, 167, 0.04);
  --mk-primary-border: rgba(14, 167, 167, 0.28);
  --mk-primary-border-strong: rgba(14, 167, 167, 0.35);
  --mk-primary-shadow: rgba(14, 167, 167, 0.12);
  --mk-primary-shadow-lg: rgba(14, 167, 167, 0.3);

  --mk-secondary-bubble-bg: #fff7d6;
  --mk-secondary-bubble-border: rgba(250, 204, 21, 0.55);

  /* ── Texte ── */
  --mk-text: #1f2937;
  --mk-text-muted: #6b7280;
  --mk-text-on-primary: #ffffff;

  /* ── Typographie ── */
  --mk-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --mk-font-weight-normal: 400;
  --mk-font-weight-semibold: 600;
  --mk-font-weight-bold: 700;

  /* ── Rayons & ombres ── */
  --mk-radius-sm: 0.375rem;
  --mk-radius-md: 0.5rem;
  --mk-radius-lg: 0.75rem;
  --mk-radius-xl: 1.05rem;
  --mk-radius-full: 9999px;
  --mk-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --mk-shadow-md: 0 4px 12px var(--mk-primary-shadow);

  /* ── Transitions ── */
  --mk-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Alias rétrocompatibilité (base.html, admin) */
  --primary: var(--mk-primary);
  --primary-dark: var(--mk-primary-dark);
  --secondary: var(--mk-secondary-ui);
  --secondary-dark: var(--mk-secondary-dark);
  --primary-light: var(--mk-primary-light);
}

/* ── Utilitaires site public ── */
.bg-primary { background-color: var(--mk-primary); }
.bg-primaryDark { background-color: var(--mk-primary-dark); }
.text-primary { color: var(--mk-primary); }
.text-primary-deep { color: var(--mk-primary-deep); }
.border-primary { border-color: var(--mk-primary); }
.bg-secondary { background-color: var(--mk-secondary); }
.bg-secondary-ui { background-color: var(--mk-secondary-ui); }
.text-secondary { color: var(--mk-secondary); }

.hover\:bg-primaryDark:hover { background-color: var(--mk-primary-dark); }
.hover\:text-primaryDark:hover { color: var(--mk-primary-darker); }

.from-primary { --tw-gradient-from: var(--mk-primary); }
.to-secondary { --tw-gradient-to: var(--mk-secondary-ui); }

/* Classes Tailwind arbitraires déjà utilisées dans les templates */
.bg-\[\#0EA7A7\] { background-color: var(--mk-primary); }
.hover\:bg-\[\#0c8f8f\]:hover { background-color: var(--mk-primary-dark); }
.text-\[\#0EA7A7\] { color: var(--mk-primary); }
.text-\[\#0c8f8f\] { color: var(--mk-primary-dark); }
.text-\[\#FACC15\] { color: var(--mk-secondary); }
.bg-\[\#FACC15\] { background-color: var(--mk-secondary); }
.border-\[\#0EA7A7\] { border-color: var(--mk-primary); }

/* Bouton primaire réutilisable */
.mk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--mk-radius-md);
  background-color: var(--mk-primary);
  color: var(--mk-text-on-primary);
  font-weight: var(--mk-font-weight-semibold);
  transition: background-color var(--mk-transition);
}
.mk-btn-primary:hover {
  background-color: var(--mk-primary-dark);
}

.mk-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--mk-radius-md);
  background-color: var(--mk-secondary);
  color: var(--mk-text);
  font-weight: var(--mk-font-weight-semibold);
  transition: background-color var(--mk-transition);
}

/* Badges admin (référence pour admin_modern.css) */
.mk-badge-teal {
  background: rgba(14, 167, 167, 0.15);
  color: var(--mk-primary-deep);
}
.mk-icon-teal { background: var(--mk-primary); }
.mk-icon-amber { background: var(--mk-secondary-ui); }