/**
 * هلا قوانجوا — Design System
 * Silk & Steel Narrative — Material Design 3 inspired, RTL-first
 * Version: 1.0.0
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

:root {

    /* --- Color Palette --- */
    --color-deep-navy:      #0D3B66;
    --color-deep-navy-90:   #0D3B66E6;  /* 90% */
    --color-navy-dark:      #091e36;    /* Footer bg */
    --color-navy-mid:       #1a5280;    /* Hover state */
    --color-teal:           #1E9BA6;    /* Primary brand teal */
    --color-teal-lt:        #52bec8;    /* Teal light */
    --color-teal-dark:      #157f89;    /* Teal dark / muted */
    --color-orange:         #E65A2E;    /* CTA orange */
    --color-orange-lt:      #f07a59;    /* Orange light */
    --color-sage:           #6DB59A;    /* Sage green */
    /* Legacy alias — kept so existing var(--color-regal-gold) references render teal */
    --color-regal-gold:     #1E9BA6;
    --color-regal-gold-lt:  #52bec8;
    --color-gold-muted:     #157f89;
    --color-warm-sand:      #F4EFE6;    /* Cream */
    --color-warm-sand-lt:   #FAF8F4;    /* Near white cream */
    --color-surface-white:  #FFFFFF;
    --color-background:     #F8F9FA;
    --color-text-primary:   #0D3B66;
    --color-text-muted:     #4a6070;
    --color-text-light:     #8D9FA8;
    --color-text-inverse:   #FFFFFF;
    --color-border:         #E4EBF0;
    --color-border-strong:  #C0CDD8;

    /* Semantic colors */
    --color-success:        #2E7D32;
    --color-warning:        #F57C00;
    --color-error:          #C62828;
    --color-info:           #0277BD;

    /* Social */
    --color-whatsapp:       #25D366;
    --color-youtube:        #FF0000;
    --color-instagram:      #E1306C;
    --color-tiktok:         #000000;
    --color-telegram:       #2AABEE;

    /* --- Typography --- */
    --font-primary:         'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    --font-fallback:        'Cairo', sans-serif;

    /* Font weights */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* Type scale */
    --fs-display-lg:    3rem;       /* 48px */
    --fs-display-md:    2.5rem;     /* 40px */
    --fs-headline-xl:   2.25rem;    /* 36px */
    --fs-headline-lg:   1.75rem;    /* 28px */
    --fs-headline-md:   1.5rem;     /* 24px */
    --fs-title-md:      1.25rem;    /* 20px */
    --fs-title-sm:      1.125rem;   /* 18px */
    --fs-body-lg:       1.125rem;   /* 18px */
    --fs-body-md:       1rem;       /* 16px */
    --fs-body-sm:       0.9375rem;  /* 15px */
    --fs-label-lg:      0.9375rem;  /* 15px */
    --fs-label-md:      0.875rem;   /* 14px */
    --fs-label-sm:      0.8125rem;  /* 13px */
    --fs-caption:       0.75rem;    /* 12px */

    /* Line heights */
    --lh-tight:     1.2;
    --lh-snug:      1.35;
    --lh-normal:    1.5;
    --lh-relaxed:   1.65;
    --lh-loose:     1.8;

    /* --- Spacing (8px base) --- */
    --space-1:   0.5rem;    /* 8px */
    --space-2:   1rem;      /* 16px */
    --space-3:   1.5rem;    /* 24px */
    --space-4:   2rem;      /* 32px */
    --space-5:   2.5rem;    /* 40px */
    --space-6:   3rem;      /* 48px */
    --space-8:   4rem;      /* 64px */
    --space-10:  5rem;      /* 80px */
    --space-12:  6rem;      /* 96px */
    --space-16:  8rem;      /* 128px */

    /* Semantic spacing */
    --spacing-stack-xs:     0.5rem;     /* 8px */
    --spacing-stack-sm:     0.75rem;    /* 12px */
    --spacing-stack-md:     1.5rem;     /* 24px */
    --spacing-stack-lg:     3rem;       /* 48px */
    --spacing-stack-xl:     5rem;       /* 80px */
    --spacing-gutter:       1.5rem;     /* 24px */
    --spacing-section:      4rem;       /* 64px */
    --spacing-section-mob:  2.5rem;     /* 40px */

    /* --- Layout --- */
    --container-max:        1280px;
    --container-lg:         1024px;
    --container-md:         768px;
    --container-padding:    1.5rem;     /* 24px */
    --container-padding-sm: 1rem;       /* 16px */

    --header-height:        80px;
    --header-height-mob:    64px;
    --mobile-nav-height:    64px;       /* Bottom nav */

    /* --- Border Radius --- */
    --radius-sm:    0.25rem;    /* 4px */
    --radius-md:    0.5rem;     /* 8px */
    --radius-lg:    0.75rem;    /* 12px */
    --radius-xl:    1rem;       /* 16px */
    --radius-2xl:   1.25rem;    /* 20px */
    --radius-full:  9999px;

    /* --- Shadows (all deep-navy based) --- */
    --shadow-xs:    0 1px 2px rgba(26, 46, 59, 0.06);
    --shadow-sm:    0 1px 4px rgba(26, 46, 59, 0.08), 0 2px 8px rgba(26, 46, 59, 0.06);
    --shadow-md:    0 4px 12px rgba(26, 46, 59, 0.10), 0 2px 6px rgba(26, 46, 59, 0.08);
    --shadow-lg:    0 8px 24px rgba(26, 46, 59, 0.12), 0 4px 12px rgba(26, 46, 59, 0.08);
    --shadow-xl:    0 16px 40px rgba(26, 46, 59, 0.14), 0 8px 20px rgba(26, 46, 59, 0.10);
    --shadow-2xl:   0 24px 60px rgba(26, 46, 59, 0.18);
    --shadow-teal:  0 4px 16px rgba(30, 155, 166, 0.30);
    --shadow-gold:  0 4px 16px rgba(30, 155, 166, 0.30);  /* alias for legacy refs */
    --shadow-inset: inset 0 2px 4px rgba(26, 46, 59, 0.08);

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

    /* --- Z-index --- */
    --z-below:      -1;
    --z-base:        0;
    --z-raised:     10;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-overlay:    400;
    --z-modal:      500;
    --z-toast:      600;

    /* --- Glass Panel Effect --- */
    --glass-bg:         rgba(255, 255, 255, 0.85);
    --glass-border:     rgba(255, 255, 255, 0.30);
    --glass-blur:       12px;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    direction: rtl;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* RTL body padding for mobile bottom nav — only when nav is visible.
   Accounts for iOS safe-area-inset-bottom (home bar) so content
   isn't hidden behind the bar on notch devices. Falls back to 0px. */
