/**
 * Landing Page — Design Tokens (variables.css)
 * ─────────────────────────────────────────────
 * Edit this file to restyle the entire landing page.
 * All CSS variables are consumed in landing.css.
 */

:root {
    /* ── Brand Colors ───────────────────────────────────────── */
    --clr-primary:       #1E90FF;   /* Main brand / CTA color   */
    --clr-primary-dark:  #0070E0;   /* Hover / pressed state    */
    --clr-primary-light: #5AAFFF;   /* Tint, badges             */
    --clr-secondary:     #F97066;   /* Coral                    */
    --clr-accent:        #0D9488;   /* Teal highlights          */
    --clr-accent-dark:   #0F766E;

    /* ── Neutrals ───────────────────────────────────────────── */
    --clr-white:         #FFFFFF;
    --clr-bg:            #FAFBFF;   /* Page background          */
    --clr-bg-alt:        #F1F5F9;   /* Alternate section bg     */
    --clr-surface:       #FFFFFF;   /* Card / panel background  */
    --clr-text:          #0F172A;   /* Primary text             */
    --clr-text-muted:    #64748B;   /* Secondary / caption text */
    --clr-text-light:    #94A3B8;   /* Placeholder / hint       */
    --clr-border:        #E2E8F0;   /* Borders, dividers        */

    /* ── Gradients ──────────────────────────────────────────── */
    --gradient-primary:  linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%);
    --gradient-accent:   linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent) 100%);
    --gradient-hero:     linear-gradient(135deg, #1E90FF 0%, #0D9488 50%, #F97066 100%);
    --gradient-dark:     linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'Fira Code', 'Courier New', monospace;

    /* Arabic / RTL fonts */
    --font-arabic:         'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-arabic-heading: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-arabic-prose:   'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;  /* same as site font */

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.25rem;    /* 20px */
    --fs-xl:   1.5rem;     /* 24px */
    --fs-2xl:  1.875rem;   /* 30px */
    --fs-3xl:  2.25rem;    /* 36px */
    --fs-4xl:  3rem;       /* 48px */
    --fs-5xl:  3.75rem;    /* 60px */

    /* ── Spacing ────────────────────────────────────────────── */
    --space-section:     5rem;      /* Vertical section padding */
    --space-section-sm:  3rem;
    --container-max:     1200px;    /* Max layout width         */
    --container-pad:     1.5rem;    /* Horizontal gutters       */

    /* ── Border Radius ──────────────────────────────────────── */
    --radius-xs:  0.25rem;
    --radius-sm:  0.5rem;
    --radius-md:  0.75rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-glow: 0 0 40px rgba(30, 144, 255, 0.25);
    --shadow-card: 0 8px 32px rgba(30, 144, 255, 0.08);

    /* ── Transitions ────────────────────────────────────────── */
    --ease-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ─────────────────────────────────────────────── */
    --nav-height: 4rem;
    --nav-bg:     rgba(255,255,255,0.85);
    --nav-blur:   saturate(180%) blur(20px);
}

/* ── Dark mode overrides ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --clr-bg:      #0F0F1A;
        --clr-bg-alt:  #1A1A2E;
        --clr-surface: #1E1E32;
        --clr-text:    #F1F5F9;
        --clr-text-muted: #94A3B8;
        --clr-text-light: #64748B;
        --clr-border:  #2D2D4E;
        --nav-bg:      rgba(15,15,26,0.85);
    }
}