/* ==========================================================================
   Aarambh Early Years - Design Tokens
   Pre-Primary School Management UI Foundation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300..1000;1,300..1000&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* ========================================================================
     1. COLOR TOKENS
     ======================================================================== */
  
  /* Primary Brand Color: Warm Terracotta / Cheerful Peach-Coral */
  --color-primary-50:  #FFF5F2;
  --color-primary-100: #FFEAE4;
  --color-primary-200: #FFD4C8;
  --color-primary-300: #FFAF9C;
  --color-primary-400: #F3856D;
  --color-primary-500: #E76F51; /* Main Brand Color */
  --color-primary-600: #D65A3C;
  --color-primary-700: #B44428;
  --color-primary-800: #933821;
  --color-primary-900: #7A321F;
  --color-primary-rgb: 231, 111, 81;

  /* Canvas and Card Surfaces (Clean, light, warm ivory/alabaster base) */
  --color-canvas:         #FAF9F6;
  --color-canvas-subtle:  #F4F3EF;
  --color-surface:        #FFFFFF;
  --color-surface-hover:  #FDFDFD;
  --color-surface-active: #F8F6F2;
  --color-surface-sunken: #F1EFEA;

  /* Typography Colors */
  --color-text-primary:   #1E293B; /* Deep Slate */
  --color-text-secondary: #475569; /* Soft Slate */
  --color-text-muted:     #64748B; /* Muted Slate */
  --color-text-subtle:    #94A3B8; /* Light Hint */
  --color-text-inverse:   #FFFFFF;

  /* Borders & Dividers */
  --color-border-subtle:  #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-hover:   #CBD5E1;
  --color-border-focus:   var(--color-primary-500);

  /* Soft Pastel Semantic Badges & School Segments (Low saturation, warm, high contrast) */
  /* Playgroup / Amber / Warmth */
  --color-pastel-amber-bg:      #FEF3C7;
  --color-pastel-amber-text:    #92400E;
  --color-pastel-amber-border:  #FDE68A;

  /* Nursery / Sprout Emerald / Attendance: Present / Fees: Paid */
  --color-pastel-emerald-bg:     #D1FAE5;
  --color-pastel-emerald-text:   #065F46;
  --color-pastel-emerald-border: #A7F3D0;

  /* Junior KG (LKG) / Soft Sky Blue / Info */
  --color-pastel-sky-bg:        #E0F2FE;
  --color-pastel-sky-text:      #0369A1;
  --color-pastel-sky-border:    #BAE6FD;

  /* Senior KG (UKG) / Blossom Lavender / Academics & Activities */
  --color-pastel-purple-bg:     #EDE9FE;
  --color-pastel-purple-text:   #5B21B6;
  --color-pastel-purple-border: #DDD6FE;

  /* Absent / Due / Overdue / Soft Rose Alert */
  --color-pastel-rose-bg:       #FFE4E6;
  --color-pastel-rose-text:     #9F1239;
  --color-pastel-rose-border:   #FECDD3;

  /* Semantic Alert Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  /* ========================================================================
     2. TYPOGRAPHY TOKENS
     ======================================================================== */
  --font-family-base:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --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:   1.75rem;   /* 28px */
  --font-size-3xl:   2.125rem;  /* 34px */

  /* Line Heights */
  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.65;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold: 800;

  /* ========================================================================
     3. SPACING & SIZING TOKENS
     ======================================================================== */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Touch Targets (Mobile-first ergonomics: strictly 44px - 48px minimum) */
  --touch-target-sm:  40px;
  --touch-target-md:  44px;
  --touch-target-lg:  48px;

  /* ========================================================================
     4. BORDER RADIUS (Friendly, soft preschool geometry)
     ======================================================================== */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-full: 9999px;

  /* ========================================================================
     5. ELEVATIONS & SHADOWS (Warm, pillowy, non-aggressive)
     ======================================================================== */
  --shadow-xs: 0 1px 2px rgba(30, 41, 59, 0.04);
  --shadow-sm: 0 2px 6px rgba(30, 41, 59, 0.05), 0 1px 2px rgba(231, 111, 81, 0.03);
  --shadow-md: 0 4px 14px -2px rgba(30, 41, 59, 0.06), 0 2px 6px -1px rgba(231, 111, 81, 0.04);
  --shadow-lg: 0 10px 25px -4px rgba(30, 41, 59, 0.08), 0 4px 12px -2px rgba(231, 111, 81, 0.05);
  --shadow-xl: 0 20px 35px -8px rgba(30, 41, 59, 0.1), 0 8px 18px -4px rgba(231, 111, 81, 0.06);
  --shadow-focus: 0 0 0 3px rgba(231, 111, 81, 0.22);

  /* ========================================================================
     6. TRANSITIONS & TIMING
     ======================================================================== */
  --duration-fast:   150ms;
  --duration-normal: 220ms;
  --duration-slow:   320ms;
  --ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================================================
     7. Z-INDEX LAYERING
     ======================================================================== */
  --z-base:      1;
  --z-sticky:    50;
  --z-header:    100;
  --z-bottom-nav:110;
  --z-drawer:    200;
  --z-modal:     300;
  --z-toast:     400;

  /* ========================================================================
     8. LAYOUT SIZES
     ======================================================================== */
  --sidebar-width:       260px;
  --sidebar-collapsed:   76px;
  --header-height:       70px;
  --bottom-nav-height:   68px;
  --content-max-width:   1280px;
}