/* ==UserStyle==
@name Mastodon Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/mastodon
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/mastodon
@version 2026.07.08
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/mastodon/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amastodon
@description Soothing pastel theme for Mastodon
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@import "https://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";

@-moz-document domain("mastodon.social"), domain("fosstodon.org") {
  [data-color-scheme="light"] {
    #catppuccin(@lightFlavor);
  }
  [data-color-scheme="dark"] {
    #catppuccin(@darkFlavor);
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    --color-bg-primary: @base;
    --color-bg-secondary: @surface0;
    --color-bg-tertiary: @surface1;
    --color-bg-inverted: @text;

    --color-text-primary: @text;
    --color-text-secondary: @subtext1;
    --color-text-tertiary: @subtext0;
    --color-text-inverted: @base;

    /* Brand */
    --color-bg-brand-base: @accent;
    --color-bg-brand-base-hover: darken(@accent, 5%);
    --color-bg-brand-soft: fade(@accent, 40%);
    --color-bg-brand-softest: fade(@accent, 15%);

    --color-text-brand: @accent;
    --color-text-on-brand-base: @base;
    --color-text-brand-on-inverted: @accent;

    /* States */

    // Error
    --color-bg-error-base: @red;
    --color-bg-error-base-hover: darken(@red, 5%);
    --color-bg-error-soft: fade(@red, 40%);
    --color-bg-error-softest: fade(@red, 15%);
    --color-text-error: @red;
    --color-text-on-error-base: @base;

    // Warning
    --color-bg-warning-base: @yellow;
    --color-bg-warning-soft: fade(@yellow, 40%);
    --color-bg-warning-softest: fade(@yellow, 15%);
    --color-text-warning: @yellow;
    --color-text-on-warning-base: @base;

    // Success
    --color-bg-success-base: @green;
    --color-bg-success-soft: fade(@green, 40%);
    --color-bg-success-softest: fade(@green, 15%);
    --color-text-success: @green;
    --color-text-on-success-base: @base;

    // Disabled
    --color-bg-disabled: @overlay1;
    --color-text-disabled: @overlay1;
    --color-text-on-disabled: @subtext0;

    /* Borders */
    --color-border-primary: @surface2;
    --color-border-brand: @accent;
    --color-border-brand-soft: fade(@accent, 50%);
    --color-border-error: @red;
    --color-border-error-soft: fade(@red, 50%);
    --color-border-warning-soft: fade(@yellow, 50%);
    --color-border-success-soft: fade(@green, 50%);

    /* Other */
    --color-shadow-primary: fade(@mantle, 30%);
    --color-bg-overlay-base: fade(@text, 60%);
    --color-bg-overlay-highlight: fade(@text, 5%);

    /* Images (alt text, hide/spoilers) */
    --color-bg-media-base: @crust;
    --color-text-on-media: @text;
    --color-border-media: @surface1;

    /* Actions (bookmarking, favoriting) */
    --color-text-bookmark-highlight: @teal;
    --color-text-favourite-highlight: @yellow;

    .logo {
      @svg: escape(
        '<svg width="65" height="65" viewBox="0 0 61 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836 45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836 8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877.198 5.075.237 10.142.697 15.197a71.5 71.5 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.7 35.7 0 0 0 19.484 1.028 28 28 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.15.15 0 0 0 .062-.118v-4.899a.15.15 0 0 0-.055-.111.14.14 0 0 0-.122-.028 54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.3 15.3 0 0 1-.857-3.882.142.142 0 0 1 .178-.145 53 53 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026 4.213-.119 8.654-.334 12.8-1.144.103-.02.206-.038.295-.065 6.539-1.255 12.762-5.196 13.394-15.176.024-.393.083-4.115.083-4.523.003-1.386.446-9.829-.065-15.017" fill="url(#a)"/><path d="M50.394 22.237v17.35H43.52V22.749c0-3.545-1.478-5.353-4.483-5.353-3.303 0-4.958 2.139-4.958 6.364v9.217h-6.835V23.76c0-4.225-1.657-6.364-4.96-6.364-2.988 0-4.48 1.808-4.48 5.353v16.84H10.93V22.237q0-5.318 2.715-8.45c1.868-2.082 4.317-3.152 7.358-3.152 3.519 0 6.178 1.354 7.951 4.057l1.711 2.871 1.714-2.871c1.773-2.703 4.432-4.056 7.945-4.056 3.038 0 5.487 1.069 7.36 3.152q2.714 3.128 2.71 8.449" fill="@{base}"/><defs><linearGradient id="a" x1="30.5" y1="0" x2="30.5" y2="65" gradientUnits="userSpaceOnUse"><stop stop-color="@{accent}"/><stop offset="1" stop-color="@{accent}"/></linearGradient></defs></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    /* Verified badge icon (e.g. profile fields) */
    svg.icon-verified {
      path[fill="url(#VerifiedGradient)"] {
        fill: @green !important;
      }
      path[stroke="#fff"] {
        stroke: @base !important;
      }
    }
  }
}