/**
 * Flik brand design tokens.
 * Single source of truth for colors, typography, and spacing across all templates.
 * Brand: International Orange primary, amber accent, soft warm gradient.
 * Typography: Google Sans Flex (loaded via link in each template head).
 */
:root {
  /* Typography */
  --flik-font: "Google Sans Flex", system-ui, -apple-system, sans-serif;

  /* Primary & accent */
  --flik-primary: #e65100;
  --flik-primary-hover: #bf360c;
  --flik-accent: #f59e0b;
  --flik-accent-soft: rgba(245, 158, 11, 0.15);

  /* Surfaces & borders */
  --flik-hero-bg: #ffffff;
  --flik-hero-border: rgba(230, 81, 0, 0.25);
  --flik-bg: linear-gradient(160deg, #fff7ed 0%, #ffedd5 40%, #fef3c7 100%);
  --flik-nav-bg: #fafafa;
  --flik-nav-border: #eee;
  --flik-card-bg: #fff;
  --flik-border: #e5e7eb;
  --flik-border-light: #eee;

  /* Text */
  --flik-text: #1c1917;
  --flik-text-muted: #9a3412;
  --flik-text-secondary: #6b7280;
  --flik-text-tertiary: #9ca3af;

  /* Interactive (nav, buttons, tabs) */
  --flik-nav-text: #374151;
  --flik-nav-hover: #eee;
  --flik-nav-active-bg: rgba(230, 81, 0, 0.12);
  --flik-nav-active-text: var(--flik-primary);

  /* Shadows */
  --flik-shadow: 0 25px 50px -12px rgba(230, 81, 0, 0.15);
  --flik-shadow-hover: 0 25px 50px -12px rgba(230, 81, 0, 0.25);
  --flik-btn-shadow: 0 4px 14px rgba(230, 81, 0, 0.4);
  --flik-btn-shadow-hover: 0 6px 20px rgba(230, 81, 0, 0.5);

  /* Radii */
  --flik-radius-sm: 4px;
  --flik-radius: 0.75rem;
  --flik-radius-lg: 1.75rem;
  --flik-radius-full: 9999px;
}