/* ==UserStyle==
@name           UserStyles.world Catppuccin (Improved)
@namespace      blackspirits.github.io/
@version        1.1.1
@description    Catppuccin theme for userstyles.world with better portability and UI polish. Based on UserStyles.world Catppuccin by Joaozin003.
@author         BlackSpirits
@license        MIT

@homepageURL    https://userstyles.world/style/25928/userstyles-world-catppuccin-improved
@supportURL     https://github.com/BlackSpirits/UserScripts-UserStyles/issues
@downloadURL    https://raw.githubusercontent.com/BlackSpirits/UserScripts-UserStyles/main/userstyles/userstyles-world/userstyles-world-catppuccin.user.css
@icon           https://userstyles.world/favicon.ico

@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",
  "neutral:Neutral (Gray)"
]
==/UserStyle== */

/* Based on:
 * https://userstyles.world/style/24007/userstyles-world-catppuccin
 * by Joaozin003
 */

@-moz-document url-prefix("https://userstyles.world/") {

  // Apply palette depending on system scheme (more portable than nesting in :root)
  @media (prefers-color-scheme: light) {
    #catppuccin(@lightFlavor);
  }
  @media (prefers-color-scheme: dark) {
    #catppuccin(@darkFlavor);
  }

  #catppuccin(@flavor) {
    // --- Base palette ---
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo:  @catppuccin[@@flavor][@flamingo];
    @pink:      @catppuccin[@@flavor][@pink];
    @mauve:     @catppuccin[@@flavor][@mauve];
    @red:       @catppuccin[@@flavor][@red];
    @maroon:    @catppuccin[@@flavor][@maroon];
    @peach:     @catppuccin[@@flavor][@peach];
    @yellow:    @catppuccin[@@flavor][@yellow];
    @green:     @catppuccin[@@flavor][@green];
    @teal:      @catppuccin[@@flavor][@teal];
    @sky:       @catppuccin[@@flavor][@sky];
    @sapphire:  @catppuccin[@@flavor][@sapphire];
    @blue:      @catppuccin[@@flavor][@blue];
    @lavender:  @catppuccin[@@flavor][@lavender];

    @text:      @catppuccin[@@flavor][@text];
    @subtext1:  @catppuccin[@@flavor][@subtext1];
    @subtext0:  @catppuccin[@@flavor][@subtext0];
    @overlay2:  @catppuccin[@@flavor][@overlay2];
    @overlay1:  @catppuccin[@@flavor][@overlay1];
    @overlay0:  @catppuccin[@@flavor][@overlay0];

    @surface2:  @catppuccin[@@flavor][@surface2];
    @surface1:  @catppuccin[@@flavor][@surface1];
    @surface0:  @catppuccin[@@flavor][@surface0];

    @base:      @catppuccin[@@flavor][@base];
    @mantle:    @catppuccin[@@flavor][@mantle];
    @crust:     @catppuccin[@@flavor][@crust];

    // --- Accent selection (with neutral option) ---
    @accent: if((@@accentColor = neutral), @subtext0, @catppuccin[@@flavor][@@accentColor]);

    // --- Global tokens ---
    :root, body {
      --bg-1: @base;
      --bg-2: @mantle;
      --bg-3: @crust;
      --bg-4: @surface1;
      --bg-5: @surface0;

      --fg-1: @text;
      --fg-2: @subtext0;
      --fg-3: @peach;
      --fg-4: @peach;
      --fg-5: @overlay0;

      // cleaner accent ladder (mixed with base instead of overlay)
      --ac-1: mix(@accent, @base, 20%);
      --ac-2: mix(@accent, @base, 40%);
      --ac-3: mix(@accent, @base, 60%);
      --ac-4: mix(@accent, @base, 80%);
      --ac-5: @accent;

      --st-1: mix(@sky, @text, 20%);
      --st-2: mix(@sky, @text, 40%);
      --st-3: mix(@sky, @text, 60%);
      --st-4: mix(@sky, @text, 80%);
      --st-5: @sky;

      // robust alpha via fade()
      --bg-t: fade(@base, 80%);
      --bg-f: fade(@crust, 30%);
      --ac-f: fade(@accent, 30%);
      --st-f: fade(@sky, 30%);

      --dg: @red;
      --inverse: @base;

      --ring: fade(@accent, 45%);
      --ring-strong: fade(@accent, 65%);
      --border: @overlay0;
      --shadow: fade(#000, 18%);
    }

    // --- Base text & backgrounds ---
    body {
      color: var(--fg-1);
      background: var(--bg-1);
    }

    ::selection {
      background: fade(@accent, 25%);
      color: @text;
    }

    ::placeholder {
      color: @overlay1;
    }

    // --- Tooltips ---
    [data-tooltip]::before {
      background-color: @overlay0;
      color: @text;
    }
    [data-tooltip]::after {
      border-top-color: @overlay0;
    }

    // --- Cards ---
    .card {
      background-color: @mantle;
      border-color: @overlay0;
      box-shadow: 0 8px 24px var(--shadow);

      .card-footer {
        border-top-color: @overlay0;

        & .fg\:3 {
          color: @text !important;
        }
      }

      .rating.score-1 svg { stroke: @red; }
      .rating.score-2 svg { stroke: @peach; }
      .rating.score-3 svg { stroke: @yellow; }
      .rating.score-4 svg { stroke: @green; }
      .rating.score-5 svg { stroke: @teal; }
    }

    // --- Forms / inputs (premium polish) ---
    input, textarea, select {
      background: @mantle;
      color: @text;
      border: 1px solid @overlay0;
      border-radius: 10px;
      transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;

      &:hover {
        border-color: @overlay1;
      }

      &:focus, &:focus-visible {
        outline: none;
        border-color: fade(@accent, 65%);
        box-shadow: 0 0 0 3px var(--ring);
      }

      &:disabled {
        opacity: .65;
        cursor: not-allowed;
      }
    }

    // --- Buttons / clickable ---
    button, .button, [role="button"] {
      background: @surface0;
      color: @text;
      border: 1px solid @overlay0;
      border-radius: 12px;
      transition: transform .06s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;

      &:hover {
        background: @surface1;
        border-color: @overlay1;
      }

      &:active {
        transform: translateY(1px);
      }

      &:focus, &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--ring);
        border-color: fade(@accent, 65%);
      }
    }

    // If the site has primary buttons, try to give them accent
    .btn-primary, .button.primary, button.primary {
      background: fade(@accent, 18%);
      border-color: fade(@accent, 45%);

      &:hover {
        background: fade(@accent, 24%);
        border-color: fade(@accent, 60%);
      }

      &:focus, &:focus-visible {
        box-shadow: 0 0 0 3px var(--ring-strong);
      }
    }

    // --- Pills / tags / chips (generic) ---
    .tag, .pill, .chip, .badge {
      background: fade(@accent, 12%);
      border: 1px solid fade(@accent, 35%);
      color: @text;
      border-radius: 999px;
    }

    // --- Code blocks (if present) ---
    pre, code {
      background: @crust;
      color: @text;
      border-color: @overlay0;
    }
    
    /* --- LINKS (global, balanced contrast) --- */
    body a,
    body a:visited,
    main a,
    main a:visited,
    #app a,
    #app a:visited {
      color: mix(@accent, @text, 90%) !important;
      text-decoration-color: fade(@accent, 48%) !important;
      transition: color .12s ease, text-decoration-color .12s ease;
    }

    body a:hover,
    body a:focus,
    body a:focus-visible,
    main a:hover,
    main a:focus,
    main a:focus-visible,
    #app a:hover,
    #app a:focus,
    #app a:focus-visible {
      color: mix(@accent, @crust, 75%) !important;
      text-decoration-color: fade(@accent, 48%) !important;
      outline: none;
    }
    
	/* --- Primary CTA buttons (Install / Save changes / etc.) --- */
	.btn.icon.primary,
	button.btn.icon.primary,
	a.btn.icon.primary {
	  color: mix(@accent, @crust, 120%) !important; /* dark, readable label */
	  background-color: var(--ac-1) !important;
	  border: 1px solid var(--ac-3) !important;
	  transition: all 0.2s ease-in-out;
	}

	/* Hover */
	.btn.icon.primary:hover,
	button.btn.icon.primary:hover,
	a.btn.icon.primary:hover {
	  background-color: var(--ac-2) !important;
	  border-color: var(--ac-4) !important;
	  box-shadow: 0 0 0 3px var(--ac-f) !important;
	  color: mix(@accent, @crust, 120%) !important;
	}

	/* Focus */
	.btn.icon.primary:focus,
	.btn.icon.primary:focus-visible,
	button.btn.icon.primary:focus,
	button.btn.icon.primary:focus-visible,
	a.btn.icon.primary:focus,
	a.btn.icon.primary:focus-visible {
	  outline: none !important;
	  background-color: var(--ac-3) !important;
	  border-color: var(--ac-5) !important;
	  box-shadow: 0 0 0 3px var(--ac-f) !important;
	  color: mix(@accent, @crust, 120%) !important;
	}

	/* Active */
	.btn.icon.primary:active,
	button.btn.icon.primary:active,
	a.btn.icon.primary:active {
	  background-color: var(--ac-4) !important;
	  box-shadow: inset 0 2px 4px fade(@crust, 20%) !important;
	  color: mix(@accent, @crust, 130%) !important;
	}
  }
}

