/* ============================================================
   Al Raki Jotun — CSS Design System Variables
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --color-navy:         #06345B;
    --color-navy-dark:    #032A4A;
    --color-navy-deeper:  #021E36;
    --color-gold:         #D9A900;
    --color-gold-bright:  #E7B51B;
    --color-gold-light:   #F5D060;
    --color-gold-pale:    #FDF8E8;

    /* ── Text Colors ── */
    --color-text:         #16324A;
    --color-text-muted:   #667085;
    --color-text-light:   #98A9B5;
    --color-text-white:   #FFFFFF;

    /* ── Background Colors ── */
    --color-white:        #FFFFFF;
    --color-off-white:    #F7F8FA;
    --color-bg-subtle:    #F0F4F8;
    --color-bg-section:   #EEF2F7;

    /* ── Border ── */
    --color-border:       #E4EAF0;
    --color-border-dark:  #C8D4DE;

    /* ── Status Colors ── */
    --color-success:      #20C968;
    --color-whatsapp:     #25D366;
    --color-error:        #E53E3E;
    --color-warning:      #F6AD55;

    /* ── Spacing System ── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32: 128px;

    /* ── Typography ── */
    --font-arabic:  'Tajawal', 'IBM Plex Sans Arabic', 'Arial', sans-serif;
    --font-english: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
    --font-primary: var(--font-arabic);  /* Overridden by lang class */

    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-md:    18px;
    --text-lg:    20px;
    --text-xl:    24px;
    --text-2xl:   28px;
    --text-3xl:   36px;
    --text-4xl:   48px;
    --text-5xl:   60px;
    --text-6xl:   72px;

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    --leading-arabic:  1.9;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold: 800;
    --weight-black:    900;

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(6, 52, 91, 0.04);
    --shadow-sm:  0 1px 4px rgba(6, 52, 91, 0.08);
    --shadow-md:  0 4px 16px rgba(6, 52, 91, 0.10);
    --shadow-lg:  0 8px 32px rgba(6, 52, 91, 0.14);
    --shadow-xl:  0 16px 64px rgba(6, 52, 91, 0.18);
    --shadow-card: 0 2px 12px rgba(6, 52, 91, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(6, 52, 91, 0.16);
    --shadow-gold: 0 4px 20px rgba(217, 169, 0, 0.30);

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

    /* ── Layout ── */
    --container-max:   1280px;
    --container-wide:  1440px;
    --container-pad:   var(--space-8);

    /* ── Header ── */
    --header-topbar-h: 42px;
    --header-main-h:   76px;
    --header-total-h:  118px;

    /* ── Z-index ── */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-toast:      500;
}

/* ── English language overrides ── */
.lang-en {
    --font-primary: var(--font-english);
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;
}