/* Explain: Base reset and typography defaults. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

/* تحسين شكل الأزرار */
.btn-brand {
    @apply inline-flex items-center justify-center rounded-full bg-[var(--primary-color)] px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:bg-[var(--primary-hover)] hover:-translate-y-0.5 hover:shadow-lg focus:ring-2 focus:ring-[var(--primary-color)] focus:ring-offset-2;
}

.btn-secondary {
    @apply inline-flex items-center justify-center rounded-full bg-[var(--secondary-color)] px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:bg-[var(--secondary-hover)] hover:-translate-y-0.5 hover:shadow-lg focus:ring-2 focus:ring-[var(--secondary-color)] focus:ring-offset-2;
}

.btn-outline-brand {
    @apply inline-flex items-center justify-center rounded-full border-2 border-[var(--primary-color)] bg-transparent px-6 py-3 text-sm font-semibold text-[var(--primary-color)] transition-all duration-300 hover:bg-[var(--primary-color)] hover:text-white focus:ring-2 focus:ring-[var(--primary-color)] focus:ring-offset-2;
}