/* less nasty formatting than what i copied from */
@catppuccin: {
  @latte: {
    @rosewater: #dc8a78;
    @flamingo: #dd7878;
    @pink: #ea76cb;
    @mauve: #8839ef;
    @red: #d20f39;
    @maroon: #e64553;
    @peach: #fe640b;
    @yellow: #df8e1d;
    @green: #40a02b;
    @teal: #179299;
    @sky: #04a5e5;
    @sapphire: #209fb5;
    @blue: #1e66f5;
    @lavender: #7287fd;
    @text: #4c4f69;
    @subtext1: #5c5f77;
    @subtext0: #6c6f85;
    @overlay2: #7c7f93;
    @overlay1: #8c8fa1;
    @overlay0: #9ca0b0;
    @surface2: #acb0be;
    @surface1: #bcc0cc;
    @surface0: #ccd0da;
    @base: #eff1f5;
    @mantle: #e6e9ef;
    @crust: #dce0e8;
  };
  @frappe: {
    @rosewater: #f2d5cf;
    @flamingo: #eebebe;
    @pink: #f4b8e4;
    @mauve: #ca9ee6;
    @red: #e78284;
    @maroon: #ea999c;
    @peach: #ef9f76;
    @yellow: #e5c890;
    @green: #a6d189;
    @teal: #81c8be;
    @sky: #99d1db;
    @sapphire: #85c1dc;
    @blue: #8caaee;
    @lavender: #babbf1;
    @text: #c6d0f5;
    @subtext1: #b5bfe2;
    @subtext0: #a5adce;
    @overlay2: #949cbb;
    @overlay1: #838ba7;
    @overlay0: #737994;
    @surface2: #626880;
    @surface1: #51576d;
    @surface0: #414559;
    @base: #303446;
    @mantle: #292c3c;
    @crust: #232634;
  };
  @macchiato: {
    @rosewater: #f4dbd6;
    @flamingo: #f0c6c6;
    @pink: #f5bde6;
    @mauve: #c6a0f6;
    @red: #ed8796;
    @maroon: #ee99a0;
    @peach: #f5a97f;
    @yellow: #eed49f;
    @green: #a6da95;
    @teal: #8bd5ca;
    @sky: #91d7e3;
    @sapphire: #7dc4e4;
    @blue: #8aadf4;
    @lavender: #b7bdf8;
    @text: #cad3f5;
    @subtext1: #b8c0e0;
    @subtext0: #a5adcb;
    @overlay2: #939ab7;
    @overlay1: #8087a2;
    @overlay0: #6e738d;
    @surface2: #5b6078;
    @surface1: #494d64;
    @surface0: #363a4f;
    @base: #24273a;
    @mantle: #1e2030;
    @crust: #181926;
  };
  @mocha: {
    @rosewater: #f5e0dc;
    @flamingo: #f2cdcd;
    @pink: #f5c2e7;
    @mauve: #cba6f7;
    @red: #f38ba8;
    @maroon: #eba0ac;
    @peach: #fab387;
    @yellow: #f9e2af;
    @green: #a6e3a1;
    @teal: #94e2d5;
    @sky: #89dceb;
    @sapphire: #74c7ec;
    @blue: #89b4fa;
    @lavender: #b4befe;
    @text: #cdd6f4;
    @subtext1: #bac2de;
    @subtext0: #a6adc8;
    @overlay2: #9399b2;
    @overlay1: #7f849c;
    @overlay0: #6c7086;
    @surface2: #585b70;
    @surface1: #45475a;
    @surface0: #313244;
    @base: #1e1e2e;
    @mantle: #181825;
    @crust: #11111b;
  };
};