/*
   palette: https://catppuccin.com/palette
*/

/* tokens */
:root{
  /* core surfaces */
  --ctp-crust:   #11111b;
  --ctp-mantle:  #181825;
  --ctp-base:    #1e1e2e;
  --ctp-surface0:#313244;
  --ctp-surface1:#45475a;
  --ctp-surface2:#585b70;

  /* text */
  --ctp-text:     #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;

  /* accents */
  --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;

  /* site mapping */
  --bg-page:      var(--ctp-crust);
  --bg-container: var(--ctp-base);
  --bg-elev:      var(--ctp-surface0);
  --bg-hover:     var(--ctp-surface1);
  --outline:      rgba(0,0,0,.45);

  --fg:           var(--ctp-text);
  --fg-weak:      var(--ctp-subtext1);
  --fg-muted:     var(--ctp-overlay2);

  --link:         var(--ctp-blue);
  --link-visited: var(--ctp-mauve);
  --link-hover:   var(--ctp-peach);
}

/* base */
body{
  background: url("background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(12px);
  background-attachment: fixed;
  color: var(--fg);
}
::selection{ background: var(--ctp-lavender); color:#0b0b12; }

/* links */
a{ color: var(--link); }
a:visited{ color: var(--link-visited); }
a:hover{ color: var(--link-hover); }

/* container shell */
.container{
  background: #1e1e2eb8;
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--outline), 0 10px 40px rgba(0,0,0,.55);
  border-radius: 12px;
  backdrop-filter: blur(72px);
}

/* headings: soft rainbow sweep */
h1 a{
  background-image: linear-gradient(
    90deg,
    var(--ctp-lavender),
    var(--ctp-blue),
    var(--ctp-sapphire),
    var(--ctp-teal),
    var(--ctp-green),
    var(--ctp-yellow),
    var(--ctp-peach),
    var(--ctp-mauve)
  );
}
h4{ color: var(--fg-muted); }

/* rss badge */
.rss{ background: var(--bg-elev); color: var(--fg); }
.rss:hover{ background: var(--bg-hover); }

/* posts/cards */
.post{
  background: var(--bg-elev);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--outline);
}
.post:hover{
  background: color-mix(in oklch, var(--ctp-blue) 16%, var(--bg-elev));
}
#date{ color: var(--fg-muted); }

/* code */
code{
  background: var(--ctp-mantle);
  color: var(--ctp-green);
  border: 1px solid var(--bg-hover);
  border-radius: 6px;
}
pre code{ display:block; padding:.75rem 1rem; overflow:auto; }

/* tabs */
.tab{ background: var(--ctp-mantle); border-bottom-color: var(--bg-hover); }
.tab button{ color: var(--fg); }
.tab button:hover{ background: var(--bg-hover); }
.tab button.active{ background: var(--bg-elev); color: var(--fg); }
.tabcontent{ background: var(--bg-container); color: var(--fg-weak); }

/* gallery */
.grid-container{ background: #1e1e2e4b; }
.grid-item img{ outline-color: var(--bg-hover); }
.grid-item img:hover{ outline-color: var(--ctp-mauve); }
.grid-item p{ color: var(--fg-weak); }
#subp{ color: var(--fg-muted); }

/* audio player */
.audio-player button{ color: var(--fg-weak); }
.audio-player button:hover{ color: var(--ctp-peach); }
.audio-player input[type="range"]::-webkit-slider-thumb{ background: var(--fg-weak); }

/* avatar */
#avatar{ border-color: var(--bg-hover); }

/* contact form */
.contact-form{ color: var(--fg); }
.contact-form input,
.contact-form textarea{
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--bg-hover);
}
.contact-form button{
  background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-mauve));
  color: #0b0b12;
  border: none;
}
.contact-form button:hover{
  background: linear-gradient(90deg, var(--ctp-peach), var(--ctp-yellow));
  color: #0b0b12;
}

/* microblog */
.microblog-post{ background: var(--bg-elev); color: var(--fg); }
#microblog-date{ color: var(--fg-muted); }

/* confetti / misc */
.confetti{ color: var(--fg-weak); }

/* ascii fireworks (if present) */
#fridge-ascii-fireworks{ color: var(--ctp-peach); }

/* guestbook */
.guestbook { color: var(--fg); border-color: var(--bg-hover); }
.guestbook-messages { background: var(--ctp-crust); }
.guestbook-message { background-color: transparent; color: var(--fg); }
.guestbook-messages { scrollbar-color: var(--ctp-surface0) var(--ctp-crust) }
.guestbook-messages::-webkit-scrollbar-thumb { background: var(--ctp-surface0) }
.guestbook-messages::-webkit-scrollbar-thumb:hover { background: var(--ctp-mantle) }
.start-message { color: var(--ctp-surface1) }
.system-message { color: var(--ctp-surface1) }
#guestbook-send { background: var(--ctp-surface2); color: var(--fg); }
#guestbook-help { color: var(--ctp-surface2); }
.gb-trash { color: var(--ctp-surface2); }
#gb-time { color: var(--ctp-surface2); }
#guestbook-type { background: var(--ctp-mantle); color: inherit; }
.guestbook-controls { border-top: 2px solid var(--bg-hover); }

.gb-name-1 { color: var(--ctp-red); }
.gb-name-2 { color: var(--ctp-peach); }
.gb-name-3 { color: var(--ctp-yellow); }
.gb-name-4 { color: var(--ctp-green); }
.gb-name-5 { color: var(--ctp-teal); }
.gb-name-6 { color: var(--ctp-blue); }
.gb-name-7 { color: var(--ctp-mauve); }
.gb-name-8 { color: var(--ctp-pink); }
.gb-name-admin { color: var(--ctp-text) }
.guestbook-me { color: var(--ctp-surface1); }
.guestbook-cmd { color: var(--ctp-surface1); }
.gb-sound-toggle { color: var(--ctp-surface2); }