/*
 * Branding CSS Variables.
 *
 * Values are injected dynamically from layout.html
 * via Jinja2 from the `brand` context object.
 *
 * This file defines ONLY the variable declarations
 * and derived semantic variables. Actual values come
 * from the <style> block in layout.html.
 *
 * Usage in other CSS files:
 *   background: var(--brand-primary);
 *   color: var(--brand-text);
 *   font-family: var(--brand-font-heading);
 */

/* ── Derived semantic variables ─────────────── */
:root {
  /* Surfaces */
  --brand-surface: #ffffff;
  --brand-surface-alt: #f4f5f9;
  --brand-card: #ffffff;

  /* Text */
  --brand-text: #111827;
  --brand-text-muted: #6b7280;

  /* Borders */
  --brand-border: rgba(0, 0, 0, 0.06);

  /* Glow (transparent accent for hover/focus) */
  --brand-glow: rgba(102, 126, 234, 0.10);

  /* Radii */
  --brand-radius: 0.85rem;
  --brand-radius-sm: 0.55rem;

  /* Gradient */
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-accent)
  );
}

/* ── Font application ──────────────────────── */
body {
  font-family: var(--brand-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--brand-font-heading);
}

/* ── Dark mode overrides ────────────────────── */
[data-bs-theme="dark"] {
  --brand-surface: #0f1117;
  --brand-surface-alt: #1a1d24;
  --brand-card: #181b23;

  --brand-text: #e5e7eb;
  --brand-text-muted: #7b8394;

  --brand-border: rgba(255, 255, 255, 0.07);
  --brand-glow: rgba(102, 126, 234, 0.06);
}