:root {
    --navy: #102a43;
    --turquoise: #1abc9c;
    --gold: #f4c542;
    --bg-soft: #f5f7fa;
    --text-main: #222;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--bg-soft);
    color: var(--text-main);
}

/* ألوان مخصصة */
.bg-navy {
    background-color: var(--navy) !important;
}

.btn-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #222;
}

.btn-gold:hover {
    filter: brightness(0.95);
}

.btn-turquoise {
    background-color: var(--turquoise);
    border-color: var(--turquoise);
    color: #fff;
}

.btn-turquoise:hover {
    filter: brightness(0.95);
}

.text-navy {
    color: var(--navy);
}

.border-navy {
    border-color: var(--navy) !important;
}

/* قسم الهيرو */
.hero-section {
    background: linear-gradient(135deg, var(--navy), #184d80);
    color: #fff;
}

/* الصورة */
.profile-image-wrapper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    padding: 5px;
    background: radial-gradient(circle at top left, var(--gold), var(--turquoise));
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* النصوص */
.hero-name {
    font-size: 2rem;
    font-weight: 700;
}

.hero-title {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.9;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--navy);
}

/* بطاقات المشاريع */
.project-card {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e1e5ee;
    height: 100%;
}

.project-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.project-tech {
    font-size: 0.9rem;
    color: #555;
}

/* الفوتر */
.footer {
    background-color: #fff;
    border-top: 1px solid #e1e5ee;
    color: #666;
}

/* دعم RTL/LTR */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="ltr"] body {
    text-align: left;
}