/* ============================================================
   SmartKidsHub Design Token System
   ============================================================
   Single source of truth for all visual design decisions.
   All CSS files should reference these tokens instead of
   hardcoded values.
   ============================================================ */

:root {
  /* ──────────────────────────────────────────────────────────
     COLOR TOKENS
     ────────────────────────────────────────────────────────── */

  /* Primary — Teal */
  --color-primary-50:  #E0F7F4;
  --color-primary-100: #B2DFDB;
  --color-primary-200: #80CBC4;
  --color-primary-300: #4DB6AC;
  --color-primary-400: #26A69A;
  --color-primary-500: #00D9B6;
  --color-primary-600: #00B29A;
  --color-primary-700: #00796B;
  --color-primary-800: #004D40;
  --color-primary-900: #002E27;

  /* Secondary — Orange */
  --color-secondary-50:  #FFF3E0;
  --color-secondary-100: #FFE0B2;
  --color-secondary-200: #FFCC80;
  --color-secondary-300: #FFB74D;
  --color-secondary-400: #FFA726;
  --color-secondary-500: #FF9800;
  --color-secondary-600: #FB8C00;
  --color-secondary-700: #F57C00;
  --color-secondary-800: #EF6C00;
  --color-secondary-900: #E65100;

  /* Neutral — Gray */
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #37474F;
  --color-gray-900: #212121;

  /* Semantic */
  --color-success:       #4CAF50;
  --color-success-light: #E8F5E9;
  --color-success-dark:  #2E7D32;
  --color-warning:       #FF9800;
  --color-warning-light: #FFF3E0;
  --color-warning-dark:  #E65100;
  --color-error:         #F44336;
  --color-error-light:   #FFEBEE;
  --color-error-dark:    #C62828;
  --color-info:          #2196F3;
  --color-info-light:    #E3F2FD;
  --color-info-dark:     #1565C0;

  /* Surfaces & Backgrounds */
  --color-surface:          #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-dim:      #F5F5F5;
  --color-background:       #F8FFFE;
  --color-background-alt:   #F0FBF9;

  /* On-color (text on colored backgrounds) */
  --color-on-primary:   #FFFFFF;
  --color-on-secondary: #37474F;
  --color-on-surface:   #37474F;
  --color-on-surface-muted: #546E7A;

  /* Borders & Outlines */
  --color-outline:      #E0E0E0;

  /* Semantic Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-400));
  --gradient-brand-dark: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700));
  --gradient-surface: linear-gradient(135deg, var(--color-primary-50), var(--color-surface));
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-300), var(--color-secondary-500));

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ────────────────────────────────────────────────────────── */

  --font-display: 'Baloo 2', cursive;
  --font-body:    'Inter', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  1.8;

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

  /* ──────────────────────────────────────────────────────────
     SPACING TOKENS (4px base unit)
     ────────────────────────────────────────────────────────── */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ──────────────────────────────────────────────────────────
     BORDER RADIUS TOKENS
     ────────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
     SHADOW / ELEVATION TOKENS
     ────────────────────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* Colored shadows for buttons */
  --shadow-primary: 0 4px 14px rgba(0, 217, 182, 0.3);
  --shadow-secondary: 0 4px 14px rgba(255, 167, 38, 0.3);

  /* ──────────────────────────────────────────────────────────
     TRANSITION TOKENS
     ────────────────────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────────────────────
     LAYOUT TOKENS
     ────────────────────────────────────────────────────────── */

  --header-height: 64px;
  --bottom-nav-height: 64px;
  --max-width-content: 1200px;
  --max-width-narrow:  720px;
  --max-width-form:    440px;

  /* ──────────────────────────────────────────────────────────
     Z-INDEX TOKENS
     ────────────────────────────────────────────────────────── */

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   1000;
  --z-overlay:  1500;
  --z-modal:    2000;
  --z-toast:    2500;
}