:root {
    /* Brand colors */
    --primary: #df4907;
    --secondary: #074d64;
    --accent: #ffdf99;
    --success: #00c853;
    --warning: #9cc3c4;
    --danger: #ff3d71;
    --primary-glow: color-mix(in srgb, #df4907 15%, transparent);

    /* Surfaces & text */
    --bg-main: #ffffff;
    --bg-sec: #f5f5ff;
    --bg-card: #f2fbfd;
    --bg-card-hover: #9cc3c;
    --text-main: #f4511e;
    --text-sec: #64748b;
    --text-muted: #084d64;

    /* Buttons */
    --btn-bg: #df4907;
    --btn-text: #ffffff;
    --btn-radius: 9999px;

    /* Header / Footer */
    --header-bg: #074d64;
    --header-text: #f3f4f6;
    --footer-bg: #074d64;
    --footer-text: #ffffff;

    /* CTA */
    --cta-bg: #f4f9fa;
    --cta-text: #074d64;

    /* Layout & type */
    --section-spacing: 6rem;
    --font-base-size: 14px;
    --font-sans: 'Krungthep', 'Fredoka', -apple-system, sans-serif;
    --font-ar: 'Cairo', 'Tajawal', sans-serif;
}

/* Admin-configurable dark-mode overrides for sections that keep their own
   colors instead of following --bg-main/--text-main like the rest of the
   site (footer, CTA). html[data-theme="dark"] has higher specificity than
   :root above, so this always wins once the theme toggle switches to dark. */
html[data-theme="dark"] {
    --footer-bg: #010a0d;
    --footer-text: #9ca3af;
    --cta-bg: #010a0d;
    --cta-text: #ffffff;
}

html {
    font-size: 16px;
}

body {
    font-size: var(--font-base-size);
    font-family: var(--font-sans);
    }

body.rtl {
    font-family: var(--font-ar);
}

/* Hero background image */
.hero {
    }

/* Font sizes */
.hero-title { font-size: 36px; }
.hero-subtitle { font-size: calc(var(--font-base-size) * 0.675); }
.section-title { font-size: 24px; }
.card-title { font-size: 21px; }
.stat-item h2 { font-size: clamp(2rem, 3.2vw, 3rem); color: var(--primary); }

/* Section spacing */
.section {
    padding: var(--section-spacing) 0;
}

/* Nav / links using brand color */
.nav-link:hover, .tab-btn:hover, .card-link:hover { color: var(--primary); }
.hero-tag { background: var(--bg-main); color: var(--primary); }
.section-subtitle { background: var(--bg-main); color: var(--primary); }
/* NOTE: .card background is intentionally NOT set here. style.css already
   pins it to --bg-card so it stays independent of the page background;
   redeclaring it against --bg-main here previously fought that rule and
   silently re-coupled card color to background color (same specificity,
   this file loads after style.css, so this file always won). */

/* Header */
.navbar-inner { background: var(--header-bg); color: var(--header-text); }
/* Scoped to the desktop menu inside the navbar pill only — .mobile-menu is a
   separate white dropdown box (not inside .navbar-inner), so it must keep
   style.css's normal --text-sec color instead of inheriting header-text,
   which is near-white and unreadable on that white background. */
.navbar-inner .nav-link { color: var(--header-text); }

/* Portfolio image hover overlay */
.portfolio-img-wrapper { position: relative; }
.portfolio-img-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 0.3s;
}
.portfolio-img-wrapper:hover::before { opacity: 1; }

/* CTA section */
.cta-section { background: linear-gradient(135deg, var(--bg-main), var(--cta-bg)); }
.cta-neu-card { background: var(--cta-bg); color: var(--cta-text); }

/* Footer */
.footer-col h3 { color: #ffffff; }
.footer-links a { color: rgba(255,255,255,0.7); }
.social-btn { background: rgba(255,255,255,0.08); }
.social-btn:hover { background: var(--primary); }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .hero-illustration {
        display: none;
    }
}