/**
 * Eman El-Dahshan Platform — Design tokens & shared components
 * Single source of truth for colors, spacing, radius, shadows, buttons, forms.
 */

:root {
    /* ── Brand colors ── */
    --eman-purple: #6a1b9a;
    --eman-purple-light: #ab47bc;
    --eman-purple-dark: #4a148c;
    --eman-accent: #00bcd4;
    --color-purple-1: var(--eman-purple);
    --color-green-1: #00a896;
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1da851;

    /* ── Surfaces & text ── */
    --eman-bg: #ffffff;
    --eman-bg-light: #f8f9fe;
    --eman-bg-subtle: #f1f1f7;
    --eman-text-dark: #333333;
    --eman-text-light: #555555;
    --eman-text-muted: #64748b;
    --eman-border-light: #e0e0e0;
    --eman-border: #cbd5e1;

    /* ── Semantic ── */
    --eman-success: #059669;
    --eman-success-bg: #ecfdf5;
    --eman-warning: #d97706;
    --eman-warning-bg: #fffbeb;
    --eman-error: #dc2626;
    --eman-error-bg: #fef2f2;
    --eman-info: #1565c0;
    --eman-info-bg: #e3f2fd;

    /* ── Spacing scale ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-section-y: 80px;
    --space-section-y-sm: 60px;

    /* ── Border radius ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ── Shadows (3 levels) ── */
    --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 12px 40px rgba(106, 27, 154, 0.08);
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.06);

    /* ── Focus & motion ── */
    --focus-ring-color: rgba(106, 27, 154, 0.12);
    --focus-ring: 0 0 0 3px var(--focus-ring-color);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* ── Typography ── */
    --line-height-body: 1.7;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ── Forms ── */
    --input-border: var(--eman-border);
    --input-focus: var(--eman-purple);
    --input-height: 50px;
    --input-radius: var(--radius-sm);
    --input-padding-x: 15px;

    /* ── Buttons ── */
    --btn-height: 48px;
    --btn-height-sm: 40px;
    --btn-padding-x: var(--space-4);
    --btn-padding-x-sm: var(--space-3);
    --btn-radius: var(--radius-sm);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-gap: var(--space-2);
}

/* ── Base ── */
body.eman-theme {
    font-family: 'Work Sans', 'Cairo', sans-serif;
    color: var(--eman-text-dark);
    line-height: var(--line-height-body);
}

.arabic-text,
h2.arabic-title,
p.arabic-paragraph,
.footer h5,
.footer p,
.footer .footer-header-socials__title,
.footer .arabic-paragraph {
    font-family: 'Cairo', 'Work Sans', sans-serif;
    direction: rtl;
    text-align: right;
}

.lucide-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

/* ── Focus (accessibility) ── */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--eman-purple);
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.eman-form-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Button system ── */
.button.-purple-1,
.button.-purple-3,
.button.-outline-purple-1,
.button.-whatsapp,
.eman-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-height-sm);
    padding-inline: var(--btn-padding-x-sm);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-radius);
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    cursor: pointer;
}

.button.-purple-1:disabled,
.button.-purple-3:disabled,
.button.-outline-purple-1:disabled,
.eman-btn:disabled,
.eman-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Primary */
.button.-purple-1,
.eman-btn-primary {
    background-color: var(--eman-purple);
    border: 1px solid var(--eman-purple);
    color: #fff !important;
}

.button.-purple-1:hover:not(:disabled),
.eman-btn-primary:hover:not(:disabled) {
    background-color: var(--eman-purple-light);
    border-color: var(--eman-purple-light);
    color: #fff !important;
    box-shadow: var(--shadow-card);
}

/* Secondary */
.button.-purple-3,
.eman-btn-secondary {
    background-color: #f7f5fa;
    border: 1px solid transparent;
    color: var(--eman-purple) !important;
}

.button.-purple-3:hover:not(:disabled),
.eman-btn-secondary:hover:not(:disabled) {
    background-color: #f3eef7;
    border-color: rgba(106, 27, 154, 0.12);
}

/* Outline */
.button.-outline-purple-1,
.eman-btn-outline {
    border: 1px solid var(--eman-purple);
    color: var(--eman-purple) !important;
    background: transparent;
}

.button.-outline-purple-1:hover:not(:disabled),
.eman-btn-outline:hover:not(:disabled) {
    background-color: rgba(106, 27, 154, 0.05);
}

/* WhatsApp */
.button.-whatsapp,
.eman-btn-whatsapp {
    background-color: var(--color-whatsapp);
    border: 1px solid var(--color-whatsapp);
    color: #fff !important;
}

.button.-whatsapp:hover:not(:disabled),
.eman-btn-whatsapp:hover:not(:disabled) {
    background-color: var(--color-whatsapp-hover);
    border-color: var(--color-whatsapp-hover);
    color: #fff !important;
}

.button.-purple-1 .lucide-icon,
.button.-whatsapp .lucide-icon,
.eman-btn-primary .lucide-icon { color: #fff; }

.button.-purple-3 .lucide-icon,
.eman-btn-secondary .lucide-icon { color: var(--eman-purple); }

.text-purple-1 {
    color: var(--eman-purple) !important;
}

/* ── Cards ── */
.eman-card {
    background: var(--eman-bg);
    border: 1px solid var(--eman-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

/* ── Forms ── */
.eman-form-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--eman-text-dark);
}

.eman-form-input {
    width: 100%;
    min-height: var(--input-height);
    padding: var(--space-3) var(--input-padding-x);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    font-family: inherit;
    background: var(--eman-bg-light);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.eman-form-input:focus {
    outline: none;
    border-color: var(--input-focus);
    background: var(--eman-bg);
    box-shadow: var(--focus-ring);
}

.eman-form-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--eman-bg-subtle);
}

/* ── Alerts ── */
.eman-alert {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    font-size: 0.95rem;
}

.eman-alert.success {
    background: var(--eman-success-bg);
    color: var(--eman-success);
    border: 1px solid #a7f3d0;
}

.eman-alert.error {
    background: var(--eman-error-bg);
    color: var(--eman-error);
    border: 1px solid #fecaca;
}

.eman-alert.info {
    background: var(--eman-info-bg);
    color: var(--eman-info);
    border: 1px solid #bbdefb;
}

/* ── Auth layout ── */
.eman-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px var(--space-3) var(--space-6);
    background: radial-gradient(circle at 50% 0%, rgba(106, 27, 154, 0.06), transparent 55%), #f4f7f6;
}

.eman-auth-card {
    width: 100%;
    max-width: 480px;
    padding: var(--space-5) var(--space-4);
    direction: rtl;
    text-align: right;
}

.eman-auth-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--eman-purple);
    margin-bottom: var(--space-2);
}

.eman-auth-subtitle {
    color: var(--eman-text-light);
    margin-bottom: var(--space-4);
}

.eman-link {
    color: var(--eman-purple);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-fast);
}

.eman-link:hover {
    color: var(--eman-purple-light);
    text-decoration: underline;
}

.eman-link:focus-visible {
    border-radius: var(--radius-sm);
}