/* Design Tokens: Knowledge Garden (Phase 1) */
:root {
  /* Color – Core Semantic */
  --color-surface-0: #f8fffe;
  --color-surface-1: #ffffff;
  --color-surface-alt: #f1fbf8;
  --color-surface-accent: #e8f5e8;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-text-primary: #2c3e50;
  --color-text-muted: #666666;
  --color-text-inverse: #ffffff;
  --color-accent: #2d5a27;
  --color-accent-alt: #4a7c59;
  --color-accent-hover: #1e3e1a;
  --color-accent-soft: #eff6f0;
  --color-accent-soft-border: #e0ece3;
  --color-gold: #d4af37;
  --color-gold-soft: #f4e99b;
  --color-danger: #c62828;
  --color-warn: #b6791f;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-alt) 100%);
  --grad-accent-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-accent) 100%);

  /* Typography */
  --font-family-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-size-2xs: 0.625rem; /* 10px */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-md: 1.125rem;  /* 18px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 2rem;     /* 32px */
  --font-size-3xl: 2.5rem;   /* 40px */
  --line-height-tight: 1.15;
  --line-height-base: 1.55;
  --line-height-relaxed: 1.75;

  /* Spacing Scale (4px baseline) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
  --focus-ring: 0 0 0 3px rgba(244, 233, 155, 0.8);

  /* Motion Durations */
  --motion-fast: 120ms;
  --motion-base: 300ms;
  --motion-slow: 600ms;

  /* Transitions */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: var(--motion-base) var(--easing-standard);

  /* Layout */
  --site-max-width: 1200px;
  --nav-height: 70px;
}

/* Legacy variable bridge (Phase 1): map old var names to new tokens to avoid breakage */
:root {
  --kg-bg: var(--color-surface-0);
  --kg-surface: var(--color-surface-1);
  --kg-text: var(--color-text-primary);
  --kg-muted: var(--color-text-muted);
  --kg-border: var(--color-border);
  --kg-green: var(--color-accent);
  --kg-green-700: var(--color-accent-hover);
  --kg-green-300: var(--color-accent-alt);
  --kg-gold: var(--color-gold);
  --kg-gold-200: var(--color-gold-soft);
  --kg-hero-start: var(--color-accent);
  --kg-hero-end: var(--color-accent-alt);
  --kg-link: var(--color-accent);
  --kg-link-hover: var(--color-accent-hover);
  --kg-shadow-sm: var(--shadow-sm);
  --kg-shadow-md: var(--shadow-md);
  --kg-shadow-lg: var(--shadow-lg);
  --kg-radius-sm: var(--radius-sm);
  --kg-radius-md: var(--radius-md);
  --kg-radius-lg: var(--radius-lg);
  --kg-transition: var(--transition-base);
}