/* ===== Light theme — all CSS custom properties ===== */
:root {

  /* ---- Backgrounds ---- */
  --bg:           #ffffff;
  --bg-secondary: #fafafa;
  --card:         #ffffff;
  --navbar-bg:    rgba(255, 255, 255, 0.92);

  /* ---- Text ---- */
  --text:  #0b0b0f;
  --muted: rgba(11, 11, 15, 0.55);

  /* ---- Borders & hover ---- */
  --border: rgba(11, 11, 15, 0.12);
  --hover:  rgba(11, 11, 15, 0.06);

  /* ---- Shadows ---- */
  --shadow:    0 10px 26px rgba(15, 23, 42, 0.10);
  --shadow-sm: 0 2px  8px  rgba(0,  0,  0, 0.06);
  --shadow-md: 0 8px  24px rgba(0,  0,  0, 0.10);
  --shadow-lg: 0 22px 60px rgba(15, 23, 42, 0.18);
  --navbar-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);

  /* ---- Tiles (category/service cards) ---- */
  --tile-bg:       #ffffff;
  --tile-tint:     #ffffff;
  --tile-border:   rgba(11, 11, 15, 0.12);
  --tile-hover:    rgba(11, 11, 15, 0.04);
  --tile-media-bg: rgba(11, 11, 15, 0.06);

  /* ---- Inputs ---- */
  --input-bg:     #ffffff;
  --input-border: rgba(11, 11, 15, 0.14);

  /* ---- Buttons ---- */
  --btn-bg:     var(--card);
  --btn-text:   var(--text);
  --btn-border: var(--border);

  /* ---- Contacts on landing ---- */
  --contact-surface:       #f2f3f7;
  --contact-surface-hover: #e9ebf2;
  --contact-icon-bg:       #e1e4ec;
  --contact-icon-filter:   none;
  --contact-icon-color:    #0b0b0f;

  /* ---- Modals ---- */
  --modal-backdrop: rgba(0, 0, 0, 0.55);
  --modal-bg:       #ffffff;
  --modal-border:   rgba(11, 11, 15, 0.14);
  --modal-shadow:   0 18px 50px rgba(15, 23, 42, 0.22);

  /* ---- Focus ring ---- */
  --focus:        rgba(124, 58, 237, 0.16);
  --focus-border: rgba(124, 58, 237, 0.60);

  /* ---- Accent (purple / violet) ---- */
  --color-accent:      #7C3AED;
  --color-accent-hover:#7C3AED;
  --color-accent-glow: rgba(124, 58, 237, 0.35);
  --purple:            #7C3AED;
  --purple-2:          #7C3AED;
  --purple-border:     rgba(124, 58, 237, 0.75);
  --purple-glow:       rgba(124, 58, 237, 0.22);

  /* ---- Spacing scale ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 60px;
  --space-3xl: 100px;

  /* ---- Border radius ---- */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-full: 50px;

  /* ---- Blur ---- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.45s ease;

  /* ---- Legacy compat ---- */
  --wallpaper-image: none;
}