/* Kids2 Studio Design Tokens — copied from design handoff */
:root {
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-neutral-50:  #F7F7F5;
  --color-neutral-100: #EDEDEA;
  --color-neutral-200: #E2E2DD;
  --color-neutral-300: #C4C4BE;
  --color-neutral-400: #9B9B94;
  --color-neutral-500: #6E6E67;
  --color-neutral-600: #4D4D48;
  --color-neutral-700: #353531;
  --color-neutral-800: #232320;
  --color-neutral-900: #16181D;
  --color-primary-50:  #E1F6FB;
  --color-primary-100: #BCEBF5;
  --color-primary-200: #8EDDEE;
  --color-primary-300: #54CBE6;
  --color-primary-400: #21BCDF;
  --color-primary-500: #01B4DE;
  --color-primary-600: #0A86A6;
  --color-primary-700: #0C6A84;
  --color-primary-800: #0C5468;
  --color-primary-900: #0A4150;
  --color-ink:          #1E1B16;
  --color-primary:      #01B4DE;
  --color-primary-ink:  #0A86A6;
  --color-success:      #2FB38A;
  --color-energy:       #E0590F;
  --color-danger:       #EF463B;
  --color-surface:      #FFFFFF;
  --color-canvas:       #EFEDE7;
  --color-surface-2:    #F6F5F1;
  --color-text-muted:   #6E6E67;
  --color-border:       #E4E0D6;
  --color-hover:        #EAE7DE;
  --tone-green-text:  #197A5C;  --tone-green-bg:  #E2F4EE;  --tone-green-dot:  #4CBEA0;
  --tone-amber-text:  #8A6D00;  --tone-amber-bg:  #FFF6CC;  --tone-amber-dot:  #E8B500;
  --tone-red-text:    #C2332A;  --tone-red-bg:    #FDE3E1;  --tone-red-dot:    #EF463B;
  --tone-blue-text:   #0A6E89;  --tone-blue-bg:   #DFF4FA;  --tone-blue-dot:   #01B4DE;
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(22,24,29,.06);
  --shadow-sm: 0 2px 6px rgba(22,24,29,.08);
  --shadow-md: 0 8px 24px rgba(22,24,29,.12);
  --shadow-lg: 0 20px 50px rgba(22,24,29,.20);
  --focus-ring: 0 0 0 3px rgba(1,180,222,.40);
}

[data-theme="dark"] {
  --color-canvas:     #0F1115;
  --color-surface:    #1A1D23;
  --color-surface-2:  #15181D;
  --color-border:     #2A2E36;
  --color-text:       #F3F3F1;
  --color-ink:        #F3F3F1;
  --color-text-muted: #9BA1AC;
  --color-primary:    #01B4DE;
  --color-hover:      #21252D;
}