/**
 * Mubarak4u Design System Variables
 * Edit theme colors and design tokens here in one place.
 */

:root {
  /* ==========================================================================
     Color Palette - Light Theme (Default)
     ========================================================================== */
  --m4y-primary: #1e40af;            /* Deep accessible blue (WCAG AAA on white) */
  --m4y-primary-hover: #1d3557;      /* Rich dark blue */
  --m4y-primary-light: #eff6ff;      /* Very soft blue tint */
  --m4y-accent: #0d9488;             /* Deep teal accent */
  --m4y-accent-hover: #0f766e;       /* Dark teal */
  --m4y-accent-light: #f0fdfa;       /* Soft teal tint */
  --m4y-background: #f8fafc;         /* Page background */
  --m4y-surface: #ffffff;            /* Card / panel background */
  --m4y-surface-alt: #f1f5f9;        /* Input, badge, stripe background */
  --m4y-surface-raised: #ffffff;     /* Elevated dropdowns & modals */
  --m4y-text: #0f172a;               /* High-contrast body text */
  --m4y-text-muted: #475569;         /* Secondary text */
  --m4y-border: #cbd5e1;             /* Input and card borders */
  --m4y-border-light: #e2e8f0;       /* Subtle dividers */
  --m4y-success: #15803d;            /* Safe green */
  --m4y-warning: #b45309;            /* Amber warning */
  --m4y-danger: #b91c1c;             /* Crimson danger */
  --m4y-focus: #2563eb;              /* Focus outline ring */

  /* ==========================================================================
     Dimensions, Radii & Shadows
     ========================================================================== */
  --m4y-radius-sm: 4px;
  --m4y-radius: 8px;
  --m4y-radius-lg: 12px;
  --m4y-radius-xl: 16px;
  --m4y-radius-full: 9999px;

  --m4y-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --m4y-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --m4y-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --m4y-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  --m4y-container-width: 1200px;
  --m4y-header-height: 72px;

  /* ==========================================================================
     Typography & Spacing Scales
     ========================================================================== */
  --m4y-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --m4y-font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  
  --m4y-line-height-body: 1.65;
  --m4y-line-height-heading: 1.25;

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

  --m4y-space-1: 0.25rem;   /* 4px */
  --m4y-space-2: 0.5rem;    /* 8px */
  --m4y-space-3: 0.75rem;   /* 12px */
  --m4y-space-4: 1rem;      /* 16px */
  --m4y-space-5: 1.25rem;   /* 20px */
  --m4y-space-6: 1.5rem;    /* 24px */
  --m4y-space-8: 2rem;      /* 32px */
  --m4y-space-10: 2.5rem;   /* 40px */
  --m4y-space-12: 3rem;     /* 48px */
  --m4y-space-16: 4rem;     /* 64px */
  --m4y-space-20: 5rem;     /* 80px */
}

/* ==========================================================================
   Color Palette - Dark Theme
   ========================================================================== */
[data-theme="dark"] {
  --m4y-primary: #60a5fa;            /* Bright accessible blue on dark */
  --m4y-primary-hover: #93c5fd;
  --m4y-primary-light: rgba(96, 165, 250, 0.12);
  --m4y-accent: #2dd4bf;             /* Bright teal */
  --m4y-accent-hover: #5eead4;
  --m4y-accent-light: rgba(45, 212, 191, 0.12);
  --m4y-background: #0b0f19;         /* Midnight slate */
  --m4y-surface: #111827;            /* Card / panel background */
  --m4y-surface-alt: #1f2937;        /* Contrast background */
  --m4y-surface-raised: #1e293b;     /* Dropdowns and popups */
  --m4y-text: #f3f4f6;               /* Clean high-contrast text */
  --m4y-text-muted: #9ca3af;         /* Muted text (contrast > 4.5:1) */
  --m4y-border: #374151;             /* Dark border */
  --m4y-border-light: #242f42;       /* Subtle dark divider */
  --m4y-success: #34d399;
  --m4y-warning: #fbbf24;
  --m4y-danger: #f87171;
  --m4y-focus: #60a5fa;

  --m4y-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --m4y-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --m4y-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --m4y-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}