/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700&family=Outfit:wght@400;500;600;700;800;900&family=Syne:wght@700;800&family=JetBrains+Mono:wght@300;600&family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500&display=swap');

/* ── Global Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* The `hidden` attribute must always win over a component's own `display`
   rule (e.g. `.rs__body { display: grid }`), which otherwise silently
   defeats it since both are author-origin rules of equal specificity. */
[hidden] {
  display: none !important;
}

/* CENTRAL COLOR PALETTE
 * Edit RGB channels here (red, green, blue: 0–255). All portfolio styles
 * reference these values, including gradients, borders and translucent shadows.
 * Brand: --rgb-brand-primary / --rgb-brand-secondary and their -dark variants.
 * Hero: --rgb-hero-* preserves the distinct blue used by the portrait section.
 * Existing theme aliases below choose light/dark colors. Fixed decorative colors
 * stay fixed across themes to preserve the current design.
 * Social logos, flags, images and admin-managed skill colors retain their own colors.
 */

:root {
  /* White surfaces can be themed independently of white text. */
  --rgb-neutral-surface: var(--rgb-white);

  /* base */
  --rgb-page-light: 234, 236, 245;
  --rgb-page-soft-light: 244, 245, 251;
  --rgb-section-background: var(--rgb-page-soft-light);
  --rgb-white: 255, 255, 255;
  --rgb-brand-primary: 51, 51, 204;
  --rgb-text-primary-light: 26, 26, 58;
  --rgb-text-secondary-light: 74, 74, 106;
  --rgb-text-muted-light: 138, 138, 178;
  --rgb-brand-secondary: 124, 92, 252;
  --rgb-shadow-light: 10, 10, 40;
  --rgb-page-dark: 9, 18, 40;
  --rgb-page-soft-dark: 13, 24, 51;
  --rgb-surface-dark: 17, 31, 63;
  --rgb-surface-tint-dark: 120, 150, 255;
  --rgb-border-dark: 127, 157, 255;
  --rgb-text-primary-dark: 231, 239, 255;
  --rgb-text-secondary-dark: 197, 211, 251;
  --rgb-text-muted-dark: 147, 167, 219;
  --rgb-brand-primary-dark: 131, 168, 255;
  --rgb-brand-secondary-dark: 110, 197, 255;
  --rgb-shadow-dark: 2, 8, 20;
  --rgb-hero-dots-background-image-dark: 125, 162, 255;
  --rgb-about-text-color-dark: 234, 241, 255;
  --rgb-tag-background-dark: 20, 37, 74;
  --rgb-tag-background-dark-2: 90, 133, 255;
  --rgb-tag-background-dark-3: 77, 180, 255;
  --rgb-tag-color-dark: 245, 249, 255;
  --rgb-footer-background-dark: 6, 15, 37;
  --rgb-footer-logo-color-dark: 237, 243, 255;
  --rgb-footer-link-color-dark: 156, 176, 223;
  --rgb-footer-social-background-dark: 133, 168, 255;
  --rgb-footer-social-color-dark: 200, 215, 255;

  /* intro-hero */
  --rgb-hero-accent: 0, 131, 213;
  --rgb-hero-text: 39, 56, 80;
  --rgb-hero-badge-border: 204, 229, 251;
  --rgb-hero-badge-background: 239, 247, 255;
  --rgb-hero-badge-text: 0, 117, 190;
  --rgb-hero-text-muted: 119, 135, 156;
  --rgb-hero-button: 0, 125, 202;
  --rgb-hero-button-hover: 0, 101, 166;
  --rgb-hero-contact-text: 82, 100, 123;
  --rgb-hero-divider: 229, 234, 240;
  --rgb-hero-portrait-background: 216, 245, 237;
  --rgb-hero-shadow: 28, 53, 77;
  --rgb-hero-accent-dark: 99, 186, 255;
  --rgb-hero-badge-background-dark: 20, 45, 73;
  --rgb-hero-badge-border-dark: 37, 69, 102;
  --rgb-hero-badge-text-dark: 140, 206, 255;
  --rgb-hero-text-muted-dark: 166, 183, 207;
  --rgb-hero-divider-dark: 40, 57, 82;
  --rgb-hero-identity-border-dark: 51, 71, 97;

  /* card */
  --rgb-card-btn-color: 246, 249, 255;

  /* details */
  --rgb-project-details-background: 246, 248, 255;
  --rgb-project-details-background-2: 237, 242, 255;
  --rgb-project-accent: 45, 71, 179;
  --rgb-project-details-hero-box-shadow: 19, 41, 116;
  --rgb-project-details-tag-color: 55, 84, 207;
  --rgb-project-title: 26, 31, 79;
  --rgb-project-description: 79, 89, 143;
  --rgb-project-button: 53, 87, 221;
  --rgb-project-btn-secondary-color: 31, 50, 131;
  --rgb-project-album-item-background: 248, 250, 255;
  --rgb-project-album-mobile-background: 245, 248, 255;
  --rgb-project-album-mobile-background-2: 238, 243, 255;
  --rgb-project-album-dialog-background: 10, 15, 38;
  --rgb-black: 0, 0, 0;

  /* gallery */
  --rgb-gallery-page-backdrop-background: 102, 138, 255;
  --rgb-gallery-page-backdrop-background-2: 89, 203, 255;
  --rgb-gallery-page-backdrop-background-3: 121, 92, 255;
  --rgb-phone-frame-background: 58, 63, 76;
  --rgb-phone-frame-background-2: 20, 25, 35;
  --rgb-phone-screen-background: 10, 15, 29;
  --rgb-phone-notch-background: 10, 12, 18;
  --rgb-preview-background: 8, 14, 30;
  --rgb-preview-nav-background: 19, 31, 61;

  /* home */
  --rgb-hero-background: 232, 234, 244;
  --rgb-hero-dots-background-image: 80, 80, 180;
  --rgb-blob-flutter-background: 84, 197, 248;
  --rgb-blob-flutter-background-2: 1, 125, 253;
  --rgb-vue-brand: 66, 184, 131;
  --rgb-vue-brand-dark: 53, 73, 94;
  --rgb-blob-soft1-background: 130, 100, 255;
  --rgb-blob-soft2-background: 255, 185, 130;
  --rgb-float-icon-color: 42, 42, 74;
  --rgb-available: 34, 197, 94;
  --rgb-hero-desc-color: 90, 90, 122;
  --rgb-btn-service-background: 36, 64, 179;
  --rgb-btn-service-background-2: 63, 108, 240;
  --rgb-btn-service-background-3: 71, 207, 162;
  --rgb-btn-service-border: 171, 255, 225;
  --rgb-btn-service-box-shadow: 38, 88, 184;
  --rgb-btn-service-border-2: 133, 255, 212;
  --rgb-btn-service-background-4: 31, 54, 161;
  --rgb-btn-service-background-5: 58, 97, 220;
  --rgb-btn-service-background-6: 53, 191, 145;
  --rgb-btn-service-box-shadow-2: 32, 102, 170;
  --rgb-box-shadow-box-shadow: 53, 196, 148;
  --rgb-hero-scroll-text-color: 144, 144, 176;
  --rgb-hero-scroll-track-border: 100, 100, 180;
  --rgb-about-card-box-shadow: 30, 30, 80;
  --rgb-cv-btn-background: 40, 40, 184;
  --rgb-stat-icon-background: 68, 68, 255;
  --rgb-stat-label-color: 122, 122, 154;
  --rgb-skill-card-glow-background: 100, 80, 255;
  --rgb-tag-color: 58, 58, 92;
  --rgb-tag-background: 240, 241, 248;
  --rgb-projects-sub-color: 136, 136, 170;
  --rgb-proj-card-text-background: 240, 241, 251;
  --rgb-proj-card-count-color: 144, 144, 184;
  --rgb-projects-service-btn-background: 43, 78, 204;
  --rgb-projects-service-btn-background-2: 79, 134, 255;
  --rgb-projects-service-btn-box-shadow: 38, 74, 196;
  --rgb-proj-card-img-background: 20, 20, 39;
  --rgb-proj-card-overlay-background: 9, 11, 34;
  --rgb-proj-card-img-background-2: 6, 8, 25;
  --rgb-proj-card-img-background-3: 19, 23, 76;
  --rgb-proj-card-img-background-4: 64, 88, 190;
  --rgb-proj-card-tag-color: 168, 182, 255;
  --rgb-indigo: 99, 102, 241;
  --rgb-proj-card-desc-color: 200, 203, 230;
  --rgb-proj-link-primary-background: 42, 69, 180;
  --rgb-private-dialog-background: 8, 11, 28;
  --rgb-private-dialog-panel-border: 36, 58, 152;
  --rgb-private-dialog-panel-box-shadow: 12, 28, 88;
  --rgb-private-dialog-close-border: 28, 44, 122;
  --rgb-private-dialog-close-background: 247, 249, 255;
  --rgb-private-dialog-close-color: 40, 63, 157;
  --rgb-private-dialog-title-color: 29, 45, 115;
  --rgb-private-dialog-text-color: 73, 86, 143;
  --rgb-private-dialog-btn-ghost-color: 43, 63, 149;
  --rgb-reviews-background: 92, 133, 255;
  --rgb-reviews-badge-color: 37, 64, 182;
  --rgb-reviews-title-color: 21, 36, 95;
  --rgb-reviews-subtitle-color: 95, 105, 148;
  --rgb-reviews-stat-border: 47, 76, 198;
  --rgb-reviews-stat-box-shadow: 20, 34, 96;
  --rgb-reviews-stat-color: 30, 53, 162;
  --rgb-reviews-stat-color-2: 104, 115, 163;
  --rgb-review-card-border: 66, 94, 205;
  --rgb-review-card-box-shadow: 18, 29, 79;
  --rgb-review-card-platform-color: 42, 62, 163;
  --rgb-review-card-stars-color: 197, 201, 223;
  --rgb-review-card-stars-color-2: 240, 180, 41;
  --rgb-review-card-title-color: 24, 43, 120;
  --rgb-review-card-text-color: 74, 86, 127;
  --rgb-review-card-footer-border-top: 49, 72, 167;
  --rgb-review-card-footer-color: 16, 33, 92;
  --rgb-review-card-footer-color-2: 123, 132, 173;
  --rgb-review-card-footer-color-3: 37, 83, 213;
  --rgb-cert-card-background: 15, 23, 50;
  --rgb-cert-card-overlay-background: 9, 18, 42;
  --rgb-cert-card-color: 202, 215, 255;
  --rgb-contact-blob-2-background: 255, 100, 140;
  --rgb-contact-link-arrow-color: 192, 192, 224;
  --rgb-rating: 234, 179, 8;
  --rgb-warning-text: 146, 64, 14;
  --rgb-error: 239, 68, 68;
  --rgb-form-char-count-color: 176, 176, 204;
  --rgb-warning: 245, 158, 11;
  --rgb-form-input-background: 248, 249, 255;
  --rgb-form-submit-background: 85, 85, 221;
  --rgb-available-strong: 22, 163, 74;
  --rgb-form-submit-background-2: 144, 144, 204;

  /* layout */
  --rgb-app-loader-background: 167, 230, 255;
  --rgb-app-loader-background-2: 205, 227, 255;
  --rgb-app-loader-background-3: 247, 250, 255;
  --rgb-app-loader-background-4: 233, 241, 255;
  --rgb-app-loader-background-5: 243, 248, 255;
  --rgb-app-loader-halo-one-background: 140, 201, 255;
  --rgb-app-loader-halo-two-background: 95, 134, 255;
  --rgb-loader-accent: 46, 83, 197;
  --rgb-app-loader-panel-box-shadow: 26, 43, 90;
  --rgb-loader-accent-bright: 76, 116, 255;
  --rgb-app-loader-spinner-border-top-color: 144, 204, 255;
  --rgb-app-loader-subtitle-color: 60, 77, 143;
  --rgb-app-loader-bar-fill-background: 114, 190, 255;
  --rgb-scroll-progress-background: 107, 130, 208;
  --rgb-scroll-progress-fill-background: 95, 126, 255;
  --rgb-scroll-progress-fill-background-2: 104, 217, 199;
  --rgb-scroll-progress-fill-box-shadow: 77, 142, 255;
  --rgb-scroll-progress-background-dark: 94, 124, 212;
  --rgb-scroll-progress-fill-background-dark: 137, 169, 255;
  --rgb-scroll-progress-fill-background-dark-2: 99, 203, 255;
  --rgb-scroll-progress-fill-background-dark-3: 112, 227, 206;
  --rgb-scroll-progress-fill-box-shadow-dark: 99, 171, 255;
  --rgb-header-inner-box-shadow: 35, 45, 110;
  --rgb-lang-toggle-desktop-box-shadow: 20, 30, 80;
  --rgb-header-backdrop-background: 6, 11, 24;
  --rgb-drawer-quick-info-gallery-background: 74, 99, 219;
  --rgb-drawer-quick-info-gallery-background-2: 103, 140, 255;
  --rgb-mobile-theme-switch-thumb-box-shadow: 8, 16, 40;
  --rgb-social-fab-link-box-shadow: 7, 20, 56;
  --rgb-social-fab-link-box-shadow-2: 8, 24, 70;
  --rgb-social-fab-icon-background: 24, 55, 119;
  --rgb-social-fab-toggle-background: 47, 78, 189;
  --rgb-social-fab-toggle-background-2: 33, 58, 149;
  --rgb-social-fab-toggle-box-shadow: 17, 37, 118;
  --rgb-social-fab-toggle-box-shadow-2: 18, 38, 120;
  --rgb-social-fab-toggle-ring-border: 111, 140, 236;
  --rgb-social-fab-toggle-icon-background: 240, 246, 255;
  --rgb-social-fab-link-background-dark: 15, 30, 64;
  --rgb-social-fab-link-box-shadow-dark: 2, 9, 25;
  --rgb-social-fab-toggle-background-dark: 86, 127, 255;
  --rgb-social-fab-toggle-background-dark-2: 59, 95, 203;
  --rgb-social-fab-toggle-box-shadow-dark: 4, 16, 49;
  --rgb-footer-logo-color: 165, 180, 252;
  --rgb-footer-copy-color: 112, 112, 160;
  --rgb-footer-heart-color: 248, 113, 113;
  --rgb-btn-ghost-border: 180, 180, 210;

  /* request-service */
  --rgb-rs-blue-400: 185, 199, 255;
  --rgb-rs-blue-600: 31, 47, 136;
  --rgb-rs-blue-700: 18, 32, 95;
  --rgb-rs-error: 214, 64, 89;
  --rgb-rs-blue-400-dark: 167, 191, 255;
  --rgb-rs-blue-500-dark: 136, 171, 255;
  --rgb-rs-blue-600-dark: 154, 184, 255;
  --rgb-rs-blue-700-dark: 202, 222, 255;
  --rgb-rs-input-bg-dark: 15, 29, 61;
  --rgb-rs-error-dark: 255, 125, 143;
  --rgb-rs-orb-b-background: 139, 92, 246;
  --rgb-rs-orb-c-background: 59, 130, 246;
  --rgb-success-background: 236, 253, 245;
  --rgb-success: 16, 185, 129;
  --rgb-error-background: 254, 242, 242;
  --rgb-error-strong: 220, 38, 38;
  --rgb-rs-input-icon-color: 156, 163, 175;
  --rgb-rs-btn-next-background: 129, 140, 248;
  --rgb-rs-dialog-background: 15, 14, 45;
  --rgb-rs-dialog-panel-box-shadow: 30, 27, 75;
  --rgb-rs-dialog-icon-border: 167, 243, 208;

}

