@use "sass:color";
@import "mixins";

/* ----------------------------------------- */
/* Color definitions                         */
/* ----------------------------------------- */

/* Colors */
$white-color: white;
$black-color: black;
$gray-color: #808080;
$light-gray-color: #ababab;
$dark-gray-color: #545454;

/* Global */
$primary-color: #5e0000 !default;
$secondary-color: #171f69 !default; /* used for mini headers, alternate primary color */
$tertiary-color: #e9d7a1 !default; /* compliments the primary color, usually used in combination */

$alt-color: #786452 !default; /* for all other uses */
$alt-dark: #443730 !default;
$gold-brown: #956d58 !default;
$background-color: #f8f4f1 !default;
$background-dark: darken($background-color, 10);
$sub-color: #605856 !default;

/* Lighter / Darker */
$light-color: lighten($primary-color, 10) !default;
$dark-color: darken($primary-color, 10) !default;
$tertiary-dark-color: darken($tertiary-color, 10) !default;
$tertiary-light-color: lighten($tertiary-color, 10) !default;

/* Text */
$text-dark-color: #1c1c1c !default;

/* ----------------------------------------- */
/* Color schemes                             */
/* ----------------------------------------- */

/* Proficiency ranks */
$rank-untrained: #424242 !default;
$rank-trained: #171f69 !default;
$rank-expert: #3c005e !default;
$rank-master: #664400 !default;
$rank-legendary: #5e0000 !default;

/* Rarities */
$rarity-common: #323232 !default;
$rarity-uncommon: #98513d !default;
$rarity-rare: #002664 !default;
$rarity-unique: #54166e !default;

/* Degrees of success */
$degree-success-critical: rgb(0, 128, 0) !default;
$degree-success: rgb(0, 0, 255) !default;
$degree-failure: rgb(255, 69, 0) !default;
$degree-failure-critical: rgb(255, 0, 0) !default;

/* Value adjustments (e.g. weak/elite) */
$adjusted-higher: #009988 !default;
$adjusted-lower: #cc3311 !default;

/* ----------------------------------------- */
/* CSS Custom Properties                     */
/* ----------------------------------------- */

:root {
  /* Global */
  --primary: #{$primary-color};
  --system-primary: #{$primary-color};
  --primary-light: #{color.scale($primary-color, $lightness: +20%)};
  --primary-dark: #{color.scale($primary-color, $lightness: -40%)};
  --system-secondary: #{$secondary-color};
  --secondary: #{$secondary-color};
  --secondary-light: #{color.scale($secondary-color, $lightness: +25%)};
  --secondary-dark: #{color.scale($secondary-color, $lightness: -45%)};
  --tertiary: #{$tertiary-color};
  --remaster: hsl(152, 87%, 15%);
  --remaster-light: hsl(170, 96%, 19%);
  --remaster-dark: hsl(153, 100%, 8%);

  --rarity-common: #{$rarity-common};
  --rarity-uncommon: #{$rarity-uncommon};
  --rarity-rare: #{$rarity-rare};
  --rarity-unique: #{$rarity-unique};

  --alt: #{$alt-color};
  --alt-dark: #{$alt-dark};
  --bg: #{$background-color};
  --bg-dark: #{$background-dark};
  --gold-brown: #{$gold-brown};
  --sub: #{$sub-color};
  --color-disabled: #{$light-gray-color};

  --blind-bg: #a57aa5;
  --whisper-bg: #e3e3ff;

  // Inline links and user visibility
  --inline-link-bg: #ddd;
  --inline-repost-bg: #{lighten(#ddd, 5%)};
  --visibility-gm-bg: #e8e8ef;
  --visibility-owner-bg: #ddebe1;
  --blind-roll: #f5eaf5;

  /* Lighter / Darker */
  --light: #{$light-color};
  --dark: #{$dark-color};
  --tertiary-dark: #{$tertiary-dark-color};
  --tertiary-light: #{$tertiary-light-color};

  /* Text */
  --body: var(--text-dark);
  --color-text-trait: #f5efe0;
  --text-dark: #{$text-dark-color};
  --text-light: #{$white-color};

  /* Borders */
  --color-border-trait: #d8c384;
  --color-border-divider: #baa991;

  /* Mats */
  --mats-dark: #1c1c1c;
  --mats-gold-dark: #dbc682;
  --mats-gold-light: #e6d8a7;
  --mats-green-light: #99aea1;
  --mats-green: #3e644b;
  --mats-green-dark: #233b2b;

  /* Headers w/ boxes */
  --header-color: var(--text-light);
  --header-bg: var(--secondary);

  /* Sidebar */
  --sidebar-label: var(--tertiary-dark);
  --sidebar-title: var(--tertiary);

  /* App UI */
  --glass-bg: rgba(20, 20, 20, 0.6);
  --glass-bg-gold: rgba(103, 88, 60, 0.441);
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-dark: rgba(0, 0, 0, 0.7);
  --gold-and-glow: 0 0 0 1px var(--tertiary), 0 0 0 2px var(--gold-brown), inset 0 0 3px rgba(255, 255, 255, 0.5);
  --glassy: 0px 0px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 0px 2px 1px rgba(0, 0, 0, 1),
    0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  --glassy-sharp: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px 5px 1px rgba(0, 0, 0, 0.8);
  --glassy-sharp-inset: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;
  --glassy-sharp-highlight: 0px 0px 0px 1px rgba(245, 222, 179, 0.7) inset, 0px 1px 5px 1px rgba(0, 0, 0, 0.8);
  --sheet-light: url(../img/background-light.webp);
  --sheet-dark: url(../img/background-dark4.webp);
  --header: url(../img/red-header.webp);
  --banner-top: url(../img/red-sidebar-top.webp);
  --banner-bottom: url(../img/red-sidebar-bottom.webp);
  // --border-radius: controlled in code
  --hotbar-width: unset;

  /* Degrees of success */
  --degree-success-critical: rgb(0, 128, 0);
  --degree-success: rgb(0, 0, 255);
  --degree-failure: rgb(255, 69, 0);
  --degree-failure-critical: rgb(255, 0, 0);

  /* Value adjustments (e.g. weak/elite) */
  --adjusted-higher: #009988;
  --adjusted-lower: #cc3311;
}

