/* ─── Brand tokens (canonical) ─────────────────────────────────────────────
   Single source of truth for every brand color, surface, and text tone.
   Pages MUST use these vars instead of hardcoded hex. The --kounet-* and
   --primary-* names below are aliases kept for backward-compat while
   existing CSS migrates over.

   Loaded globally from both styles.html (admin) and styles_front.html
   (public). Component classes live in app-components.css. */
:root {
  /* Brand color ramp */
  --brand-primary: #008080;
  --brand-primary-dark: #006666;
  --brand-primary-light: #e7f5f5;
  --brand-primary-soft: rgba(0, 128, 128, 0.1);

  /* Neutral surfaces & borders */
  --brand-border: #e9ecef;
  --brand-border-hover: #d0d5dd;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f8f9fa;
  --brand-surface-hover: #f8f9fa;
  --brand-divider: #f1f3f5;

  /* Text tones */
  --brand-text-heading: #2c3e50;
  --brand-text-body: #566a7f;
  --brand-text-muted: #697a8d;
  --brand-text-subtle: #a1acb8;

  /* Status colors (used in status badges / inline state hints) */
  --brand-success: #16a34a;
  --brand-warning: #f59e0b;
  --brand-danger: #dc2626;
  --brand-info: #3b82f6;

  /* Radius scale */
  --brand-radius-sm: 0.5rem;
  --brand-radius: 0.75rem;
  --brand-radius-lg: 0.875rem;

  /* ─── Aliases (kept until full migration is done) ─────────────────────── */
  --kounet-primary: var(--brand-primary);
  --kounet-primary-soft: var(--brand-primary-soft);
  --kounet-border: var(--brand-border);
  --kounet-border-hover: var(--brand-border-hover);
  --kounet-surface-hover: var(--brand-surface-hover);
  --kounet-text-muted: var(--brand-text-muted);
  --kounet-text-heading: var(--brand-text-heading);

  --primary-color: var(--brand-primary);
  --primary-light: var(--brand-primary-light);
  --primary-dark: var(--brand-primary-dark);
}