/* Sage / warm-neutral light theme. Change these master colors to tune the look.
 * This block does not apply to the existing dark theme.
 * White foreground text remains white; backgrounds use neutral-surface. */
:root:not([data-theme="dark"]) {
  --rgb-sage-background: 234, 235, 232; /* #EAEBE8 */
  --rgb-sage-soft: 217, 216, 213; /* #D9D8D5 */
  --rgb-section-background: 234, 235, 232; /* #EAEBE8: About, Skills and Contact backgrounds */
  --rgb-sage-surface: 242, 243, 239;
  --rgb-sage-heading: 30, 49, 41; /* #1E3129 */
  --rgb-sage-text: 65, 74, 79; /* #414A4F */
  --rgb-sage-muted: 88, 105, 96;
  --rgb-sage-primary: 58, 90, 74; /* #3A5A4A */
  --rgb-sage-primary-soft: 70, 103, 85;
  --rgb-sage-secondary: 129, 160, 143; /* #81A08F */
  --rgb-sage-shadow: 21, 34, 28;

  --rgb-page-light: var(--rgb-sage-background);
  --rgb-page-soft-light: var(--rgb-sage-soft);
  --rgb-brand-primary: var(--rgb-sage-primary);
  --rgb-text-primary-light: var(--rgb-sage-heading);
  --rgb-text-secondary-light: var(--rgb-sage-text);
  --rgb-text-muted-light: var(--rgb-sage-muted);
  --rgb-brand-secondary: var(--rgb-sage-primary-soft);
  --rgb-shadow-light: var(--rgb-sage-shadow);
  --rgb-hero-accent: var(--rgb-sage-primary);
  --rgb-hero-text: var(--rgb-sage-heading);
  --rgb-hero-badge-border: var(--rgb-sage-secondary);
  --rgb-hero-badge-background: var(--rgb-sage-soft);
  --rgb-hero-badge-text: var(--rgb-sage-primary);
  --rgb-hero-text-muted: var(--rgb-sage-muted);
  --rgb-hero-button: var(--rgb-sage-primary);
  --rgb-hero-button-hover: var(--rgb-sage-heading);
  --rgb-hero-contact-text: var(--rgb-sage-text);
  --rgb-hero-divider: var(--rgb-sage-secondary);
  --rgb-hero-shadow: var(--rgb-sage-shadow);
  --rgb-card-btn-color: var(--rgb-sage-surface);
  --rgb-project-details-background: var(--rgb-sage-surface);
  --rgb-project-details-background-2: var(--rgb-sage-surface);
  --rgb-project-accent: var(--rgb-sage-primary);
  --rgb-project-details-hero-box-shadow: var(--rgb-sage-shadow);
  --rgb-project-details-tag-color: var(--rgb-sage-primary);
  --rgb-project-title: var(--rgb-sage-heading);
  --rgb-project-description: var(--rgb-sage-text);
  --rgb-project-button: var(--rgb-sage-primary);
  --rgb-project-btn-secondary-color: var(--rgb-sage-primary);
  --rgb-project-album-item-background: var(--rgb-sage-surface);
  --rgb-project-album-mobile-background: var(--rgb-sage-surface);
  --rgb-project-album-mobile-background-2: var(--rgb-sage-surface);
  --rgb-project-album-dialog-background: var(--rgb-sage-shadow);
  --rgb-gallery-page-backdrop-background: var(--rgb-sage-secondary);
  --rgb-gallery-page-backdrop-background-2: var(--rgb-sage-secondary);
  --rgb-gallery-page-backdrop-background-3: var(--rgb-sage-secondary);
  --rgb-hero-background: var(--rgb-sage-surface);
  --rgb-hero-dots-background-image: var(--rgb-sage-primary);
  --rgb-blob-soft1-background: var(--rgb-sage-secondary);
  --rgb-float-icon-color: var(--rgb-sage-heading);
  --rgb-hero-desc-color: var(--rgb-sage-muted);
  --rgb-btn-service-background: var(--rgb-sage-primary);
  --rgb-btn-service-background-2: var(--rgb-sage-primary-soft);
  --rgb-btn-service-box-shadow: var(--rgb-sage-primary);
  --rgb-btn-service-background-4: var(--rgb-sage-heading);
  --rgb-btn-service-background-5: var(--rgb-sage-primary);
  --rgb-btn-service-box-shadow-2: var(--rgb-sage-primary);
  --rgb-hero-scroll-text-color: var(--rgb-sage-muted);
  --rgb-hero-scroll-track-border: var(--rgb-sage-primary);
  --rgb-about-card-box-shadow: var(--rgb-sage-shadow);
  --rgb-cv-btn-background: var(--rgb-sage-primary);
  --rgb-stat-icon-background: var(--rgb-sage-secondary);
  --rgb-stat-label-color: var(--rgb-sage-muted);
  --rgb-skill-card-glow-background: var(--rgb-sage-secondary);
  --rgb-tag-color: var(--rgb-sage-text);
  --rgb-tag-background: var(--rgb-sage-surface);
  --rgb-projects-sub-color: var(--rgb-sage-muted);
  --rgb-proj-card-text-background: var(--rgb-sage-surface);
  --rgb-proj-card-count-color: var(--rgb-sage-muted);
  --rgb-projects-service-btn-background: var(--rgb-sage-primary);
  --rgb-projects-service-btn-background-2: var(--rgb-sage-primary-soft);
  --rgb-projects-service-btn-box-shadow: var(--rgb-sage-primary);
  --rgb-proj-card-img-background: var(--rgb-sage-heading);
  --rgb-proj-card-overlay-background: var(--rgb-sage-shadow);
  --rgb-proj-card-img-background-2: var(--rgb-sage-heading);
  --rgb-proj-card-img-background-3: var(--rgb-sage-heading);
  --rgb-proj-card-img-background-4: var(--rgb-sage-primary);
  --rgb-proj-card-tag-color: var(--rgb-sage-soft);
  --rgb-indigo: var(--rgb-sage-secondary);
  --rgb-proj-card-desc-color: var(--rgb-sage-soft);
  --rgb-proj-link-primary-background: var(--rgb-sage-primary);
  --rgb-private-dialog-background: var(--rgb-sage-shadow);
  --rgb-private-dialog-panel-border: var(--rgb-sage-primary);
  --rgb-private-dialog-panel-box-shadow: var(--rgb-sage-shadow);
  --rgb-private-dialog-close-border: var(--rgb-sage-heading);
  --rgb-private-dialog-close-background: var(--rgb-sage-surface);
  --rgb-private-dialog-close-color: var(--rgb-sage-primary);
  --rgb-private-dialog-title-color: var(--rgb-sage-heading);
  --rgb-private-dialog-text-color: var(--rgb-sage-muted);
  --rgb-private-dialog-btn-ghost-color: var(--rgb-sage-primary);
  --rgb-reviews-background: var(--rgb-sage-secondary);
  --rgb-reviews-badge-color: var(--rgb-sage-primary);
  --rgb-reviews-title-color: var(--rgb-sage-heading);
  --rgb-reviews-subtitle-color: var(--rgb-sage-muted);
  --rgb-reviews-stat-border: var(--rgb-sage-primary);
  --rgb-reviews-stat-box-shadow: var(--rgb-sage-shadow);
  --rgb-reviews-stat-color: var(--rgb-sage-primary);
  --rgb-reviews-stat-color-2: var(--rgb-sage-muted);
  --rgb-review-card-border: var(--rgb-sage-primary);
  --rgb-review-card-box-shadow: var(--rgb-sage-shadow);
  --rgb-review-card-platform-color: var(--rgb-sage-primary);
  --rgb-review-card-stars-color: var(--rgb-sage-soft);
  --rgb-review-card-title-color: var(--rgb-sage-heading);
  --rgb-review-card-text-color: var(--rgb-sage-text);
  --rgb-review-card-footer-border-top: var(--rgb-sage-primary);
  --rgb-review-card-footer-color: var(--rgb-sage-heading);
  --rgb-review-card-footer-color-2: var(--rgb-sage-muted);
  --rgb-review-card-footer-color-3: var(--rgb-sage-primary);
  --rgb-cert-card-background: var(--rgb-sage-heading);
  --rgb-cert-card-overlay-background: var(--rgb-sage-shadow);
  --rgb-cert-card-color: var(--rgb-sage-soft);
  --rgb-contact-link-arrow-color: var(--rgb-sage-soft);
  --rgb-form-char-count-color: var(--rgb-sage-muted);
  --rgb-form-input-background: var(--rgb-sage-surface);
  --rgb-form-submit-background: var(--rgb-sage-primary-soft);
  --rgb-form-submit-background-2: var(--rgb-sage-muted);
  --rgb-app-loader-background: var(--rgb-sage-soft);
  --rgb-app-loader-background-2: var(--rgb-sage-background);
  --rgb-app-loader-background-3: var(--rgb-sage-surface);
  --rgb-app-loader-background-4: var(--rgb-sage-surface);
  --rgb-app-loader-background-5: var(--rgb-sage-surface);
  --rgb-app-loader-halo-one-background: var(--rgb-sage-soft);
  --rgb-app-loader-halo-two-background: var(--rgb-sage-secondary);
  --rgb-loader-accent: var(--rgb-sage-primary);
  --rgb-app-loader-panel-box-shadow: var(--rgb-sage-shadow);
  --rgb-loader-accent-bright: var(--rgb-sage-secondary);
  --rgb-app-loader-spinner-border-top-color: var(--rgb-sage-soft);
  --rgb-app-loader-subtitle-color: var(--rgb-sage-muted);
  --rgb-app-loader-bar-fill-background: var(--rgb-sage-soft);
  --rgb-scroll-progress-background: var(--rgb-sage-secondary);
  --rgb-scroll-progress-fill-background: var(--rgb-sage-secondary);
  --rgb-scroll-progress-fill-box-shadow: var(--rgb-sage-secondary);
  --rgb-header-inner-box-shadow: var(--rgb-sage-shadow);
  --rgb-lang-toggle-desktop-box-shadow: var(--rgb-sage-shadow);
  --rgb-header-backdrop-background: var(--rgb-sage-shadow);
  --rgb-drawer-quick-info-gallery-background: var(--rgb-sage-primary);
  --rgb-drawer-quick-info-gallery-background-2: var(--rgb-sage-primary-soft);
  --rgb-mobile-theme-switch-thumb-box-shadow: var(--rgb-sage-shadow);
  --rgb-social-fab-link-box-shadow: var(--rgb-sage-shadow);
  --rgb-social-fab-link-box-shadow-2: var(--rgb-sage-shadow);
  --rgb-social-fab-icon-background: var(--rgb-sage-heading);
  --rgb-social-fab-toggle-background: var(--rgb-sage-primary);
  --rgb-social-fab-toggle-background-2: var(--rgb-sage-heading);
  --rgb-social-fab-toggle-box-shadow: var(--rgb-sage-shadow);
  --rgb-social-fab-toggle-box-shadow-2: var(--rgb-sage-shadow);
  --rgb-social-fab-toggle-ring-border: var(--rgb-sage-secondary);
  --rgb-social-fab-toggle-icon-background: var(--rgb-sage-surface);
  --rgb-footer-logo-color: var(--rgb-sage-secondary);
  --rgb-footer-copy-color: var(--rgb-sage-secondary);
  --rgb-btn-ghost-border: var(--rgb-sage-soft);
  --rgb-rs-blue-400: var(--rgb-sage-background);
  --rgb-rs-blue-600: var(--rgb-sage-primary);
  --rgb-rs-blue-700: var(--rgb-sage-heading);
  --rgb-rs-orb-b-background: var(--rgb-sage-secondary);
  --rgb-rs-orb-c-background: var(--rgb-sage-secondary);
  --rgb-rs-input-icon-color: var(--rgb-sage-secondary);
  --rgb-rs-btn-next-background: var(--rgb-sage-primary-soft);
  --rgb-rs-dialog-background: var(--rgb-sage-shadow);
  --rgb-rs-dialog-panel-box-shadow: var(--rgb-sage-shadow);
  --rgb-neutral-surface: var(--rgb-sage-surface);
  --rgb-hero-portrait-background: var(--rgb-sage-soft);
  --rgb-btn-service-background-3: var(--rgb-sage-primary);
  --rgb-btn-service-background-6: var(--rgb-sage-primary-soft);
  --rgb-contact-blob-2-background: var(--rgb-sage-secondary);
  --rgb-scroll-progress-fill-background-2: var(--rgb-sage-secondary);
}

