/**
 * 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);
}

/* ── Global preloader (logo + ring) ── */
.preloader.js-preloader .preloader__bg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--eman-purple);
}

.preloader.js-preloader .logo-loading-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader.js-preloader .loading-ring {
    position: absolute;
    inset: 0;
    border: 4px solid rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eman-preloader-spin 1.5s linear infinite;
}

@keyframes eman-preloader-spin {
    to { transform: rotate(360deg); }
}

.preloader.js-preloader .platform-logo {
    max-width: 80px;
    height: auto;
}

/* ══════════════════════════════════════════════════════
   Dark mode — unified design tokens (site-wide)
   ══════════════════════════════════════════════════════ */
html.-dark-mode {
    color-scheme: dark;

    /* Surfaces */
    --eman-bg: #181f2c;
    --eman-bg-light: #0f1319;
    --eman-bg-subtle: #222a38;
    --eman-surface-elevated: #1e2636;

    /* Text */
    --eman-text-dark: #eef1f6;
    --eman-text-light: #c5cdd9;
    --eman-text-muted: #8d99ae;

    /* Borders */
    --eman-border-light: #2d3748;
    --eman-border: #3f4d63;

    /* Brand accents (lifted for contrast on dark) */
    --eman-purple-light: #d4a5e0;
    --eman-accent: #4dd0e1;

    /* Semantic */
    --eman-success: #34d399;
    --eman-success-bg: rgba(52, 211, 153, 0.12);
    --eman-warning: #fbbf24;
    --eman-warning-bg: rgba(251, 191, 36, 0.1);
    --eman-error: #f87171;
    --eman-error-bg: rgba(248, 113, 113, 0.1);
    --eman-info: #60a5fa;
    --eman-info-bg: rgba(96, 165, 250, 0.1);

    /* Shadows & focus */
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.32);
    --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.35);
    --focus-ring-color: rgba(212, 165, 224, 0.28);

    /* Shared semantic (dashboard + public pages) */
    --color-bg-main-dark: var(--eman-bg-light);
    --color-bg-card-dark: var(--eman-bg);
    --color-text-primary-dark: var(--eman-text-dark);
    --color-text-secondary-dark: var(--eman-text-muted);
    --color-border-primary-dark: var(--eman-border-light);

    /* Legacy template utilities (main.css) */
    --color-dark-1: #eef1f6;
    --color-dark-3: #c5cdd9;
    --color-light-3: #222a38;
    --color-light-4: #222a38;
    --color-light-5: #2d3748;
    --color-light-6: #222a38;
    --color-light-9: #222a38;
    --color-purple-3: #2a3344;
}

html.-dark-mode body {
    background-color: var(--eman-bg-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .button.-purple-3,
html.-dark-mode .eman-btn-secondary {
    background-color: var(--eman-bg-subtle);
    color: var(--eman-purple-light) !important;
    border-color: var(--eman-border-light);
}

html.-dark-mode .button.-purple-3:hover:not(:disabled),
html.-dark-mode .eman-btn-secondary:hover:not(:disabled) {
    background-color: var(--eman-surface-elevated);
    border-color: rgba(212, 165, 224, 0.35);
}

html.-dark-mode .button.-outline-purple-1,
html.-dark-mode .eman-btn-outline {
    color: var(--eman-purple-light) !important;
    border-color: rgba(212, 165, 224, 0.55);
}

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

html.-dark-mode .eman-card {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
    box-shadow: var(--shadow-card);
}

html.-dark-mode .eman-form-label {
    color: var(--eman-text-dark);
}

html.-dark-mode .eman-form-input {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .eman-form-input:focus {
    background: var(--eman-bg);
    border-color: var(--eman-purple-light);
}

html.-dark-mode .eman-auth-wrap {
    background: radial-gradient(circle at 50% 0%, rgba(106, 27, 154, 0.12), transparent 55%), var(--eman-bg-light);
}

html.-dark-mode .eman-auth-card {
    background: var(--eman-bg);
    border: 1px solid var(--eman-border-light);
    box-shadow: var(--shadow-elevated);
}

html.-dark-mode .eman-auth-subtitle {
    color: var(--eman-text-muted);
}

html.-dark-mode .eman-link {
    color: var(--eman-purple-light);
}

html.-dark-mode .eman-link:hover {
    color: #e9c4ef;
}