/* =======================================================
   KINDERBUD DESIGN TOKENS
   Single source of truth for colors, spacing, typography,
   radii, and shadows. Light mode values in :root, dark mode
   overrides in html.dark.

   Light mode values match the existing shipped Tailwind palette
   (sage, warmgray). Dark mode values upgrade from neutral gray
   to on-brand forest/sage greens.

   New UI code should use these tokens (via Tailwind kb-* classes
   or direct var() references). Existing templates keep working
   unchanged via the custom.css dark mode overrides.
   ======================================================= */

:root {
  /* === Green Ramp (brand foundation) ===
     10-step scale. Steps 200-500 are accents used in light mode.
     Steps 600-900 are the dark-mode surface progression. */
  --kb-green-50:  #f2f7ee;
  --kb-green-100: #dcebd2;
  --kb-green-200: #a3c488;  /* heading/accent green — brand signature */
  --kb-green-300: #8aad6e;  /* softer accent */
  --kb-green-400: #7a9a65;  /* button green */
  --kb-green-500: #5a8a48;  /* "Done" badge green */
  --kb-green-600: #3d5537;  /* mid-dark olive */
  --kb-green-700: #242724;  /* dark mode card/surface */
  --kb-green-800: #1f221f;  /* dark mode between surface and page */
  --kb-green-900: #1a1d1a;  /* dark mode page background */

  /* === Semantic Surface Colors ===
     4-tier elevation: base < surface < elevated < overlay.
     Light mode values match existing warmgray/white usage. */
  --kb-bg-base:     #fafaf9;  /* page background (warmgray-50) */
  --kb-bg-surface:  #ffffff;  /* cards, panels */
  --kb-bg-elevated: #f5f5f4;  /* lifted elements (warmgray-100) */
  --kb-bg-overlay:  #e7e5e4;  /* modals, popovers (warmgray-200) */

  /* === Text Colors === */
  --kb-text-primary:   #1f2937;  /* gray-800 equivalent */
  --kb-text-secondary: #6b7280;  /* gray-500 equivalent */
  --kb-text-tertiary:  #9ca3af;  /* gray-400 equivalent */
  --kb-text-inverse:   #fafaf9;

  /* === Border Colors === */
  --kb-border-subtle:  rgba(107, 127, 86, 0.08);
  --kb-border-default: rgba(107, 127, 86, 0.15);
  --kb-border-strong:  rgba(107, 127, 86, 0.30);

  /* === Brand Green (shorthand) === */
  --kb-green: #a3c488;
  --kb-green-muted: rgba(163, 196, 136, 0.25);

  /* === Guide Color Palette ===
     Slots 1-3 pre-assigned to default Kinderbud guides.
     Slots 4-8 auto-assigned to user/AI-created guides.
     Warm and muted to sit beside earthy greens. */
  --kb-guide-color-1: #7BC96F;  /* Early Development */
  --kb-guide-color-2: #B08ADF;  /* Literacy & Language */
  --kb-guide-color-3: #6B9FE8;  /* Math & Numeracy */
  --kb-guide-color-4: #E8B44A;  /* auto-assign pool */
  --kb-guide-color-5: #DFA0C4;
  --kb-guide-color-6: #6ED4A8;
  --kb-guide-color-7: #E88A7A;
  --kb-guide-color-8: #8AAED4;

  /* === Status Colors === */
  --kb-success: #5a8a48;
  --kb-warning: #E8B44A;
  --kb-error:   #E88A7A;

  /* === Spacing Scale ===
     4px base unit. */
  --kb-space-1:  4px;
  --kb-space-2:  8px;
  --kb-space-3:  12px;
  --kb-space-4:  16px;
  --kb-space-5:  20px;
  --kb-space-6:  24px;
  --kb-space-8:  32px;
  --kb-space-10: 40px;
  --kb-space-12: 48px;

  /* === Typography === */
  --kb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;

  --kb-font-size-xs:   0.75rem;    /* 12px — timestamps, meta */
  --kb-font-size-sm:   0.8125rem;  /* 13px — small labels */
  --kb-font-size-base: 0.875rem;   /* 14px — body text, descriptions */
  --kb-font-size-md:   1rem;       /* 16px — card titles, form labels */
  --kb-font-size-lg:   1.125rem;   /* 18px — guide titles, section heads */
  --kb-font-size-xl:   1.5rem;     /* 24px — page headings, streak number */
  --kb-font-size-2xl:  2rem;       /* 32px — hero / welcome text */

  /* === Border Radius === */
  --kb-radius-sm:   6px;   /* small pills, mini week squares */
  --kb-radius-md:   10px;  /* inputs, buttons */
  --kb-radius-lg:   12px;  /* activity cards */
  --kb-radius-xl:   16px;  /* briefing card, feature cards */
  --kb-radius-full: 999px; /* circular elements, pill badges */

  /* === Shadows === */
  --kb-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --kb-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --kb-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --kb-shadow-glow: 0 0 0 1px rgba(107, 127, 86, 0.10);
}

/* === Dark Mode ===
   Green-tinted surfaces replace neutral grays.
   Same semantic names, different values. */
html.dark {
  --kb-bg-base:     #1a1d1a;  /* near-black with green hint */
  --kb-bg-surface:  #242724;  /* dark surface, subtle warmth */
  --kb-bg-elevated: #2a2d2a;  /* lifted elements */
  --kb-bg-overlay:  #313431;  /* modals, popovers */

  --kb-text-primary:   #d6d9d2;  /* warm off-white */
  --kb-text-secondary: #959e8d;  /* muted sage */
  --kb-text-tertiary:  #6b7563;  /* faint sage */
  --kb-text-inverse:   #1a1d1a;

  --kb-border-subtle:  rgba(140, 160, 120, 0.10);
  --kb-border-default: rgba(140, 160, 120, 0.18);
  --kb-border-strong:  rgba(140, 160, 120, 0.30);

  --kb-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25);
  --kb-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
  --kb-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.35);
  --kb-shadow-glow: 0 0 0 1px rgba(163, 196, 136, 0.12);
}