:root {
  /* --- Gradients & Backgrounds --- */
  --primary-gradient:           linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --primary-background:         linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --box-background-image:       linear-gradient(174.2deg, rgba(255, 244, 228, 1) 7.1%, rgba(240, 246, 238, 1) 67.4%);
  --header-background:          linear-gradient(135deg, #c1c3c5 0%, #e1ecff 100%);
  --card-gradient:              linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --accent-gradient:            linear-gradient(135deg, #d8e4ff 0%, #eef2f3 100%);
  --box-border-color:           linear-gradient(89.2deg, rgba(255, 255, 255, 1) -1.3%, rgba(253, 109, 38, 1) 281.6%);
  --nav-hover-color:            linear-gradient(to left, #8e9eab, #eef2f3);

  /* --- Flat Background Surfaces --- */
  --bg-page:                    #f0f2f5;
  --bg-surface:                 #ffffff;
  --bg-surface-soft:            #fafafa;
  --bg-surface-muted:           #f5f7fa;
  --bg-overlay:                 rgba(255, 255, 255, 0.72);
  --bg-overlay-focus:           rgba(255, 255, 255, 0.97);

  /* --- Text Colors --- */
  --text-color:                 #000;
  --text-secondary-color:       rgb(255, 255, 255);
  --text-muted:                 #444;
  --text-strong:                #111;
  --text-label:                 #000000db;
  --text-subtle:                #7f8c8d;
  --text-placeholder:           #9aa5b4;
  --text-on-dark:               #ffffff;
  --text-on-accent:             #ffffff;

  /* --- Link Colors --- */
  --link-color:                 #1a3c6e;
  --link-hover-color:           #313439cb;
  --link-visited-color:         #9e5900;
  --link-unvisited:             rgb(5, 5, 5);

  /* --- Navigation Colors --- */
  --nav-link-color:             #1755c0;
  --nav-link-hover-color:       #65645ece;
  --nav-link-visited-color:     #cc9955;

  /* --- Service Colors --- */
  --service-link-color:         #1a3c6e;
  --service-link-hover-color:   #0a1f40;

  /* --- UI Accent --- */
  --accent-blue:                #2b8ffa;
  --accent-blue-border:         rgba(92, 148, 245, 0.35);
  --accent-blue-border-strong:  rgba(12, 180, 226, 0.616);
  --accent-dark-blue:           #1a3a6b;
  --hover-color:                #4f4f4880;
  --accent-blue-light:          #d8e4ff;
  --accent-info:                #2980b9;
  --accent-info-bg:             #d6eaf8;

  /* --- Shadows --- */
  --box-shadow-color:           rgba(0, 0, 0, 0.967);
  --box-shadow-xs:              0 1px 3px rgba(0, 0, 0, 0.08);
  --box-shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.12);
  --box-shadow-md:              0 4px 16px rgba(0, 0, 0, 0.18);
  --box-shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.25);
  --box-shadow-hover:           0.3rem 0.5rem 1.5rem rgba(0, 0, 0, 0.967);
  --box-shadow-focus-accent:    0 0 0 3px rgba(43, 143, 250, 0.13);
  --box-shadow-focus-danger:    0 0 0 3px rgba(192, 57, 43, 0.10);
  --box-shadow-focus-default:   0 0 0 3px rgba(52, 152, 219, 0.1);

  /* --- Semantic / State --- */
  --color-danger:               #e74c3c;
  --color-danger-dark:          #c0392b;
  --color-danger-bg:            #fadbd8;
  --color-danger-bg-soft:       rgba(255, 235, 230, 0.7);
  --color-danger-shadow:        rgba(192, 57, 43, 0.10);
  --color-success:              #27ae60;
  --color-success-dark:         #1e8449;
  --color-success-bg:           #d5f4e6;
  --color-success-bg-soft:      rgba(213, 244, 230, 0.85);
  --color-warning:              #d68910;
  --color-warning-dark:         #b7770d;
  --color-warning-bg:           #fef5e7;
  --color-warning-bg-soft:      rgba(254, 245, 231, 0.85);
  --color-disabled:             #95a5a6;
  --color-disabled-bg:          #ecf0f1;
  --color-disabled-text:        #7f8c8d;

  /* --- Borders --- */
  --border-color-light:         #eeeeee;
  --border-color-default:       #dddddd;
  --border-color-medium:        #bdc3c7;
  --border-color-focus:         #2b8ffa;
  --border-color-accent:        rgba(92, 148, 245, 0.35);
  --border-width-thin:          1px;
  --border-width-base:          1.5px;
  --border-width-thick:         2px;
  --border-width-accent-bar:    4px;

  /* --- Fonts --- */
  --header-font:                'Arial Black', sans-serif;
  --heading-font:               "Cinzel", serif;
  --body-font:                  'Quicksand', sans-serif;
  --primary-main-font:          "DM Mono", monospace;
  --secondary-main-font:        "Baskervville SC", serif;
  --nav-head-font:              "Lexend Zetta", sans-serif;
  --head-font:                  "Bungee Shade", sans-serif;
  --hindi-font:                 "Reem Kufi Fun", sans-serif;
  --font-system:                -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Type Scale --- */
  --head-font-size:             1.1rem;
  --para-font-size:             1.14rem;
  --title-size-font:            1rem;
  --font-weight:                bold;
  --font-size-xs:               0.75rem;
  --font-size-sm:               0.875rem;
  --font-size-base:             1rem;
  --font-size-md:               1.1rem;
  --font-size-lg:               1.14rem;
  --font-size-xl:               1.25rem;
  --font-size-2xl:              1.5rem;
  --font-size-3xl:              1.75rem;
  --font-size-4xl:              2rem;
  --font-size-hero:             2.5rem;

  /* --- Font Weights --- */
  --font-weight-light:          300;
  --font-weight-normal:         400;
  --font-weight-medium:         500;
  --font-weight-semibold:       600;
  --font-weight-bold:           700;
  --font-weight-black:          900;

  /* --- Line Height --- */
  --line-height-tight:          1.2;
  --line-height-snug:           1.4;
  --line-height-base:           1.6;
  --line-height-relaxed:        1.75;

  /* --- Letter Spacing --- */
  --letter-spacing-tight:       -0.01em;
  --letter-spacing-normal:      0em;
  --letter-spacing-wide:        0.04em;
  --letter-spacing-wider:       0.07em;
  --letter-spacing-widest:      0.12em;

  /* --- Border Radius --- */
  --radius-xs:                  0.25rem;
  --radius-sm:                  0.75rem;
  --radius-md:                  1.5rem;
  --radius-lg:                  2rem;
  --radius-pill:                999px;
  --radius-circle:              50%;

  /* --- Transitions --- */
  --transition-fast:            0.2s ease;
  --transition-base:            0.3s ease;
  --transition-slow:            0.5s ease;
  --transition-bounce:          0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Spacing --- */
  --spacing-2xs:                0.25rem;
  --spacing-xs:                 0.5rem;
  --spacing-sm:                 1rem;
  --spacing-md:                 1.5rem;
  --spacing-lg:                 2rem;
  --spacing-xl:                 3rem;
  --spacing-2xl:                4rem;

  /* --- Layout --- */
  --max-width:                  62rem;
  --max-width-content:          1100px;
  --max-width-narrow:           900px;
  --section-width:              calc(100% - 2rem);

  /* --- Theme Toggle --- */
  --toggle-bg-light:            #ffffff;
  --toggle-bg-dark:             rgb(53, 53, 53);

  /* --- Opacity --- */
  --opacity-disabled:           0.55;
  --opacity-muted:              0.70;
  --opacity-subtle:             0.85;
  --opacity-full:               1;

  /* --- Z-Index --- */
  --z-index-below:              -1;
  --z-index-base:               0;
  --z-index-raised:             10;
  --z-index-dropdown:           100;
  --z-index-sticky:             200;
  --z-index-overlay:            300;
  --z-index-modal:              400;
  --z-index-toast:              500;
  --z-index-tooltip:            600;

  /* --- Animation --- */
  --anim-duration-fast:         0.2s;
  --anim-duration-base:         0.3s;
  --anim-duration-slow:         0.5s;
  --anim-slide-offset:          -10px;
  --anim-easing-base:           ease-out;
  --anim-easing-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   DARK MODE THEME OVERRIDES
   ============================================================ */
:is(html.dark-mode, body.dark-mode) {
  color-scheme: dark;

  --primary-gradient:           linear-gradient(135deg, #232526 0%, #414345 100%);
  --primary-background:         linear-gradient(135deg, #121212 0%, #1f1f1f 100%);
  --box-background-image:       #1f1f1f;
  --header-background:          linear-gradient(135deg, #2c2c2c 0%, #151515 100%);
  --bg-page:                    #121212;
  --bg-surface:                 #1e1e1e;
  --bg-surface-soft:            #252525;
  --bg-surface-muted:           #2a2a2a;
  --bg-overlay:                 rgba(18, 18, 18, 0.8);
  --bg-overlay-focus:           rgba(30, 30, 30, 0.98);

  --text-color:                 #ffffff;
  --text-secondary-color:       #1c1c1c;
  --text-muted:                 #b0b0b0;
  --text-strong:                #ffffff;
  --text-label:                 rgba(255, 255, 255, 0.85);
  --border-color-light:         #333333;
  --border-color-default:       #444444;
  --border-color-medium:        #555555;

  --box-shadow-color:           rgba(255, 255, 255, 0.1);
  --box-shadow-md:              0 4px 16px rgba(0, 0, 0, 0.5);
  --box-shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.7);

  /* Cards & Accents */
  --card-gradient:              #1f1f1f;
  --accent-gradient:            #2a2a2a;

  /* Links */
  --link-color:                 #7aaaff;
  --link-hover-color:           #aac8ff;
  --link-visited-color:         #cc9955;

  /* Navbar */
  --nav-link-color:             #6198f8;
  --nav-link-hover-color:       #3e3c3ba6;
  --nav-link-visited-color:     #cc9955;
  --nav-compact-hover-color:    rgba(87, 108, 113, 0.498);

  /* Service Links */
  --service-link-color:         #7aaaff;
  --service-link-hover-color:   #aac8ff;
}

/* ============================================================
   12. THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  font-size: 1.35rem;
  cursor: pointer;
  z-index: 10000;

  /* Background & Shadow with CSS variables and solid fallbacks */
  background: var(--card-gradient, #ffffff);
  box-shadow: var(--box-shadow-md, 0 4px 10px rgba(0, 0, 0, 0.15));
  /* Layout alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mobile-first usability flags */
  user-select: none;
  touch-action: none;
  /* Transitions */
  transition: transform var(--transition-fast, 0.2s ease),
              box-shadow var(--transition-base, 0.3s ease),
              background 0.3s ease,
              border-color 0.3s ease;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: var(--box-shadow-lg, 0 6px 15px rgba(0, 0, 0, 0.25));
}

.theme-toggle:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 3px;
}

/* Dark mode overrides for toggle and menu */
:is(html.dark-mode, body.dark-mode) .theme-toggle {
  background: var(--toggle-bg-dark, rgb(53, 53, 53));
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

:is(html.dark-mode, body.dark-mode) .menuBtn {
  background: var(--accent-gradient);
  border: 2px solid var(--link-hover-color);
}

:is(html.dark-mode, body.dark-mode) .menuBtn:hover {
  background: var(--nav-compact-hover-color);
}

:is(html.dark-mode, body.dark-mode) .services-list li:hover,
:is(html.dark-mode, body.dark-mode) .services-list h2:hover {
  border-color: var(--accent-blue);
}

:is(html.dark-mode, body.dark-mode) .slide:hover {
  border-color: var(--accent-blue);
}