/* =============================================================================
   LexaPartner — Design Tokens (main.css)
   Core spacing, typography scale, shadows, transitions, and color palette.
   ============================================================================= */

/* ── Self-Hosted Fonts ────────────────────────────────────────────────────────── */
@font-face { font-family: 'Google Sans'; src: url('/fonts/GoogleSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url('/fonts/GoogleSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url('/fonts/GoogleSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('/fonts/Cairo-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('/fonts/Cairo-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('/fonts/Cairo-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/fonts/NotoSansArabic_ExtraCondensed-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans Condensed'; src: url('/fonts/OpenSans_Condensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Color Palette ────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --lx-accent:          #e8611a;
    --lx-accent-hover:    #c4420e;
    --lx-accent-light:    #ff7b39;

    /* Spacing scale (4px base) */
    --lx-space-1:  0.25rem;   /*  4px */
    --lx-space-2:  0.5rem;    /*  8px */
    --lx-space-3:  0.75rem;   /* 12px */
    --lx-space-4:  1rem;      /* 16px */
    --lx-space-5:  1.5rem;    /* 24px */
    --lx-space-6:  2rem;      /* 32px */
    --lx-space-7:  3rem;      /* 48px */
    --lx-space-8:  4rem;      /* 64px */

    /* Typography scale */
    --lx-fs-xs:    0.75rem;
    --lx-fs-sm:    0.875rem;
    --lx-fs-base:  1rem;
    --lx-fs-md:    1.125rem;
    --lx-fs-lg:    1.25rem;
    --lx-fs-xl:    1.5rem;
    --lx-fs-2xl:   2rem;
    --lx-fs-3xl:   2.5rem;
    --lx-fs-4xl:   3rem;

    /* Font stacks */
    --lx-font-en-primary:    'Open Sans Condensed', 'Google Sans', sans-serif;
    --lx-font-en-secondary:  'Open Sans Condensed', sans-serif;
    --lx-font-ar-primary:    'Noto Sans Arabic', sans-serif;
    --lx-font-ar-secondary:  'Cairo', sans-serif;

    /* Shadows */
    --lx-shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
    --lx-shadow-md:   0 4px 6px rgba(0,0,0,0.08);
    --lx-shadow-lg:   0 10px 25px rgba(0,0,0,0.12);
    --lx-shadow-xl:   0 20px 50px rgba(0,0,0,0.16);

    /* Borders */
    --lx-radius-sm:   4px;
    --lx-radius-md:   8px;
    --lx-radius-lg:   12px;
    --lx-radius-xl:   16px;
    --lx-radius-full: 50%;

    /* Transitions */
    --lx-transition-fast:   0.15s ease;
    --lx-transition-base:   0.3s ease;
    --lx-transition-slow:   0.5s ease;

    /* Layout */
    --lx-header-height:  64px;
    --lx-footer-min-height: 200px;
    --lx-content-max-width: 1200px;
}

/* ── Global resets that respect themes ────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

main {
    flex: 1;
}

/* ── Utility classes ──────────────────────────────────────────────────────────── */
.lx-container {
    max-width: var(--lx-content-max-width);
    margin: 0 auto;
    padding: 0 var(--lx-space-4);
}

.lx-accent-text {
    color: var(--lx-accent) !important;
}

.lx-accent-bg {
    background-color: var(--lx-accent) !important;
}

/* ── Print styles ─────────────────────────────────────────────────────────────── */
@media print {
    .theme-panel,
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}