:root {
      --bg-body: #f8fafc;
      --bg-surface: #f4f7ff;
      --bg-card: #eef3ff;
      --bg-body-gradient: radial-gradient(circle at 12% 8%, #f6f8ff 0%, #eef3ff 36%, #e8effd 68%, #e2eaf9 100%);
      --card-bg: linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 86%, #ffffff 14%), color-mix(in srgb, var(--bg-card) 90%, #dbe6ff 10%));
      --card-border: color-mix(in srgb, var(--border-light) 82%, #d7e3ff 18%);
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-soft: #eef2ff;
      --primary-glow: rgba(37, 99, 235, 0.15);
      --secondary: #7c3aed;
      --text-dark: #0f172a;
      --text-muted: #334155;
      --text-light: #475569;
      --border-light: #e2e8f0;
      --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
      --shadow-hover: 0 20px 25px -12px rgba(0, 0, 0, 0.1);
  --transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);

      /* HTML5 - Orange Brand */
  --html-color: #e34f26;
  --html-glow: rgba(227, 79, 38, 0.3);

  /* CSS3 - Blue Brand */
  --css-color: #1572b6;
  --css-glow: rgba(21, 114, 182, 0.3);

  /* JavaScript - Yellow Brand */
  --js-color: #f7df1e;
  --js-glow: rgba(247, 223, 30, 0.3);

  /* PHP - Purple Brand */
  --php-color: #777bb4;
  --php-glow: rgba(119, 123, 180, 0.3);
  
  /* General transition for smooth hovering */
  --transition: all 0.3s ease;

  /* Combination Gradients */

  --grad-html-css: linear-gradient(to right, var(--html-color), var(--css-color));
  --grad-html-css-js: linear-gradient(to right, var(--html-color), var(--css-color), var(--js-color));
  --grad-php-all: linear-gradient(to right, var(--php-color), var(--html-color), var(--css-color));

  /* Brand Gradients */
  --grad-insta: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  --grad-fb: linear-gradient(135deg, #1877F2, #0056b3);
  --grad-x: linear-gradient(135deg, #000000, #434343); /* Sleek Dark Gradient */
  --grad-linkedin: linear-gradient(135deg, #0A66C2, #004182);

  /* Brand Glow Shadows */
  --shadow-insta: rgba(220, 39, 67, 0.4);
  --shadow-fb: rgba(24, 119, 242, 0.4);
  --shadow-linkedin: rgba(10, 102, 194, 0.4);
}

body[data-theme='dark'] {
    --bg-body: #020617;
    --bg-surface: #0f172a;
    --bg-card: #111827;
    --bg-body-gradient: radial-gradient(circle at 12% 8%, #111827 0%, #0f172a 38%, #0b1220 68%, #070d1a 100%);
    --card-bg: linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 88%, #17233b 12%), color-mix(in srgb, var(--bg-card) 90%, #1e293b 10%));
    --border-light: #334155;
    --card-border: color-mix(in srgb, var(--border-light) 82%, #3b82f6 18%);
    --primary: #60a5fa;
    --primary-hover: #93c5fd;
    --primary-soft: #668fcd;
    --primary-glow: rgba(96, 165, 250, 0.24);
    --secondary: #3b82f6;
    --text-dark: #e2e8f0;
    --text-muted: #cbd5e1;
    --text-light: #94a3b8;
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 26px -8px rgba(0, 0, 0, 0.45), 0 8px 10px -8px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 24px 30px -14px rgba(0, 0, 0, 0.55);
    --js-color: #facc15;
    --js-glow: rgba(250, 204, 21, 0.34);
}