/* Catppuccin Mocha + Mauve accent for gethomepage.dev
   Drop this into: /path/to/config/custom.css
   In settings.yaml set: color: gray
*/

/* Optional font */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap");

:root,
html,
body,
.theme-gray {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Catppuccin Mocha palette ---- */
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo:  #f2cdcd;
  --ctp-pink:      #f5c2e7;
  --ctp-mauve:     #cba6f7;
  --ctp-red:       #f38ba8;
  --ctp-maroon:    #eba0ac;
  --ctp-peach:     #fab387;
  --ctp-yellow:    #f9e2af;
  --ctp-green:     #a6e3a1;
  --ctp-teal:      #94e2d5;
  --ctp-sky:       #89dceb;
  --ctp-sapphire:  #74c7ec;
  --ctp-blue:      #89b4fa;
  --ctp-lavender:  #b4befe;

  --ctp-text:      #cdd6f4;
  --ctp-subtext1:  #bac2de;
  --ctp-subtext0:  #a6adc8;

  --ctp-overlay2:  #9399b2;
  --ctp-overlay1:  #7f849c;
  --ctp-overlay0:  #6c7086;

  --ctp-surface2:  #585b70;
  --ctp-surface1:  #45475a;
  --ctp-surface0:  #313244;

  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;

  /* ---- Homepage theme tokens ---- */
  --color-900: 17 17 27 !important;
  --color-800: 30 30 46 !important;

  --color-200: 180 190 254 !important;
  --color-300: 205 214 244 !important;
  --color-400: 186 194 222 !important;

  --color-logo-start: 203 166 247 !important;
  --color-logo-stop:  137 180 250 !important;

  --card-bg: rgba(24, 24, 37, 0.75);
  --card-bg-hover: rgba(49, 50, 68, 0.85);
  --stroke: rgba(203, 166, 247, 0.35);

  --radius: 16px;
}

/* ---- Page background (works with/without an image) ---- */
body {
  background: radial-gradient(1200px 800px at 20% 10%, rgba(203, 166, 247, 0.14), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(137, 180, 250, 0.12), transparent 55%),
              radial-gradient(900px 600px at 50% 90%, rgba(166, 227, 161, 0.08), transparent 60%),
              var(--ctp-crust) !important;
  color: var(--ctp-text);
}

/* ---- Cards (services + bookmarks) ---- */
.service-card,
li.bookmark > a {
  background: var(--card-bg) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
  /* box-shadow removed */
  backdrop-filter: blur(10px);
}

.service-card:hover,
li.bookmark > a:hover {
  background: var(--card-bg-hover) !important;
  border-color: rgba(203, 166, 247, 0.6) !important;
}

/* ---- Headings / group titles ---- */
.service-group-name,
.bookmark-group-name {
  color: var(--ctp-mauve) !important;
  letter-spacing: 0.02em;
}

/* Group icon “pill” */
.service-group-icon > div {
  background: var(--ctp-mauve) !important;
}

/* Expand/collapse caret */
.services-group > button > svg {
  color: var(--ctp-mauve) !important;
}

/* ---- Service text ---- */
.service-name {
  color: var(--ctp-text) !important;
  font-weight: 600;
}

.service-description {
  color: var(--ctp-subtext0) !important;
}

/* Tag chips */
.service-tags .dark\:bg-theme-900\/50 {
  background-color: rgba(17, 17, 27, 0.45) !important;
  border: 1px solid rgba(203, 166, 247, 0.25) !important;
}

/* ---- Bookmark icon background + icon color ---- */
.bookmark-icon {
  background-color: rgba(17, 17, 27, 0.65) !important;
  border: 1px solid rgba(203, 166, 247, 0.25) !important;
}

.bookmark-icon > div > div {
  background: var(--ctp-mauve) !important; /* for si/md icons */
}

.bookmark-name {
  color: var(--ctp-text) !important;
  font-weight: 500;
}

/* ---- Info widgets (top bar) ---- */
#information-widgets {
  border-color: rgba(203, 166, 247, 0.35) !important;
}

#information-widgets * {
  color: var(--ctp-mauve) !important;
}

/* Resource bars (CPU/RAM/etc) */
.resource-usage {
  background-color: rgba(69, 71, 90, 0.55) !important; /* surface1 */
}
.resource-usage > div {
  background-color: var(--ctp-green) !important;
}

/* ---- Search bar (if enabled) ---- */
input,
textarea,
select {
  background: rgba(17, 17, 27, 0.55) !important;
  border: 1px solid rgba(203, 166, 247, 0.25) !important;
  color: var(--ctp-text) !important;
  border-radius: 12px !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(203, 166, 247, 0.7) !important;
  /* box-shadow removed */
}

/* ---- Footer icons ---- */
#footer svg {
  color: var(--ctp-mauve) !important;
}

/* ---- Scrollbar (where supported) ---- */
* {
  --scrollbar-thumb: rgba(203, 166, 247, 0.55);
  --scrollbar-track: rgba(49, 50, 68, 0.35);
}