/*
 * MasarPlus Design Tokens (Global Foundations)
 * This file serves as the absolute source of truth for the entire platform.
 */

:root {
  /* 1. Color Palette */
  /* Primary Base */
  --mp-primary-50:    #EEF9FB;
  --mp-primary-100:   #D7F1F5;
  --mp-primary-200:   #B3E3EA;
  --mp-primary-300:   #7FD0DB;
  --mp-primary-400:   #44BAC8;
  --mp-primary-500:   #0092A6; /* Main Brand Color */
  --mp-primary-600:   #01798D;
  --mp-primary-700:   #016070;
  --mp-primary-800:   #014E5B;
  --mp-primary-900:   #013A44;

  /* Accent (Secondary Brand) */
  --mp-accent-50:     #FCFBF3;
  --mp-accent-100:    #F6F0D1;
  --mp-accent-200:    #F1E6AF;
  --mp-accent-300:    #ECDA80; /* Main Accent */
  --mp-accent-400:    #E7CE58;
  --mp-accent-500:    #E0C950;
  
  /* Grayscale & Neutrals */
  --mp-gray-50:       #F8FAFB;
  --mp-gray-100:      #F1F5F9;
  --mp-gray-200:      #E2E8F0;
  --mp-gray-300:      #CBD5E1;
  --mp-gray-400:      #94A3B8;
  --mp-gray-500:      #64748B;
  --mp-gray-600:      #475569;
  --mp-gray-700:      #334155;
  --mp-gray-800:      #1E293B;
  --mp-gray-900:      #0F172A;
  
  /* Semantic Colors */
  --mp-success-50:    #ECFDF5;
  --mp-success-500:   #10B981;
  --mp-success-600:   #059669;
  
  --mp-warning-50:    #FFFBEB;
  --mp-warning-500:   #F59E0B;
  --mp-warning-600:   #D97706;
  
  --mp-danger-50:     #FEF2F2;
  --mp-danger-500:    #EF4444;
  --mp-danger-600:    #DC2626;

  --mp-info-50:       #EFF6FF;
  --mp-info-500:      #3B82F6;
  --mp-info-600:      #2563EB;

  /* Abstracted Usage Colors */
  --mp-bg-light:      #F8FAFB;
  --mp-bg-dark:       #0F172A;
  --mp-surface-light: #FFFFFF;
  --mp-surface-dark:  #1E293B;
  
  --mp-text-dark:     #15323A;
  --mp-text-light:    #5E7680;
  --mp-border:        #DDE7EA;
  --mp-border-light:  #F1F5F9;

  /* Gradients */
  --mp-gradient-primary: linear-gradient(135deg, var(--mp-primary-500), var(--mp-primary-600));
  --mp-gradient-accent:  linear-gradient(135deg, var(--mp-accent-300), var(--mp-primary-500));
  --mp-gradient-soft:    linear-gradient(135deg, var(--mp-primary-50), #FFFFFF);

  /* 2. Typography Scale (Base: 16px) */
  --mp-font-family:    'Cairo', sans-serif;
  --mp-text-xs:        0.75rem;   /* 12px */
  --mp-text-sm:        0.875rem;  /* 14px */
  --mp-text-base:      1rem;      /* 16px */
  --mp-text-md:        1.125rem;  /* 18px */
  --mp-text-lg:        1.25rem;   /* 20px */
  --mp-text-xl:        1.5rem;    /* 24px */
  --mp-text-2xl:       1.875rem;  /* 30px */
  --mp-text-3xl:       2.25rem;   /* 36px */
  --mp-text-4xl:       3rem;      /* 48px */
  --mp-text-5xl:       3.75rem;   /* 60px */

  --mp-fw-regular:     400;
  --mp-fw-medium:      500;
  --mp-fw-semibold:    600;
  --mp-fw-bold:        700;
  --mp-fw-extrabold:   800;

  --mp-line-height-tight: 1.25;
  --mp-line-height-base:  1.6;
  --mp-line-height-loose: 1.8;

  /* 3. Spacing System */
  --mp-spacing-0:      0px;
  --mp-spacing-1:      4px;
  --mp-spacing-2:      8px;
  --mp-spacing-3:      12px;
  --mp-spacing-4:      16px;
  --mp-spacing-5:      20px;
  --mp-spacing-6:      24px;
  --mp-spacing-8:      32px;
  --mp-spacing-10:     40px;
  --mp-spacing-12:     48px;
  --mp-spacing-16:     64px;
  --mp-spacing-20:     80px;
  --mp-spacing-24:     96px;

  /* 4. Radius System */
  --mp-radius-none:    0px;
  --mp-radius-sm:      8px;
  --mp-radius-md:      12px;
  --mp-radius-lg:      16px;
  --mp-radius-xl:      24px;
  --mp-radius-full:    9999px;

  /* 5. Shadow & Elevation System (Stripe/Linear Inspired) */
  --mp-shadow-none:    none;
  --mp-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mp-shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --mp-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --mp-shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --mp-shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Brand Specific Shadows */
  --mp-shadow-primary: 0 10px 20px -5px rgba(0, 146, 166, 0.25);
  --mp-shadow-glow:    0 0 20px 0 rgba(0, 146, 166, 0.15);
  --mp-shadow-focus:   0 0 0 4px var(--mp-primary-100);

  /* 6. Container Widths */
  --mp-container-sm:   640px;
  --mp-container-md:   768px;
  --mp-container-lg:   1024px;
  --mp-container-xl:   1280px;
  --mp-container-2xl:  1440px;

  /* 7. Grid System */
  --mp-grid-gap-sm:    var(--mp-spacing-4);
  --mp-grid-gap-md:    var(--mp-spacing-6);
  --mp-grid-gap-lg:    var(--mp-spacing-8);

  /* 8. Breakpoints (used in media queries) */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

  /* 9. Motion & Animation Timing */
  --mp-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --mp-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --mp-transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --mp-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* 10. Icon Sizes */
  --mp-icon-sm:        16px;
  --mp-icon-md:        24px;
  --mp-icon-lg:        32px;
  --mp-icon-xl:        48px;

  /* 11. Z-index Layers */
  --mp-z-hide:         -1;
  --mp-z-base:         0;
  --mp-z-dropdown:     1000;
  --mp-z-sticky:       1020;
  --mp-z-fixed:        1030;
  --mp-z-modal-backdrop: 1040;
  --mp-z-modal:        1050;
  --mp-z-popover:      1060;
  --mp-z-tooltip:      1070;
  --mp-z-toast:        1080;
}