/* ============================================================
   ALBATTAR eSIM — Design Tokens (single source of truth)
   ============================================================ */

:root {
    /* ---------- Colour scales ---------- */
    --teal-50:  #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-500: #14B8A6;
    --teal-600: #1A8C7F;   /* primary */
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;

    --gold-50:  #FFFBEB;
    --gold-100: #FEF3C7;
    --gold-300: #FCD34D;
    --gold-400: #FBBF24;
    --gold-500: #D4A853;   /* accent */
    --gold-600: #B8860B;

    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    --success: #10B981;
    --warning: #F59E0B;
    --error:   #EF4444;
    --info:    #3B82F6;

    /* ---------- Backgrounds ---------- */
    --bg-soft-teal:   linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%);
    --bg-hero:        linear-gradient(135deg, #1A8C7F 0%, #0F766E 50%, #115E59 100%);
    --bg-card-hover:  linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 100%);
    --bg-gold:        linear-gradient(135deg, #FCD34D 0%, #D4A853 100%);
    --bg-popular:     linear-gradient(135deg, #EF4444 0%, #F97316 100%);
    --bg-new:         linear-gradient(135deg, #10B981 0%, #059669 100%);

    /* ---------- Typography ---------- */
    --font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
    --font-latin:  'Inter', 'Cairo', 'Segoe UI', sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

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

    /* ---------- Spacing ---------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---------- Borders ---------- */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-3xl:  2rem;
    --radius-full: 9999px;

    /* ---------- Shadows ---------- */
    --shadow-xs:   0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-sm:   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);
    --shadow-teal: 0 10px 25px -5px rgba(26, 140, 127, 0.25);
    --shadow-gold: 0 10px 25px -5px rgba(212, 168, 83, 0.25);

    /* ---------- Motion ---------- */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ---------- Backwards-compat aliases ---------- */
/* main.css still references these older variable names; keep them mapped to
   the new scale so any unconverted rules pick up the premium colours too. */
:root {
    --color-primary:       var(--teal-600);
    --color-primary-dark:  var(--teal-700);
    --color-primary-light: var(--teal-50);
    --color-gold:          var(--gold-500);
    --color-gold-dark:     var(--gold-600);
    --color-bg:            var(--gray-50);
    --color-bg-card:       #FFFFFF;
    --color-text:          var(--gray-800);
    --color-text-muted:    var(--gray-500);
    --color-border:        var(--gray-200);
    --color-success:       var(--success);
    --color-error:         var(--error);
    --color-warning:       var(--warning);
    --font-family:         var(--font-arabic);
}