/* ===== Dark theme overrides ===== */
html[data-theme="dark"] {

  /* ---- Backgrounds ---- */
  --bg:           #06060a;
  --bg-secondary: #0a0a0f;
  --card:         #0c0c12;
  --navbar-bg:    rgba(6, 6, 10, 0.88);

  /* ---- Text ---- */
  --text:  rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.48);

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

  /* ---- Shadows ---- */
  --shadow:    0 18px 46px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 4px  14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.65);
  --navbar-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  /* ---- Tiles ---- */
  --tile-bg:       #0c0c12;
  --tile-tint:     #0c0c12;
  --tile-border:   rgba(255, 255, 255, 0.12);
  --tile-hover:    rgba(255, 255, 255, 0.06);
  --tile-media-bg: rgba(255, 255, 255, 0.05);

  /* ---- Inputs ---- */
  --input-bg:     rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.14);

  /* ---- Buttons ---- */
  --btn-bg:     rgba(255, 255, 255, 0.06);
  --btn-text:   var(--text);
  --btn-border: rgba(255, 255, 255, 0.14);

  /* ---- Contacts on landing ---- */
  --contact-surface:       #06060a;
  --contact-surface-hover: #0d0d14;
  --contact-icon-bg:       #111111;
  --contact-icon-filter:   brightness(0) invert(1);
  --contact-icon-color:    #ffffff;

  /* ---- Modals ---- */
  --modal-backdrop: rgba(0, 0, 0, 0.72);
  --modal-bg:       #0c0c12;
  --modal-border:   rgba(255, 255, 255, 0.14);
  --modal-shadow:   0 20px 60px rgba(0, 0, 0, 0.65);

  /* ---- Focus ring ---- */
  --focus:        rgba(124, 58, 237, 0.22);
  --focus-border: rgba(124, 58, 237, 0.70);
}