/* ============================================================
   Jeeblay Design System — Variables
   مصدر الحقيقة الوحيد للألوان والمقاسات والظلال
   مطابق 100% للهوية البصرية الجديدة (App-First)
   ============================================================ */

:root {
    /* ============================================================
       § BRAND PALETTE — Emerald Green + Pure White
       اللون الأساسي: أخضر زمردي عصري
       الخلفية: أبيض نقي + رمادي ناعم جداً للبطاقات
       ============================================================ */

    /* ===== Brand Green (Primary) ===== */
    --brand-50:  #E6F7F1;
    --brand-100: #C2EADC;
    --brand-200: #8FD7BE;
    --brand-300: #5AC29F;
    --brand-400: #2FA77F;
    --brand-500: #1FA882;   /* Primary */
    --brand-600: #198D6E;
    --brand-700: #14735A;
    --brand-800: #0F5A47;
    --brand-900: #0A4034;

    /* ===== Wallet Gradient (User hero card) ===== */
    --wallet-gradient: linear-gradient(135deg, #1FA882 0%, #14735A 100%);
    --wallet-gradient-soft: linear-gradient(135deg, #E6F7F1 0%, #C2EADC 100%);

    /* ===== Neutrals — Pure clean grays ===== */
    --gray-25:  #FCFDFD;
    --gray-50:  #F7F9FA;
    --gray-100: #EEF1F3;
    --gray-200: #E1E6EA;
    --gray-300: #C9D1D7;
    --gray-400: #9AA5AD;
    --gray-500: #6B7680;
    --gray-600: #4B5560;
    --gray-700: #323B45;
    --gray-800: #1F262E;
    --gray-900: #0F141A;

    /* ===== Pure backgrounds ===== */
    --white:    #FFFFFF;
    --black:    #0F141A;

    /* ===== Status colors (subtle, modern) ===== */
    --success-50:  #E6F7F1;
    --success-500: #1FA882;
    --success-700: #14735A;

    --warning-50:  #FFF7E6;
    --warning-500: #E8A33B;
    --warning-700: #B07820;

    --danger-50:  #FDECEC;
    --danger-500: #E54848;
    --danger-700: #B02E2E;

    --info-50:  #E8F1FB;
    --info-500: #3B82F6;
    --info-700: #1D4ED8;

    /* ============================================================
       § SEMANTIC MAPPING
       ============================================================ */

    /* Primary (used everywhere) */
    --color-primary:        var(--brand-500);
    --color-primary-light:  var(--brand-300);
    --color-primary-lighter: var(--brand-100);
    --color-primary-dark:   var(--brand-700);
    --color-primary-darker: var(--brand-900);
    --color-primary-hover:  var(--brand-600);
    --color-primary-bg:     var(--brand-50);

    /* Secondary aliases (kept for backward compat — all map to brand) */
    --color-secondary:       var(--brand-600);
    --color-secondary-light: var(--brand-400);
    --color-secondary-dark:  var(--brand-800);

    /* Marketing/legacy aliases */
    --color-brand-navy:       var(--gray-800);
    --color-brand-navy-light: var(--gray-600);
    --color-brand-navy-deep:  var(--gray-900);
    --color-brand-sand:       var(--gray-100);
    --color-brand-sand-light: var(--gray-50);

    /* Status semantic */
    --color-success:       var(--success-500);
    --color-success-light: var(--brand-300);
    --color-success-dark:  var(--success-700);
    --color-success-bg:    var(--success-50);

    --color-warning:       var(--warning-500);
    --color-warning-light: #F0BD63;
    --color-warning-dark:  var(--warning-700);
    --color-warning-bg:    var(--warning-50);

    --color-danger:        var(--danger-500);
    --color-danger-light:  #EE7373;
    --color-danger-dark:   var(--danger-700);
    --color-danger-bg:     var(--danger-50);

    --color-info:          var(--info-500);
    --color-info-light:    #6FA3F8;
    --color-info-dark:     var(--info-700);
    --color-info-bg:       var(--info-50);

    /* Gray scale (semantic — same as palette but kept as named) */
    --color-gray-50:  var(--gray-50);
    --color-gray-100: var(--gray-100);
    --color-gray-200: var(--gray-200);
    --color-gray-300: var(--gray-300);
    --color-gray-400: var(--gray-400);
    --color-gray-500: var(--gray-500);
    --color-gray-600: var(--gray-600);
    --color-gray-700: var(--gray-700);
    --color-gray-800: var(--gray-800);
    --color-gray-900: var(--gray-900);

    /* ============================================================
       § BACKGROUNDS & SURFACES
       Pure white app + soft gray surfaces (matches reference image)
       ============================================================ */
    --bg-primary:    #FFFFFF;
    --bg-secondary:  #F7F9FA;
    --bg-tertiary:   #EEF1F3;
    --bg-card:       #FFFFFF;
    --bg-card-soft:  #F7F9FA;
    --bg-dark:       var(--gray-900);
    --bg-overlay:    rgba(15, 20, 26, 0.5);

    /* ============================================================
       § TEXT
       ============================================================ */
    --text-primary:    var(--gray-900);
    --text-secondary:  var(--gray-600);
    --text-tertiary:   var(--gray-500);
    --text-muted:      var(--gray-400);
    --text-inverse:    #FFFFFF;
    --text-link:       var(--brand-600);
    --text-link-hover: var(--brand-700);
    --text-on-primary: #FFFFFF;

    /* ============================================================
       § BORDERS
       ============================================================ */
    --border-light:  var(--gray-100);
    --border-medium: var(--gray-200);
    --border-dark:   var(--gray-300);
    --border-focus:  var(--brand-500);
    --border-card:   var(--gray-100);

    /* ============================================================
       § GUARD PERSONAS
       كل المساحات تتشارك نفس الهوية الخضراء (بحسب الصورة)
       — التمييز يأتي من البطاقات والرموز فقط
       ============================================================ */
    --guard-user-primary:     var(--brand-500);
    --guard-user-dark:        var(--brand-700);
    --guard-user-accent:      var(--brand-100);
    --guard-user-sidebar:     #FFFFFF;
    --guard-user-bg:          #F7F9FA;

    --guard-merchant-primary: var(--brand-500);
    --guard-merchant-dark:    var(--brand-700);
    --guard-merchant-accent:  var(--brand-100);
    --guard-merchant-sidebar: #FFFFFF;
    --guard-merchant-bg:      #F7F9FA;

    --guard-shipping-primary: var(--brand-500);
    --guard-shipping-dark:    var(--brand-700);
    --guard-shipping-accent:  var(--brand-100);
    --guard-shipping-sidebar: #FFFFFF;
    --guard-shipping-bg:      #F7F9FA;

    --guard-agent-primary:    var(--brand-500);
    --guard-agent-dark:       var(--brand-700);
    --guard-agent-accent:     var(--brand-100);
    --guard-agent-sidebar:    #FFFFFF;
    --guard-agent-bg:         #F7F9FA;

    --guard-delivery-primary: var(--brand-500);
    --guard-delivery-dark:    var(--brand-700);
    --guard-delivery-accent:  var(--brand-100);
    --guard-delivery-sidebar: #FFFFFF;
    --guard-delivery-bg:      #F7F9FA;

    --guard-admin-primary:    var(--brand-500);
    --guard-admin-dark:       var(--brand-700);
    --guard-admin-accent:     var(--brand-100);
    --guard-admin-sidebar:    var(--gray-900);
    --guard-admin-bg:         #F7F9FA;

    /* ============================================================
       § TYPOGRAPHY
       ============================================================ */
    --font-family-ar:      'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-family-display: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
    --font-family-mono:    'IBM Plex Mono', 'Geist Mono', ui-monospace, monospace;

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

    /* Weights */
    --font-weight-light:     300;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;
    --font-weight-black:     900;

    /* Line heights */
    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose:   1.9;

    /* Letter spacing */
    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.02em;
    --letter-spacing-wider:  0.08em;

    /* ============================================================
       § SPACING — 4px base
       ============================================================ */
    --spacing-xs:  0.25rem;   /* 4px */
    --spacing-sm:  0.5rem;    /* 8px */
    --spacing-md:  1rem;      /* 16px */
    --spacing-lg:  1.5rem;    /* 24px */
    --spacing-xl:  2rem;      /* 32px */
    --spacing-2xl: 2.5rem;    /* 40px */
    --spacing-3xl: 3rem;      /* 48px */
    --spacing-4xl: 4rem;      /* 64px */

    /* ============================================================
       § RADIUS — Soft, modern app style (matches reference)
       ============================================================ */
    --radius-xs:   0.375rem;  /* 6px */
    --radius-sm:   0.5rem;    /* 8px */
    --radius-md:   0.75rem;   /* 12px */
    --radius-lg:   1rem;      /* 16px */
    --radius-xl:   1.25rem;   /* 20px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-3xl:  2rem;      /* 32px */
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* ============================================================
       § SHADOWS — Ultra-soft, app-style elevation
       ============================================================ */
    --shadow-xs:    0 1px 2px 0 rgba(15, 20, 26, 0.03);
    --shadow-sm:    0 1px 3px 0 rgba(15, 20, 26, 0.04), 0 1px 2px 0 rgba(15, 20, 26, 0.02);
    --shadow-md:    0 4px 12px -2px rgba(15, 20, 26, 0.06), 0 2px 4px 0 rgba(15, 20, 26, 0.03);
    --shadow-lg:    0 12px 24px -4px rgba(15, 20, 26, 0.08), 0 4px 8px 0 rgba(15, 20, 26, 0.04);
    --shadow-xl:    0 20px 40px -8px rgba(15, 20, 26, 0.10);
    --shadow-2xl:   0 28px 60px -12px rgba(15, 20, 26, 0.14);
    --shadow-brand: 0 8px 20px -6px rgba(31, 168, 130, 0.35);
    --shadow-inner: inset 0 1px 2px 0 rgba(15, 20, 26, 0.04);

    /* ============================================================
       § TRANSITIONS
       ============================================================ */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================================
       § Z-INDEX
       ============================================================ */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;
    --z-toast:          1080;

    /* ============================================================
       § APP CHROME — Header + bottom nav (mobile-first)
       ============================================================ */
    --app-header-height:  64px;
    --app-bottom-nav-height: 72px;
    --app-max-width:      480px;       /* تركيز على mobile-first كما في الصورة */
    --app-content-pad:    1.25rem;

    /* ============================================================
       § MARKETING (homepage hero etc.)
       ============================================================ */
    --marketing-bg:           #FFFFFF;
    --marketing-surface:      #FFFFFF;
    --marketing-surface-soft: #F7F9FA;
    --marketing-border:       rgba(15, 20, 26, 0.08);
    --marketing-muted:        var(--text-secondary);
    --marketing-radius:       1.25rem;
    --marketing-phone-width:  clamp(14.35rem, 20vw, 17.5rem);
    --marketing-phone-radius: 2.35rem;
    --marketing-phone-shadow: var(--shadow-2xl);
    --marketing-section-space: clamp(4.5rem, 8vw, 7.5rem);
    --marketing-grid-gap:      clamp(1.5rem, 3vw, 2.5rem);
}

/* ===== Direction utilities ===== */
[dir="rtl"] {
    --text-align: right;
    --flex-direction: row-reverse;
}
[dir="ltr"] {
    --text-align: left;
    --flex-direction: row;
}

/* ===== Utility classes (kept for backward compat) ===== */
.ap-text-primary   { color: var(--text-primary); }
.ap-text-secondary { color: var(--text-secondary); }
.ap-text-tertiary  { color: var(--text-tertiary); }

.ap-bg-primary   { background-color: var(--bg-primary); }
.ap-bg-secondary { background-color: var(--bg-secondary); }
.ap-bg-tertiary  { background-color: var(--bg-tertiary); }

.ap-shadow-sm { box-shadow: var(--shadow-sm); }
.ap-shadow-md { box-shadow: var(--shadow-md); }
.ap-shadow-lg { box-shadow: var(--shadow-lg); }

.ap-rounded-sm { border-radius: var(--radius-sm); }
.ap-rounded-md { border-radius: var(--radius-md); }
.ap-rounded-lg { border-radius: var(--radius-lg); }
.ap-rounded-xl { border-radius: var(--radius-xl); }

.transition      { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

.mono           { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }
.serif, .display { font-family: var(--font-family-display); }
.font-ar        { font-family: var(--font-family-ar); }