/* =========================================================
 * Al-Jathnan — Design Tokens
 * Navy + Gold premium identity
 * ======================================================= */
:root{

    /* ---------- Colors: Navy (أساسي) ---------- */
    --aj-navy:           #0A2540;
    --aj-navy-deep:      #061829;
    --aj-navy-soft:      #133E66;
    --aj-navy-black:     #030D18;

    /* ---------- Colors: Blue (CTA ثانوي) ---------- */
    --aj-blue:           #1E5FA8;
    --aj-blue-bright:    #2E7DD1;
    --aj-blue-soft:      #E8F0FA;

    /* ---------- Colors: Gold (Accent) ---------- */
    --aj-gold:           #C9A961;
    --aj-gold-deep:      #A88945;
    --aj-gold-bright:    #DDBA70;
    --aj-gold-soft:      #F5EDDC;

    /* ---------- Colors: Neutrals ---------- */
    --aj-cream:          #FAF7F2;
    --aj-cream-warm:     #F4EEE4;
    --aj-cream-deep:     #EBE3D5;

    --aj-charcoal:       #2C2C2C;
    --aj-charcoal-soft:  #2F4154;
    --aj-muted:          #536579;
    --aj-muted-light:    #7C8996;
    --aj-text:           #2F4154;
    --aj-text-soft:      #465A6E;
    --aj-text-muted:     #627386;
    --aj-hero-gold:      #B47B18;

    --aj-white:          #FFFFFF;
    --aj-black:          #0A0A0A;

    /* ---------- Colors: Semantic ---------- */
    --aj-success:        #2D7A4F;
    --aj-warning:        #D68A2E;
    --aj-error:          #C43D3D;

    /* ---------- Borders ---------- */
    --aj-line:           rgba(10, 37, 64, 0.08);
    --aj-line-strong:    rgba(10, 37, 64, 0.16);
    --aj-line-gold:      rgba(201, 169, 97, 0.28);
    --aj-line-dark:      rgba(255, 255, 255, 0.10);

    /* ---------- Surfaces ---------- */
    --aj-surface-light:  var(--aj-cream);
    --aj-surface-blush:  var(--aj-gold-soft);
    --aj-surface-brand:  var(--aj-navy);
    --aj-surface-dark:   var(--aj-navy-deep);

    /* ---------- Typography ---------- */
    --aj-font-display:  "Tajawal", Tahoma, Arial, sans-serif;
    --aj-font-body:     "Tajawal", Tahoma, Arial, sans-serif;

    --aj-weight-regular:   400;
    --aj-weight-medium:    500;
    --aj-weight-semibold:  600;
    --aj-weight-bold:      700;
    --aj-weight-extrabold: 800;

    /* ---------- Font Sizes (Fluid) ---------- */
    --aj-text-xs:     0.75rem;    /* 12px */
    --aj-text-sm:     0.875rem;   /* 14px */
    --aj-text-base:   1rem;       /* 16px */
    --aj-text-md:     1rem;       /* 16px */
    --aj-text-lg:     1.125rem;   /* 18px */
    --aj-text-xl:     1.25rem;    /* 20px */

    --aj-heading-sm:  clamp(1.25rem, 1.8vw, 1.5rem);      /* 20-24 */
    --aj-heading-md:  clamp(1.4rem, 2vw, 1.7rem);         /* 22-27 */
    --aj-heading-lg:  clamp(1.75rem, 2.6vw, 2.25rem);     /* 28-36 */
    --aj-display:     clamp(2.15rem, 3.4vw, 3rem);        /* 34-48 */

    /* ---------- Line Heights ---------- */
    --aj-leading-tight:   1.20;
    --aj-leading-heading: 1.30;
    --aj-leading-body:    1.85;
    --aj-leading-relaxed: 1.95;

    /* ---------- Containers ---------- */
    --aj-container-narrow:  760px;
    --aj-container:         1200px;
    --aj-container-wide:    1360px;
    --aj-gutter:            clamp(24px, 3.5vw, 56px);

    /* ---------- Spacing (8px scale) ---------- */
    --aj-space-1:   4px;
    --aj-space-2:   8px;
    --aj-space-3:   12px;
    --aj-space-4:   16px;
    --aj-space-5:   24px;
    --aj-space-6:   32px;
    --aj-space-7:   40px;
    --aj-space-8:   56px;
    --aj-space-9:   72px;
    --aj-space-10:  96px;
    --aj-space-11:  128px;
    --aj-space-12:  160px;

    --aj-section-space:     clamp(64px, 7vw, 104px);
    --aj-section-space-sm:  clamp(48px, 5vw, 80px);

    /* ---------- Radius ---------- */
    --aj-radius-xs:    8px;
    --aj-radius-sm:    12px;
    --aj-radius:       18px;
    --aj-radius-lg:    28px;
    --aj-radius-xl:    40px;
    --aj-radius-pill:  999px;

    /* ---------- Shadows ---------- */
    --aj-shadow-xs:    0 2px 8px rgba(10, 37, 64, 0.04);
    --aj-shadow-sm:    0 8px 24px rgba(10, 37, 64, 0.06);
    --aj-shadow:       0 16px 48px rgba(10, 37, 64, 0.10);
    --aj-shadow-lg:    0 28px 72px rgba(10, 37, 64, 0.14);
    --aj-shadow-xl:    0 40px 100px rgba(10, 37, 64, 0.18);
    --aj-shadow-gold:  0 12px 32px rgba(201, 169, 97, 0.22);

    /* ---------- Motion ---------- */
    --aj-ease:          cubic-bezier(0.22, 1, 0.36, 1);
    --aj-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
    --aj-duration-fast: 180ms;
    --aj-duration:      320ms;
    --aj-duration-slow: 600ms;

    /* ---------- Z-Index ---------- */
    --aj-z-header:      100;
    --aj-z-modal:       1000;
    --aj-z-toast:       2000;
}