/* ============================================================
   Idasara Academy — Theme Variables

   TO CHANGE THE THEME: Edit ONLY this file.
   All colors, fonts, spacing flow from these variables.
   No other CSS file needs to change for a theme update.

   Color guide:
   --color-primary: Brand blue — CTAs, links, active states
   --color-secondary: Purple — premium features, highlights
   --color-accent: Emerald — success, positive signals
   ============================================================ */

:root {
  /* --------------------------------------------------------
     Brand Colors
     -------------------------------------------------------- */
  --color-primary-50:  #EBF5FF;
  --color-primary-100: #CCE4FF;
  --color-primary-200: #99C9FF;
  --color-primary-300: #66ADFF;
  --color-primary-400: #3392FF;
  --color-primary-500: #0077FF;
  --color-primary:     #0066CC;
  --color-primary-600: #0066CC;
  --color-primary-700: #004D99;
  --color-primary-800: #003366;
  --color-primary-900: #001A33;

  --color-secondary-50:  #F5F0FF;
  --color-secondary-100: #EBE0FF;
  --color-secondary-200: #D4BFF2;
  --color-secondary-300: #B794E6;
  --color-secondary-400: #9B6DD9;
  --color-secondary-500: #7E46CC;
  --color-secondary:     #6B21A8;
  --color-secondary-600: #6B21A8;
  --color-secondary-700: #551A85;
  --color-secondary-800: #3F1463;
  --color-secondary-900: #2A0D42;

  --color-accent-50:  #ECFDF5;
  --color-accent-100: #D1FAE5;
  --color-accent-200: #A7F3D0;
  --color-accent-300: #6EE7B7;
  --color-accent-400: #34D399;
  --color-accent-500: #10B981;
  --color-accent:     #059669;
  --color-accent-600: #059669;
  --color-accent-700: #047857;
  --color-accent-800: #065F46;
  --color-accent-900: #064E3B;

  /* --------------------------------------------------------
     Semantic Colors
     -------------------------------------------------------- */
  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-200: #FDE68A;
  --color-warning:     #F59E0B;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;

  --color-error-50:  #FEF2F2;
  --color-error-100: #FEE2E2;
  --color-error-200: #FECACA;
  --color-error:     #EF4444;
  --color-error-600: #DC2626;
  --color-error-700: #B91C1C;

  --color-info-50:  #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info:     #3B82F6;
  --color-info-600: #2563EB;

  --color-success:  var(--color-accent);

  /* --------------------------------------------------------
     Neutral Palette (Slate-based)
     -------------------------------------------------------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;

  /* --------------------------------------------------------
     Typography
     -------------------------------------------------------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Noto Sans Sinhala',
                 'Noto Sans Tamil', sans-serif, 'Apple Color Emoji',
                 'Segoe UI Emoji';

  --font-family-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono',
                      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes — fluid 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 */
  --text-6xl:  3.75rem;    /* 60px */

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

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

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

  /* --------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------- */
  --space-0:  0;
  --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 */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* --------------------------------------------------------
     Border Radius
     -------------------------------------------------------- */
  --radius-sm:   0.25rem;   /* 4px  */
  --radius-md:   0.375rem;  /* 6px  */
  --radius:      0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* --------------------------------------------------------
     Shadows
     -------------------------------------------------------- */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1),
                0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

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

  /* --------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------- */
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-fixed:     30;
  --z-overlay:   40;
  --z-modal:     50;
  --z-popover:   60;
  --z-tooltip:   70;

  /* --------------------------------------------------------
     Container Widths
     -------------------------------------------------------- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  /* --------------------------------------------------------
     Breakpoints (documented for reference — cannot be used
     directly in CSS custom properties, but referenced by
     @media queries in style.css)

     --bp-mobile:   640px   (max-width: 639px = mobile)
     --bp-tablet:   768px   (max-width: 767px = small tablet)
     --bp-desktop:  1024px  (min-width: 1024px = desktop)
     --bp-wide:     1280px  (min-width: 1280px = wide desktop)
     -------------------------------------------------------- */
}