/* Charcoal & sage dark theme. Master colors for every portfolio page. */
:root[data-theme="dark"] {
  --rgb-night-page: 20, 28, 24; /* #141C18 */
  --rgb-night-surface: 30, 42, 35; /* #1E2A23 */
  --rgb-night-raised: 42, 57, 47; /* #2A392F */
  --rgb-night-text: 234, 235, 232; /* #EAEBE8 */
  --rgb-night-secondary: 194, 206, 197;
  --rgb-night-muted: 160, 176, 165;
  --rgb-night-accent: 164, 196, 174; /* #A4C4AE */
  --rgb-night-accent-soft: 129, 160, 143; /* #81A08F */
  --rgb-night-button: 58, 90, 74; /* #3A5A4A */
  --rgb-night-button-hover: 70, 103, 85;
  --rgb-night-shadow: 8, 14, 10;

  --rgb-page-light: var(--rgb-night-page);
  --rgb-page-soft-light: var(--rgb-night-surface);
  --rgb-brand-primary: var(--rgb-night-button);
  --rgb-text-primary-light: var(--rgb-night-text);
  --rgb-text-secondary-light: var(--rgb-night-secondary);
  --rgb-text-muted-light: var(--rgb-night-muted);
  --rgb-brand-secondary: var(--rgb-night-button-hover);
  --rgb-shadow-light: var(--rgb-night-shadow);
  --rgb-page-dark: var(--rgb-night-page);
  --rgb-page-soft-dark: var(--rgb-night-surface);
  --rgb-surface-dark: var(--rgb-night-surface);
  --rgb-surface-tint-dark: var(--rgb-night-accent);
  --rgb-border-dark: var(--rgb-night-accent);
  --rgb-text-primary-dark: var(--rgb-night-text);
  --rgb-text-secondary-dark: var(--rgb-night-secondary);
  --rgb-text-muted-dark: var(--rgb-night-muted);
  --rgb-brand-primary-dark: var(--rgb-night-accent);
  --rgb-brand-secondary-dark: var(--rgb-night-accent-soft);
  --rgb-shadow-dark: var(--rgb-night-shadow);
  --rgb-hero-dots-background-image-dark: var(--rgb-night-surface);
  --rgb-about-text-color-dark: var(--rgb-night-text);
  --rgb-tag-background-dark: var(--rgb-night-raised);
  --rgb-tag-background-dark-2: var(--rgb-night-button);
  --rgb-tag-background-dark-3: var(--rgb-night-button-hover);
  --rgb-tag-color-dark: var(--rgb-night-text);
  --rgb-footer-background-dark: var(--rgb-night-page);
  --rgb-footer-logo-color-dark: var(--rgb-night-text);
  --rgb-footer-link-color-dark: var(--rgb-night-muted);
  --rgb-footer-social-background-dark: var(--rgb-night-accent);
  --rgb-footer-social-color-dark: var(--rgb-night-secondary);
  --rgb-hero-accent: var(--rgb-night-accent);
  --rgb-hero-text: var(--rgb-night-text);
  --rgb-hero-badge-border: var(--rgb-night-accent);
  --rgb-hero-badge-background: var(--rgb-night-surface);
  --rgb-hero-badge-text: var(--rgb-night-accent);
  --rgb-hero-text-muted: var(--rgb-night-muted);
  --rgb-hero-button: var(--rgb-night-button);
  --rgb-hero-button-hover: var(--rgb-night-button-hover);
  --rgb-hero-contact-text: var(--rgb-night-muted);
  --rgb-hero-divider: var(--rgb-night-accent);
  --rgb-hero-shadow: var(--rgb-night-shadow);
  --rgb-hero-accent-dark: var(--rgb-night-accent);
  --rgb-hero-badge-background-dark: var(--rgb-night-surface);
  --rgb-hero-badge-border-dark: var(--rgb-night-accent);
  --rgb-hero-badge-text-dark: var(--rgb-night-accent);
  --rgb-hero-text-muted-dark: var(--rgb-night-muted);
  --rgb-hero-divider-dark: var(--rgb-night-accent);
  --rgb-hero-identity-border-dark: var(--rgb-night-accent);
  --rgb-card-btn-color: var(--rgb-night-text);
  --rgb-project-details-background: var(--rgb-night-page);
  --rgb-project-details-background-2: var(--rgb-night-page);
  --rgb-project-accent: var(--rgb-night-accent);
  --rgb-project-details-hero-box-shadow: var(--rgb-night-shadow);
  --rgb-project-details-tag-color: var(--rgb-night-accent);
  --rgb-project-title: var(--rgb-night-text);
  --rgb-project-description: var(--rgb-night-secondary);
  --rgb-project-button: var(--rgb-night-button);
  --rgb-project-btn-secondary-color: var(--rgb-night-accent);
  --rgb-project-album-item-background: var(--rgb-night-surface);
  --rgb-project-album-mobile-background: var(--rgb-night-surface);
  --rgb-project-album-mobile-background-2: var(--rgb-night-surface);
  --rgb-project-album-dialog-background: var(--rgb-night-shadow);
  --rgb-gallery-page-backdrop-background: var(--rgb-night-accent-soft);
  --rgb-gallery-page-backdrop-background-2: var(--rgb-night-accent-soft);
  --rgb-gallery-page-backdrop-background-3: var(--rgb-night-accent-soft);
  --rgb-phone-frame-background: var(--rgb-night-raised);
  --rgb-phone-frame-background-2: var(--rgb-night-raised);
  --rgb-phone-screen-background: var(--rgb-night-page);
  --rgb-phone-notch-background: var(--rgb-night-page);
  --rgb-preview-background: var(--rgb-night-page);
  --rgb-preview-nav-background: var(--rgb-night-raised);
  --rgb-hero-background: var(--rgb-night-page);
  --rgb-hero-dots-background-image: var(--rgb-night-surface);
  --rgb-blob-soft1-background: var(--rgb-night-accent-soft);
  --rgb-float-icon-color: var(--rgb-night-text);
  --rgb-hero-desc-color: var(--rgb-night-muted);
  --rgb-btn-service-background: var(--rgb-night-button);
  --rgb-btn-service-background-2: var(--rgb-night-button-hover);
  --rgb-btn-service-box-shadow: var(--rgb-night-shadow);
  --rgb-btn-service-background-4: var(--rgb-night-button);
  --rgb-btn-service-background-5: var(--rgb-night-button-hover);
  --rgb-btn-service-box-shadow-2: var(--rgb-night-shadow);
  --rgb-hero-scroll-text-color: var(--rgb-night-muted);
  --rgb-hero-scroll-track-border: var(--rgb-night-accent);
  --rgb-about-card-box-shadow: var(--rgb-night-shadow);
  --rgb-cv-btn-background: var(--rgb-night-button);
  --rgb-stat-icon-background: var(--rgb-night-surface);
  --rgb-stat-label-color: var(--rgb-night-muted);
  --rgb-skill-card-glow-background: var(--rgb-night-surface);
  --rgb-tag-color: var(--rgb-night-secondary);
  --rgb-tag-background: var(--rgb-night-surface);
  --rgb-projects-sub-color: var(--rgb-night-text);
  --rgb-proj-card-text-background: var(--rgb-night-surface);
  --rgb-proj-card-count-color: var(--rgb-night-muted);
  --rgb-projects-service-btn-background: var(--rgb-night-button);
  --rgb-projects-service-btn-background-2: var(--rgb-night-button-hover);
  --rgb-projects-service-btn-box-shadow: var(--rgb-night-shadow);
  --rgb-proj-card-img-background: var(--rgb-night-raised);
  --rgb-proj-card-overlay-background: var(--rgb-night-shadow);
  --rgb-proj-card-img-background-2: var(--rgb-night-raised);
  --rgb-proj-card-img-background-3: var(--rgb-night-raised);
  --rgb-proj-card-img-background-4: var(--rgb-night-raised);
  --rgb-proj-card-tag-color: var(--rgb-night-accent);
  --rgb-indigo: var(--rgb-night-accent);
  --rgb-proj-card-desc-color: var(--rgb-night-secondary);
  --rgb-proj-link-primary-background: var(--rgb-night-button);
  --rgb-private-dialog-background: var(--rgb-night-shadow);
  --rgb-private-dialog-panel-border: var(--rgb-night-accent);
  --rgb-private-dialog-panel-box-shadow: var(--rgb-night-shadow);
  --rgb-private-dialog-close-border: var(--rgb-night-accent);
  --rgb-private-dialog-close-background: var(--rgb-night-surface);
  --rgb-private-dialog-close-color: var(--rgb-night-accent);
  --rgb-private-dialog-title-color: var(--rgb-night-text);
  --rgb-private-dialog-text-color: var(--rgb-night-secondary);
  --rgb-private-dialog-btn-ghost-color: var(--rgb-night-accent);
  --rgb-reviews-background: var(--rgb-night-surface);
  --rgb-reviews-badge-color: var(--rgb-night-accent);
  --rgb-reviews-title-color: var(--rgb-night-text);
  --rgb-reviews-subtitle-color: var(--rgb-night-muted);
  --rgb-reviews-stat-border: var(--rgb-night-accent);
  --rgb-reviews-stat-box-shadow: var(--rgb-night-shadow);
  --rgb-reviews-stat-color: var(--rgb-night-accent);
  --rgb-reviews-stat-color-2: var(--rgb-night-muted);
  --rgb-review-card-border: var(--rgb-night-accent);
  --rgb-review-card-box-shadow: var(--rgb-night-shadow);
  --rgb-review-card-platform-color: var(--rgb-night-accent);
  --rgb-review-card-stars-color: var(--rgb-night-text);
  --rgb-review-card-title-color: var(--rgb-night-text);
  --rgb-review-card-text-color: var(--rgb-night-secondary);
  --rgb-review-card-footer-border-top: var(--rgb-night-accent);
  --rgb-review-card-footer-color: var(--rgb-night-text);
  --rgb-review-card-footer-color-2: var(--rgb-night-muted);
  --rgb-review-card-footer-color-3: var(--rgb-night-accent);
  --rgb-cert-card-background: var(--rgb-night-raised);
  --rgb-cert-card-overlay-background: var(--rgb-night-shadow);
  --rgb-cert-card-color: var(--rgb-night-secondary);
  --rgb-contact-link-arrow-color: var(--rgb-night-text);
  --rgb-form-char-count-color: var(--rgb-night-muted);
  --rgb-form-input-background: var(--rgb-night-surface);
  --rgb-form-submit-background: var(--rgb-night-button-hover);
  --rgb-form-submit-background-2: var(--rgb-night-surface);
  --rgb-app-loader-background: var(--rgb-night-accent-soft);
  --rgb-app-loader-background-2: var(--rgb-night-accent-soft);
  --rgb-app-loader-background-3: var(--rgb-night-surface);
  --rgb-app-loader-background-4: var(--rgb-night-surface);
  --rgb-app-loader-background-5: var(--rgb-night-surface);
  --rgb-app-loader-halo-one-background: var(--rgb-night-accent-soft);
  --rgb-app-loader-halo-two-background: var(--rgb-night-accent-soft);
  --rgb-loader-accent: var(--rgb-night-accent);
  --rgb-app-loader-panel-box-shadow: var(--rgb-night-shadow);
  --rgb-loader-accent-bright: var(--rgb-night-accent);
  --rgb-app-loader-spinner-border-top-color: var(--rgb-night-accent-soft);
  --rgb-app-loader-subtitle-color: var(--rgb-night-muted);
  --rgb-app-loader-bar-fill-background: var(--rgb-night-accent-soft);
  --rgb-scroll-progress-background: var(--rgb-night-surface);
  --rgb-scroll-progress-fill-background: var(--rgb-night-surface);
  --rgb-scroll-progress-fill-box-shadow: var(--rgb-night-shadow);
  --rgb-scroll-progress-background-dark: var(--rgb-night-surface);
  --rgb-scroll-progress-fill-background-dark: var(--rgb-night-accent-soft);
  --rgb-scroll-progress-fill-background-dark-2: var(--rgb-night-accent-soft);
  --rgb-scroll-progress-fill-box-shadow-dark: var(--rgb-night-shadow);
  --rgb-header-inner-box-shadow: var(--rgb-night-shadow);
  --rgb-lang-toggle-desktop-box-shadow: var(--rgb-night-shadow);
  --rgb-header-backdrop-background: var(--rgb-night-shadow);
  --rgb-drawer-quick-info-gallery-background: var(--rgb-night-button);
  --rgb-drawer-quick-info-gallery-background-2: var(--rgb-night-button-hover);
  --rgb-mobile-theme-switch-thumb-box-shadow: var(--rgb-night-shadow);
  --rgb-social-fab-link-box-shadow: var(--rgb-night-shadow);
  --rgb-social-fab-link-box-shadow-2: var(--rgb-night-shadow);
  --rgb-social-fab-icon-background: var(--rgb-night-surface);
  --rgb-social-fab-toggle-background: var(--rgb-night-button);
  --rgb-social-fab-toggle-background-2: var(--rgb-night-button-hover);
  --rgb-social-fab-toggle-box-shadow: var(--rgb-night-shadow);
  --rgb-social-fab-toggle-box-shadow-2: var(--rgb-night-shadow);
  --rgb-social-fab-toggle-ring-border: var(--rgb-night-accent);
  --rgb-social-fab-toggle-icon-background: var(--rgb-night-surface);
  --rgb-social-fab-link-background-dark: var(--rgb-night-surface);
  --rgb-social-fab-link-box-shadow-dark: var(--rgb-night-shadow);
  --rgb-social-fab-toggle-background-dark: var(--rgb-night-button);
  --rgb-social-fab-toggle-background-dark-2: var(--rgb-night-button-hover);
  --rgb-social-fab-toggle-box-shadow-dark: var(--rgb-night-shadow);
  --rgb-footer-logo-color: var(--rgb-night-accent);
  --rgb-footer-copy-color: var(--rgb-night-muted);
  --rgb-btn-ghost-border: var(--rgb-night-accent);
  --rgb-rs-blue-400: var(--rgb-night-accent);
  --rgb-rs-blue-600: var(--rgb-night-button);
  --rgb-rs-blue-700: var(--rgb-night-button);
  --rgb-rs-blue-400-dark: var(--rgb-night-accent);
  --rgb-rs-blue-500-dark: var(--rgb-night-accent);
  --rgb-rs-blue-600-dark: var(--rgb-night-button);
  --rgb-rs-blue-700-dark: var(--rgb-night-button);
  --rgb-rs-input-bg-dark: var(--rgb-night-raised);
  --rgb-rs-orb-b-background: var(--rgb-night-accent-soft);
  --rgb-rs-orb-c-background: var(--rgb-night-accent-soft);
  --rgb-rs-input-icon-color: var(--rgb-night-muted);
  --rgb-rs-btn-next-background: var(--rgb-night-button-hover);
  --rgb-rs-dialog-background: var(--rgb-night-shadow);
  --rgb-rs-dialog-panel-box-shadow: var(--rgb-night-shadow);
  --rgb-sage-text: var(--rgb-night-accent);
  --rgb-neutral-surface: var(--rgb-night-surface);
  --rgb-hero-portrait-background: var(--rgb-night-raised);
  --rgb-scroll-progress-fill-background-dark-3: var(--rgb-night-accent-soft);
  --rgb-contact-blob-2-background: var(--rgb-night-accent-soft);
  --rgb-blob-soft2-background: var(--rgb-night-accent-soft);
  --rgb-btn-service-background-3: var(--rgb-night-button);
  --rgb-btn-service-background-6: var(--rgb-night-button);
}