@media (max-width: 768px) {
    body.has-mobile-nav {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    }
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--color-teal);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}


/* ============================================================
   3. TYPOGRAPHY SCALE
   ============================================================ */

.text-display-lg {
    font-size: var(--fs-display-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}
.text-display-md {
    font-size: var(--fs-display-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}
.text-headline-xl {
    font-size: var(--fs-headline-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.text-headline-lg {
    font-size: var(--fs-headline-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.text-headline-md {
    font-size: var(--fs-headline-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.text-title-md {
    font-size: var(--fs-title-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}
.text-title-sm {
    font-size: var(--fs-title-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}
.text-body-lg {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
}
.text-body-md {
    font-size: var(--fs-body-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
}
.text-label-md {
    font-size: var(--fs-label-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}
.text-label-sm {
    font-size: var(--fs-label-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}
.text-caption {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
}

/* Semantic text colors */
.text-navy    { color: var(--color-deep-navy); }
.text-gold    { color: var(--color-regal-gold); }
.text-muted   { color: var(--color-text-muted); }
.text-light   { color: var(--color-text-light); }
.text-inverse { color: var(--color-text-inverse); }


/* ============================================================
   4. LAYOUT SYSTEM
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-md {
    max-width: var(--container-md);
}

/* Section spacing */
.section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.section-sm {
    padding-top: var(--spacing-stack-lg);
    padding-bottom: var(--spacing-stack-lg);
}

/* Grid system */
.grid {
    display: grid;
    gap: var(--spacing-gutter);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Flex utilities */
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }


/* ============================================================
   5. UTILITY CLASSES
   ============================================================ */

/* Glass Panel */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

/* Hover lift animation */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Ambient shadow */
.ambient-shadow { box-shadow: var(--shadow-md); }

/* Gold underline accent */
.gold-underline {
    position: relative;
    display: inline-block;
}
.gold-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 100%;
    height: 3px;
    background: var(--color-regal-gold);
    border-radius: var(--radius-full);
}

/* Section title pattern */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.section-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 2rem;
    background: var(--color-regal-gold);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Material Symbols base */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}
.icon-filled .material-symbols-outlined,
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }

/* Divider */
.divider {
    height: 1px;
    background: var(--color-border);
    border: none;
    margin: var(--space-3) 0;
}

/* Visually hidden (accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   6. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Mobile first — add overrides for larger screens */

@media (max-width: 480px) {
    :root {
        --fs-display-lg: 2rem;
        --fs-headline-xl: 1.625rem;
        --fs-headline-lg: 1.375rem;
        --spacing-section: var(--spacing-section-mob);
    }
    .container {
        padding-right: var(--container-padding-sm);
        padding-left: var(--container-padding-sm);
    }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :root {
        --fs-display-lg: 2.25rem;
        --fs-headline-xl: 1.75rem;
        --spacing-section: var(--spacing-section-mob);
    }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}