/* ==========================================================================
   Design Tokens & CSS Variables
   Theme: WHO WE ARE — My Feelings, My Body, My Choices
   ========================================================================== */

:root {
  /* Primary Brand Colors */
  --color-primary: #6C63FF;
  --color-primary-light: #A5A0FF;
  --color-primary-dark: #4A42D4;
  --color-primary-rgb: 108, 99, 255;

  /* Feeling Colors */
  --color-happy: #FFD93D;
  --color-happy-rgb: 255, 217, 61;
  --color-sad: #6FB4E2;
  --color-sad-rgb: 111, 180, 226;
  --color-angry: #FF6B6B;
  --color-angry-rgb: 255, 107, 107;
  --color-worried: #C49BFF;
  --color-worried-rgb: 196, 155, 255;
  --color-excited: #FF9F43;
  --color-excited-rgb: 255, 159, 67;
  --color-calm: #7ED6A6;
  --color-calm-rgb: 126, 214, 166;

  /* Neutral Surface & Text Colors */
  --color-bg: #FFF9F0;
  --color-bg-alt: #FFF2E2;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8F6F2;
  --color-text: #2D2D2D;
  --color-text-light: #6B6B6B;
  --color-border: #E8E0D8;
  --color-border-dark: #D4C9BF;

  /* Semantic Feedback Colors */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;

  /* Kid-friendly Drawing Palette */
  --palette-black: #2D2D2D;
  --palette-white: #FFFFFF;
  --palette-red: #FF6B6B;
  --palette-orange: #FF9F43;
  --palette-yellow: #FFD93D;
  --palette-green: #7ED6A6;
  --palette-blue: #6FB4E2;
  --palette-purple: #C49BFF;
  --palette-pink: #FFB5C2;
  --palette-brown: #B07D56;

  /* Typography */
  --font-main: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Font Sizes (Tablet First with Fluid Clamp) */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 2vw, 1rem);
  --text-base: clamp(1rem, 2.5vw, 1.25rem);
  --text-lg: clamp(1.125rem, 2.8vw, 1.375rem);
  --text-xl: clamp(1.25rem, 3vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 3.8vw, 2rem);
  --text-3xl: clamp(1.75rem, 4.5vw, 2.5rem);

  /* Spacing Scale (4px Base Unit) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(108, 99, 255, 0.3);
  --shadow-glow-success: 0 0 20px rgba(76, 175, 80, 0.4);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Constraints */
  --header-height: 56px;
  --footer-height: 76px;
  --max-content-width: 760px;
}