/* ═══════════════════════════════════════════
   Living Essence — Brand Kit CSS
   Generated 2026-03-11
   ═══════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --le-primary: #0c191d;
  --le-secondary: #156884;
  --le-accent: #0ec0fc;
  --le-muted: #91d3e9;
  --le-bg: #f1f7f8;

  /* ── RGB variants (for rgba() usage) ── */
  --le-primary-rgb: 12, 25, 29;
  --le-secondary-rgb: 21, 104, 132;
  --le-accent-rgb: 14, 192, 252;
  --le-muted-rgb: 145, 211, 233;
  --le-bg-rgb: 241, 247, 248;

  /* ── Typography ── */
  --le-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --le-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Spacing Scale (base 4px) ── */
  --le-space-1: 4px;
  --le-space-2: 8px;
  --le-space-3: 12px;
  --le-space-4: 16px;
  --le-space-6: 24px;
  --le-space-8: 32px;
  --le-space-12: 48px;
  --le-space-16: 64px;
  --le-space-24: 96px;

  /* ── Border Radius ── */
  --le-radius-sm: 4px;
  --le-radius-md: 8px;
  --le-radius-lg: 12px;
  --le-radius-xl: 20px;
  --le-radius-full: 9999px;

  /* ── Shadows ── */
  --le-shadow-sm: 0 1px 2px rgba(var(--le-primary-rgb), 0.05);
  --le-shadow-md: 0 4px 12px rgba(var(--le-primary-rgb), 0.08);
  --le-shadow-lg: 0 8px 24px rgba(var(--le-primary-rgb), 0.12);
  --le-shadow-xl: 0 16px 48px rgba(var(--le-primary-rgb), 0.16);

  /* ── Transitions ── */
  --le-transition-fast: 150ms ease;
  --le-transition-base: 250ms ease;
  --le-transition-slow: 400ms ease;
}