/* Design Tokens - Bali Kids v0.2 */
/* Based on brand-guidelines skill */

:root {
  /* Accent Colour - Utility Blue */
  /* ONLY used for: selected filters, primary buttons, links, focus states, active tabs */
  /* NEVER used for: card backgrounds, decorative elements, badges, session blocks */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft: #EFF6FF;

  /* Neutral Surfaces */
  --surface-1: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;

  /* Borders */
  --border: #e5e7eb;
  --border-subtle: #f0f0f0;

  /* Text */
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;

  /* Spacing Scale (deterministic - only these values) */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border Radius */
  --radius-card: 12px;
  --radius-button: 10px;
  --radius-chip: 9999px;

  /* Typography */
  --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.2s ease;
}