/* ----------------------------------------- */
/* DUI color variables                       */
/* ----------------------------------------- */

:root {
  --color-primary-1: #ee9b3a;
  --color-primary-1-40: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
  --color-primary-2: #c9593f;
  --color-primary-2-20: color-mix(in srgb, var(--color-primary-2) 20%, transparent);
  --color-primary-3: #5d142b;
  --color-primary-3-10: color-mix(in srgb, var(--color-primary-3) 10%, transparent);
  --color-primary-3-75: color-mix(in srgb, var(--color-primary-3) 75%, transparent);
  --color-primary-4: #420418;
  --color-primary-4-75: color-mix(in srgb, var(--color-primary-4) 75%, transparent);
  --color-primary-5: #26020d;

  --color-secondary-1: #b1a0d4;
  --color-secondary-2: #79689c;
  --color-secondary-3: #584a75;
  --color-secondary-3-75: color-mix(in srgb, var(--color-secondary-3) 75%, transparent);
  --color-secondary-4: #302831;
  --color-secondary-5: #0b0a13;

  --color-secondary-5-25: rgba(11, 10, 19, 0.25);
  --color-secondary-5-50: rgba(11, 10, 19, 0.5);
  --color-secondary-5-75: rgba(11, 10, 19, 0.75);
  --color-secondary-5-90: rgba(11, 10, 19, 0.9);

  --text-color-1: #f7f3e8;
  --text-color-2: #efe6d8;
  --text-color-3: #e7d1b1;
  --text-color-4: #d0b8a3;
  --text-color-5: #9f8475;
  --text-color-disabled: #aaa;

  --color-level-error: #ce0707;
  --color-level-error-bg: rgba(105, 0, 8, 0.8);
  --color-level-error-border: #750003;
  --color-level-info: #59a1f6;
  --color-level-info-bg: rgba(47, 80, 132, 0.8);
  --color-level-info-border: #5c87b9;
  --color-level-success: #26b231;
  --color-level-success-bg: rgba(26, 107, 34, 0.8);
  --color-level-success-border: #1b8f23;
  --color-level-warning: #ee9b3a;
  --color-level-warning-bg: rgba(214, 150, 0, 0.8);
  --color-level-warning-border: #b18404;

  --color-level-green-bg: rgba(138, 211, 4, 0.4); // custom from website
  --color-level-green-border: #8ad304; // custom from website
  --color-level-yellow-bg: rgba(211, 192, 4, 0.4); // custom from website
  --color-level-yellow-border: #d3c004; // custom from website
  --color-level-orange-bg: rgba(211, 119, 4, 0.4); // custom from website
  --color-level-orange-border: #d37704; // custom from website
  --color-level-red-bg: rgba(211, 20, 4, 0.4); // custom from website
  --color-level-red-border: #d31404; // custom from website

  --scrollbar-thumb-background: #5d142b;
  --scrollbar-thumb-border-color: #8d151b;
}

/* ----------------------------------------- */
/* Damage colors                             */
/* ----------------------------------------- */