:root {
  --color-bg-page: rgb(var(--rgb-page-light));
  --color-bg-soft: rgb(var(--rgb-page-soft-light));
  --color-surface: rgb(var(--rgb-neutral-surface));
  --color-surface-elevated: rgba(var(--rgb-brand-primary), 0.08);
  --color-surface-elevated-hover: rgba(var(--rgb-brand-primary), 0.14);
  --color-header-bg-scrolled: rgba(var(--rgb-neutral-surface), 0.82);
  --color-header-glass: rgba(var(--rgb-neutral-surface), 0.6);
  --color-header-glass-border: rgba(var(--rgb-neutral-surface), 0.7);
  --color-text-primary: rgb(var(--rgb-text-primary-light));
  --color-text-secondary: rgb(var(--rgb-text-secondary-light));
  --color-text-muted: rgb(var(--rgb-text-muted-light));
  --color-accent: rgb(var(--rgb-brand-primary));
  --color-accent-2: rgb(var(--rgb-brand-secondary));
  --color-border-soft: rgba(var(--rgb-brand-primary), 0.16);
  --color-border-strong: rgba(var(--rgb-brand-primary), 0.34);
  --color-shadow-rgb: rgba(var(--rgb-shadow-light), 0.18);
}

[data-theme="dark"] {
  --color-bg-page: rgb(var(--rgb-page-dark));
  --color-bg-soft: rgb(var(--rgb-page-soft-dark));
  --color-surface: rgb(var(--rgb-surface-dark));
  --color-surface-elevated: rgba(var(--rgb-surface-tint-dark), 0.15);
  --color-surface-elevated-hover: rgba(var(--rgb-surface-tint-dark), 0.24);
  --color-header-bg-scrolled: rgba(var(--rgb-page-soft-dark), 0.82);
  --color-header-glass: rgba(var(--rgb-surface-dark), 0.52);
  --color-header-glass-border: rgba(var(--rgb-border-dark), 0.24);
  --color-text-primary: rgb(var(--rgb-text-primary-dark));
  --color-text-secondary: rgb(var(--rgb-text-secondary-dark));
  --color-text-muted: rgb(var(--rgb-text-muted-dark));
  --color-accent: rgb(var(--rgb-brand-primary-dark));
  --color-accent-2: rgb(var(--rgb-brand-secondary-dark));
  --color-border-soft: rgba(var(--rgb-border-dark), 0.24);
  --color-border-strong: rgba(var(--rgb-border-dark), 0.5);
  --color-shadow-rgb: rgba(var(--rgb-shadow-dark), 0.45);
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-localized, 'Cairo', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 0.25s ease, color 0.25s ease;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

/* Global section theming (dark mode overrides) */
.hero, .about, .skills, .projects, .contact, .reviews {
  transition: background 0.25s ease, color 0.25s ease;
}

[data-theme="dark"] .hero,
[data-theme="dark"] .about,
[data-theme="dark"] .skills,
[data-theme="dark"] .projects,
[data-theme="dark"] .contact,
[data-theme="dark"] .reviews {
  background: var(--color-bg-soft) !important;
}

[data-theme="dark"] .hero__dots {
  background-image: radial-gradient(circle, rgba(var(--rgb-hero-dots-background-image-dark), 0.22) 1px, transparent 1px) !important;
}

[data-theme="dark"] .about__title,
[data-theme="dark"] .skills__title,
[data-theme="dark"] .projects__title,
[data-theme="dark"] .contact__title,
[data-theme="dark"] .reviews__title,
[data-theme="dark"] .hero__title,
[data-theme="dark"] .hero__desc strong,
[data-theme="dark"] .float-icon span {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .about__text p,
[data-theme="dark"] .skills__sub,
[data-theme="dark"] .projects__sub,
[data-theme="dark"] .contact__sub,
[data-theme="dark"] .contact__info-text,
[data-theme="dark"] .reviews__subtitle,
[data-theme="dark"] .hero__desc,
[data-theme="dark"] .hero__scroll-text {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .about__text strong {
  color: rgb(var(--rgb-about-text-color-dark)) !important;
}

[data-theme="dark"] .about__badge,
[data-theme="dark"] .skills__badge,
[data-theme="dark"] .projects__badge,
[data-theme="dark"] .contact__badge,
[data-theme="dark"] .reviews__badge,
[data-theme="dark"] .hero__badge {
  color: var(--color-accent) !important;
  border-color: var(--color-border-strong) !important;
  background: rgba(var(--rgb-border-dark), 0.11) !important;
}

[data-theme="dark"] .about__card,
[data-theme="dark"] .skill-card,
[data-theme="dark"] .proj-card--text,
[data-theme="dark"] .contact__link,
[data-theme="dark"] .contact__card,
[data-theme="dark"] .reviews__stat,
[data-theme="dark"] .review-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border-soft) !important;
  box-shadow: 0 10px 34px rgba(var(--rgb-shadow-dark), 0.35) !important;
}

[data-theme="dark"] .skill-card__title,
[data-theme="dark"] .proj-card__slogan,
[data-theme="dark"] .contact__link-value,
[data-theme="dark"] .review-card__title,
[data-theme="dark"] .review-card__footer strong,
[data-theme="dark"] .stat__number {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .stat__number span {
  color: var(--color-accent) !important;
}

[data-theme="dark"] .stat__label {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .tag,
[data-theme="dark"] .form__input,
[data-theme="dark"] .form__textarea {
  background: rgb(var(--rgb-tag-background-dark)) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-soft) !important;
}

[data-theme="dark"] .tag:hover,
[data-theme="dark"] .btn--solid,
[data-theme="dark"] .form__submit,
[data-theme="dark"] .reviews__profile-link {
  background: linear-gradient(135deg, rgb(var(--rgb-tag-background-dark-2)), rgb(var(--rgb-tag-background-dark-3))) !important;
  color: rgb(var(--rgb-tag-color-dark)) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .btn--ghost {
  background: rgba(var(--rgb-surface-dark), 0.82) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-soft) !important;
}

[data-theme="dark"] .hero__title--blue,
[data-theme="dark"] .typed-cursor,
[data-theme="dark"] .contact__link-label,
[data-theme="dark"] .proj-card__eyebrow,
[data-theme="dark"] .drawer__num {
  color: var(--color-accent) !important;
}

[data-theme="dark"] .hero__scroll-track {
  border-color: rgba(var(--rgb-border-dark), 0.4) !important;
}

[data-theme="dark"] .hero__scroll-thumb {
  background: var(--color-accent) !important;
}

[data-theme="dark"] .footer {
  background: rgb(var(--rgb-footer-background-dark)) !important;
}

[data-theme="dark"] .footer__logo,
[data-theme="dark"] .footer__link:hover {
  color: rgb(var(--rgb-footer-logo-color-dark)) !important;
}

[data-theme="dark"] .footer__link,
[data-theme="dark"] .footer__copy,
[data-theme="dark"] .footer__made {
  color: rgb(var(--rgb-footer-link-color-dark)) !important;
}

[data-theme="dark"] .footer__social {
  background: rgba(var(--rgb-footer-social-background-dark), 0.12) !important;
  border-color: rgba(var(--rgb-footer-social-background-dark), 0.24) !important;
  color: rgb(var(--rgb-footer-social-color-dark)) !important;
}

/* ── Utility ── */
[dir='rtl'] {
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Arabic typography. English retains each component's original font stack. */
:root[lang="ar"] {
  --font-localized: 'Tajawal', 'Cairo', sans-serif;
}
:root[lang="ar"] body { line-height: 1.7; }
:root[lang="ar"] body * { letter-spacing: normal; }
:root[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.45; }
:root[lang="ar"] :is(button, input, textarea, select) { font-family: var(--font-localized); }
:root[lang="ar"] :is(.card__btn, .intro-hero__button, .btn, .rs__btn) { line-height: 1.5; }