kktcss variables

// Commonly used web colors
$black: #000000;            // Black
$white: #ffffff;            // White
$success-green: #79bd9a;    // Padua
$error-red: #df405a;        // Cerise
$warning-red: #ff5050;      // Sunset Orange
$gold-star: #ca8f04;        // Dark Goldenrod

// Main used variables
$green-ui: #ecf5be;
$classic-base-color: $green-ui;         // Green BG Fill
$brown-ui: #6a4643;      // Column Icon brown -- a lot of shit uses this
  $classic-primary-color: $brown-ui;
$brown-text: #7b5d4d;
  $primary-text-color: $brown-text !default;
$green-text: #8e9956;    // Main green -  That weird muted shit that is on footers and stuff uses this
  $classic-secondary-color: $green-text;
$pink-text: #ed649c;    // Main Pink (usernames etc)
  $classic-highlight-color: $pink-text;
$pink-ui: #e46bac;

// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;

$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;

// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default;                  // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 25%) !default; // Lighter darkest
$ui-primary-color: $green-text !default;            // Lighter
$ui-secondary-color: $green-text !default;        // Lightest
$ui-highlight-color: $green-ui !default;                         // Green Highlight
$ui-highlight-pink: $pink-text !default;        // Pink Highlight

//kktCSS START
  // Greens
    $reply-indicator-bg-green: #d7e5a3;
    $body-bg-green: #ecf5be;
    $column-header-bg-green: #d0e093; // rgba(208,224,147,0.7)
    $column-subheading-bg-green: #dced91;
    $column-scrollable-bg-green: #d4dcab; // rgba(212, 220, 171, 0.5), transparentize(mix(#ecf5be, black, 90%), 0.5)
    $media-spoiler-bg-green: #e2e2c9;
    $status-username-green: #8e9956;
    $getting-started-url-green: #707844; // darken(#8e9956, 10%)
    $getting-started-url-hover-green: #515831; // darken(#8e9956, 20%)
    $button-bg-green: #9bc430;
    $button-hover-bg-green: #85a13b;
    $button-disabled-bg-green: #a2ad85; // hsla(77, 20%, 60%, 1)
    $privacy-dropdown-strong-green: #394026; // hsl(77, 25%, 20%)
    $privacy-dropdown-green: #7f8f56; // hsl(77, 25%, 45%)
    $icon-button-inverted-active-green: #96b34c;
    $privacy-dropdown-active-bg-green: #96b34d; // hsla(77, 40%, 50%, 1)
    $privacy-dropdown-active-hover-bg-green: #a0ba5e; // hsla(77, 40%, 55%, 1)
    $search-input-green: #7c8658;
    $react-toggle-checked-green: #9bc530;
    $react-toggle-checked-hover-green: #b4d75b;
    $account-header-content-url-green: #abba5e; // hsl(70, 40%, 55%)
    $admin-sidebar-bg-green: #adba79; // rgba(173,186,121,0.5)
    $sidebar-layout-bg-green: #c9d185;

  // Pinks
    $pink-main: #ed649c; // also rgba(237, 100, 156, 0.23)
    $status-display-name-muted-pink: #f086b1;
    $drawer-bg-pink: #e46bac;
    $spoiler-link-bg-pink: #ed2a90; // rgba(237, 42, 144, 0.6)
    $spoiler-link-muted-bg-pink: #eda1c8;
    $dropdown-content-bg-pink: #e3a4ad;
    $spoiler-link-hover-bg-pink: #f5b9c2;
    $dropdown-separator-border-pink: #e57cb1;
    $navigation-bar-bg-pink: #c13386; // hsla(325, 58%, 48%, 0.6)
    $navigation-bar-strong-pink: #efcfcf;
    $navigation-bar-profile-pink: #dfafaf;
    $account-header-content-hashtag-pink: #e1709f; // hsl(335, 65%, 66%)
    $upload-area-bg-pink: #e488b9;
    $upload-area-border-pink: #d84a9d;
    $onboarding-paginator-bg-pink-1: #e24898; // rgba(226,72,152,1)
    $onboarding-paginator-bg-pink-2: #e56cac; // rgba(229,108,172,1)
    $about-body-em-bg-pink: #f292b9; // lighten(#ed649c, 10%)

  // Yellows
    $status-bg-yellow-1: #fcfce1; // rgba(252, 252, 225, 1)
    $status-bg-yellow-2: #f9f0ae; // rgba(249, 240, 174, 1)
    $status-border-yellow: #e1c152;
    $status-muted-border-yellow: #e8d17f;
    $status-card-hover-border-yellow: #bc9c2b;
    $yellow-shadow: #f5e33a;
    $account-header-content-text-yellow: #c2b870; // hsla(53, 40%, 60%, 1)
    $icon-button-active-star-yellow: #ca8f04; // rgb(202, 143, 4), $gold-star

  // Browns
    $status-content-brown: #7b5d4d;
    $status-content-muted-brown: #ad9588;
    $column-icon-brown: #6a4643; // used as darker brown on hover
    $brown-icon-button: #8b6461;
    $icon-button-disabled-brown: #9c7a78;
    $follow-request-border-brown: #8b6d5d;
    $onboarding-dot-active-bg-brown: #a07774;
    $table-action-hover-brown: #6c5549;
    $about-body-em-brown: #6d4e4c; // darken(#8b6461, 10%)

  // Others
  $gray: #707b97;
  $setting-text-focus-gray: #1a1a1a;
  $account-header-content-blue: #d9e1e8;

// Background Variables
$green-diamonds: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiBoZWlnaHQ9IjExNCIgdmlld0JveD0iMCAwIDgwIDExNCIgd2lkdGg9IjgwIiB2ZXJzaW9uPSIxLjEiPgo8cmVjdCBoZWlnaHQ9IjExNCIgd2lkdGg9IjgwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZWNmNWJlIi8+CjxwYXRoIGZpbGw9IiNlMGVhOTUiIGQ9Im0wIDU3IDQwLTU3IDQwIDU3LTQwIDU3eiIvPgo8L3N2Zz4=");
$pink-diamonds: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHdpZHRoPSIyMCI+PHJlY3QgaGVpZ2h0PSIyOCIgd2lkdGg9IjIwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTQ2YmFjIi8+PHBhdGggZD0ibTAgMTQgMTAtMTQgMTAgMTQtMTAgMTR6IiBmaWxsPSIjZGY1N2E0Ii8+PC9zdmc+');

$pink-diamonds-fill: $pink-ui;

$yellow-border: -1px -1px 0 $yellow-shadow, 1px -1px 0 $yellow-shadow, -1px 1px 0 $yellow-shadow, 1px 1px 0 $yellow-shadow;