[data-color-scheme="dark"] .damage {
  --color-bg-acid: rgba(32, 194, 32, 0.125); // adjusted
  --color-bg-bleed: rgba(207, 28, 58, 0.125); // adjusted
  --color-bg-chaotic: rgba(221, 26, 221, 0.125); // adjusted
  --color-bg-cold: rgba(186, 186, 246, 0.125); // adjusted
  --color-bg-electricity: rgba(221, 167, 30, 0.125); // adjusted
  --color-bg-evil: rgba(153, 59, 220, 0.125); // adjusted
  --color-bg-fire: rgba(229, 93, 39, 0.125); // adjusted
  --color-bg-force: rgba(177, 77, 249, 0.125); // adjusted
  --color-bg-good: rgba(157, 115, 10, 0.125); // adjusted
  --color-bg-lawful: rgba(123, 85, 28, 0.125); // adjusted
  --color-bg-mental: rgba(87, 87, 219, 0.125); // adjusted
  --color-bg-physical: rgba(132, 132, 132, 0.125); // adjusted
  --color-bg-poison: rgba(147, 178, 93, 0.125); // adjusted
  --color-bg-sonic: rgba(28, 217, 217, 0.125); // adjusted
  --color-bg-spirit: rgba(147, 142, 189, 0.125); // adjusted
  --color-bg-vitality: rgba(255, 255, 224, 0.125);
  --color-bg-void: rgb(81, 21, 78, 0.125); // adjusted
  --color-border-acid: #12a812; // adjusted
  --color-border-bleed: #d11c3b; // adjusted
  --color-border-chaotic: #d311d3; // adjusted
  --color-border-cold: #6464dd;
  --color-border-electricity: yellow; // adjusted
  --color-border-evil: rgb(145, 63, 203); // adjusted
  --color-border-fire: #cd4a17; // adjusted
  --color-border-force: #9222e2; // adjusted
  --color-border-good: #dcb85f; // adjusted
  --color-border-lawful: #97743f; // adjusted
  --color-border-mental: rgb(82, 82, 209); // adjusted
  --color-border-physical: #939292; // adjusted
  --color-border-poison: #9aba64; // adjusted
  --color-border-sonic: rgb(30, 202, 202); // adjusted
  --color-border-spirit: #5a5585;
  --color-border-vitality: #ffffe0;
  --color-border-void: rgb(122, 38, 117); // adjusted
  --color-text-acid: #34aa34; // adjusted
  --color-text-bleed: #b0162f; // adjusted
  --color-text-chaotic: #b71ab7; // adjusted
  --color-text-cold: #6868e1; // adjusted
  --color-text-electricity: #e7b22b; // adjusted
  --color-text-evil: #836d91; // adjusted
  --color-text-fire: #b64214; // adjusted
  --color-text-force: #8321ca; // adjusted
  --color-text-good: #c79b2b; // adjusted
  --color-text-lawful: white; // adjusted
  --color-text-mental: #4c4cc8; // adjusted
  --color-text-physical: #bab9b9; // adjusted
  --color-text-poison: #657d3f; // adjusted
  --color-text-sonic: #21c2c2; // adjusted
  --color-text-spirit: #827dac; // adjusted
  --color-text-vitality: #ffffa0;
  --color-text-void: rgb(122, 38, 117); // adjusted
}

:root .damage.color.acid {
  --damage-color: var(--color-border-acid);
}

:root .damage.color.bleed {
  --damage-color: var(--color-border-bleed);
}

:root .damage.color.bludgeoning,
:root .damage.color.piercing,
:root .damage.color.slashing {
  --damage-color: var(--color-border-physical);
}

:root .damage.color.chaotic {
  --damage-color: var(--color-border-chaotic);
}

:root .damage.color.cold {
  --damage-color: var(--color-border-cold);
}

:root .damage.color.electricity {
  --damage-color: var(--color-border-electricity);
}

:root .damage.color.evil {
  --damage-color: var(--color-border-evil);
}

:root .damage.color.fire {
  --damage-color: var(--color-border-fire);
}

:root .damage.color.force {
  --damage-color: var(--color-border-force);
}

:root .damage.color.good {
  --damage-color: var(--color-border-good);
}

:root .damage.color.lawful {
  --damage-color: var(--color-border-lawful);
}

:root .damage.color.mental {
  --damage-color: var(--color-border-mental);
}

:root .damage.color.poison {
  --damage-color: var(--color-border-poison);
}

:root .damage.color.sonic {
  --damage-color: var(--color-border-sonic);
}

:root .damage.color.spirit {
  --damage-color: var(--color-border-spirit);
}

:root .damage.color.vitality {
  --damage-color: var(--color-border-vitality);
}

:root .damage.color.void {
  --damage-color: var(--color-border-void);
}
