/* ==UserStyle==
@name Zen Browser Docs Catppuccin
@namespace github.com/catppuccin/userstyles/styles/zen-browser-docs
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/zen-browser-docs
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/zen-browser-docs/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Azen-browser-docs
@description Soothing pastel theme for Zen Browser Docs
@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://userstyles.catppuccin.com/lib/lib.less";

@-moz-document domain("zen-browser.app") {
  :root[data-theme="light"],
  .light {
    #catppuccin(@lightFlavor);
  }

  :root[data-theme="dark"],
  .dark {
    #catppuccin(@darkFlavor);
  }

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

    --zen-paper: @mantle;
    --zen-dark: @subtext1;
    --zen-subtle: @surface0;

    --color-fd-background: @mantle;
    --color-fd-popover: @mantle;
    --color-fd-secondary: @base;
    --color-fd-accent: @surface0;
    --color-fd-card: @crust;
    --color-fd-border: @surface0;
    --color-fd-ring: @overlay0;

    --color-fd-primary: @accent;
    --color-fd-muted: fade(@subtext1, 5%);

    --color-fd-foreground: @subtext1;
    --color-fd-accent-foreground: @subtext1;
    --color-fd-card-foreground: @subtext1;
    --color-fd-primary-foreground: @subtext1;
    --color-fd-secondary-foreground: @subtext1;
    --color-fd-popover-foreground: @subtext1;
    --color-fd-muted-foreground: @subtext1;

    --color-blue-500: @blue;
    --color-red-500: @red;
    --color-orange-500: @peach;

    .text-coral,
    .zen-link,
    .extra a,
    .text-\[\#fe846b\],
    .text-\[\#f7a74b\],
    .text-\[\#f76f53\],
    .hover\:text-coral:hover {
      color: @accent;
    }

    .text-\[\#e3401f\],
    .dark\:text-\[\#D02908\] {
      color: @red;
    }

    .hover\:text-fd-accent-foreground:hover {
      color: @text;
    }

    .dark\:text-white\/50 {
      color: @subtext0;
    }

    #nd-sidebar {
      --color-fd-secondary: @base;
      --color-fd-muted: fade(@subtext1, 5%);
      --color-fd-muted-foreground: @text;
    }

    img[src="/icon.svg"] {
      @svg: escape(
        '<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 44.308c6.797 0 12.308-5.51 12.308-12.308 0-6.797-5.51-12.308-12.308-12.308-6.797 0-12.308 5.51-12.308 12.308 0 6.797 5.51 12.308 12.308 12.308M41.846 32c0 5.438-4.408 9.846-9.846 9.846S22.154 37.438 22.154 32s4.408-9.846 9.846-9.846 9.846 4.408 9.846 9.846" fill="@{accent}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.333 32c0 11.782-9.55 21.333-21.333 21.333S10.667 43.783 10.667 32 20.217 10.667 32 10.667 53.333 20.217 53.333 32M32 49.23c9.516 0 17.23-7.714 17.23-17.23S41.517 14.77 32 14.77 14.77 22.483 14.77 32 22.483 49.23 32 49.23" fill="@{accent}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M64 32c0 17.673-14.327 32-32 32S0 49.673 0 32 14.327 0 32 0s32 14.327 32 32M32 58.256c14.501 0 26.256-11.755 26.256-26.256S46.501 5.744 32 5.744 5.744 17.499 5.744 32 17.499 58.256 32 58.256" fill="@{accent}"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }
  }
}