/**

    References:
      https://protocol.mozilla.org/
      https://material.io/

    Color names from:
      https://protocol.mozilla.org/fundamentals/color.html

    Tools:
      Lightness validator: https://www.hsluv.org/
      Contrast validator: https://bernaferrari.github.io/color-studio/#/
*/
:root {
    --blue-5: 170 242 255;
    --blue-10: 128 235 255;
    --blue-20: 0 221 255;
    --blue-30: 0 179 244;
    --blue-40: 0 144 237;
    --blue-50: 0 96 223;
    --blue-60: 2 80 187;
    --blue-70: 5 64 150;
    --blue-80: 7 48 114;
    --blue-90: 9 32 77;
    --dark-gray-10: 82 82 94;
    --dark-gray-20: 74 74 85;
    --dark-gray-30: 66 65 77;
    --dark-gray-40: 58 57 68;
    --dark-gray-50: 50 49 60;
    --dark-gray-60: 43 42 51;
    --dark-gray-70: 35 34 43;
    --dark-gray-80: 28 27 34;
    --dark-gray-90: 21 20 26;
    --green-30: 136 255 209;
    --green-40: 84 255 189;
    --green-50: 63 225 176;
    --green-60: 42 195 162;
    --green-70: 0 135 135;
    --green-80: 0 94 94;
    --ink-10: 57 52 115;
    --ink-80: 32 18 58;
    --light-gray-10: 249 249 251;
    --light-gray-20: 240 240 244;
    --light-gray-30: 224 224 230;
    --light-gray-40: 207 207 216;
    --light-gray-50: 191 191 201;
    --light-gray-60: 175 175 186;
    --light-gray-70: 159 159 173;
    --light-gray-80: 143 143 158;
    --light-gray-90: 128 128 143;
    --orange-5: 255 244 222;
    --orange-10: 255 213 178;
    --orange-20: 255 181 135;
    --orange-30: 255 162 102;
    --orange-40: 255 138 80;
    --orange-50: 255 113 57;
    --orange-60: 226 89 32;
    --orange-70: 204 61 0;
    --orange-80: 158 40 11;
    --orange-90: 124 21 4;
    --purple-5: 247 226 255;
    --purple-10: 246 184 255;
    --purple-20: 246 143 255;
    --purple-30: 247 112 255;
    --purple-40: 215 76 240;
    --purple-50: 184 51 225;
    --purple-60: 149 43 185;
    --purple-70: 114 34 145;
    --purple-80: 78 26 105;
    --purple-90: 43 17 65;
    --red-20: 255 154 162;
    --red-30: 255 132 139;
    --red-40: 255 106 117;
    --red-50: 255 79 94;
    --red-60: 226 40 80;
    --red-70: 197 0 66;
    --violet-5: 231 223 255;
    --violet-10: 217 191 255;
    --violet-20: 203 158 255;
    --violet-30: 198 137 255;
    --violet-40: 171 113 255;
    --violet-50: 144 89 255;
    --violet-60: 117 66 229;
    --violet-70: 89 42 203;
    --violet-80: 69 39 141;
    --violet-90: 50 28 100;
    --yellow-5: 255 255 204;
    --yellow-10: 255 255 152;
    --yellow-20: 255 234 128;
    --yellow-30: 255 213 103;
    --yellow-40: 255 189 79;
    --yellow-50: 255 164 54;
    --yellow-60: 226 127 46;
    --yellow-70: 196 90 39;
    --yellow-80: 167 52 31;
    --yellow-90: 150 14 24;

    /*
     * Reference gray: -light-gray-90, then calibrated with hsluv.org, where
     * the number is Luv.
     * 
     * */
    --gray-5: 16 16 22;
    --gray-10: 27 27 35;
    --gray-15: 37 37 47;
    --gray-20: 47 47 59;
    --gray-25: 58 58 72;
    --gray-30: 69 69 85;
    --gray-35: 81 81 98;
    --gray-40: 93 93 110;
    --gray-45: 105 105 121;
    --gray-50: 118 118 133;
    --gray-55: 131 131 145;
    --gray-60: 144 144 156;
    --gray-65: 157 157 168;
    --gray-70: 170 170 180;
    --gray-75: 184 184 192;
    --gray-80: 198 198 204;
    --gray-85: 212 212 217;
    --gray-90: 226 226 229;
    --gray-95: 240 240 242;
}

/*
 * Font size
 * 
 * */
:root {
    --font-size: 14px;
}

:root.mobile {
    --font-size: 16px;
}

/*
 * Color themes
 * 
 * Tool: hsluv.org
 * 
 * */
:root.h0 {
    --primary-color-30: 139  18  60; /* S:90 Luv:30 */
    --primary-color-40: 181  27  81; /* S:90 Luv:40 */
    --primary-color-50: 226  37 102; /* S:90 Luv:50 */
    --primary-color-60: 247  87 130; /* S:90 Luv:60 */
    --primary-color-70: 248 138 162; /* S:90 Luv:70 */
    --primary-color-70: 248 138 162; /* S:90 Luv:70 */
    --primary-color-80: 250 180 193; /* S:90 Luv:80 */
    }

:root.h45 {
    --primary-color-30:  98  63  17; /* S:90 Luv:30 */
    --primary-color-40: 130  85  25; /* S:90 Luv:40 */
    --primary-color-50: 162 107  34; /* S:90 Luv:50 */
    --primary-color-60: 196 131  43; /* S:90 Luv:60 */
    --primary-color-70: 232 155  53; /* S:90 Luv:70 */
    --primary-color-80: 251 185 123; /* S:90 Luv:80 */
    }

:root.h180 {
    --primary-color-30:  18  79  73; /* S:90 Luv:30 */
    --primary-color-40:  27 105  98; /* S:90 Luv:40 */
    --primary-color-50:  37 132 123; /* S:90 Luv:50 */
    --primary-color-60:  47 161 150; /* S:90 Luv:60 */
    --primary-color-70:  57 190 177; /* S:90 Luv:70 */
    --primary-color-80:  67 220 205; /* S:90 Luv:80 */
    }

:root.h225 {
    --primary-color-30:  20  77  95; /* S:90 Luv:30 */
    --primary-color-40:  29 102 125; /* S:90 Luv:40 */
    --primary-color-50:  39 128 157; /* S:90 Luv:50 */
    --primary-color-60:  50 156 190; /* S:90 Luv:60 */
    --primary-color-70:  60 184 224; /* S:90 Luv:70 */
    --primary-color-80: 110 211 250; /* S:90 Luv:80 */
    }

:root /* .h270 default */ {
    --primary-color-30:  72  31 194; /* S:90 Luv:30 */
    --primary-color-40:  96  56 234; /* S:90 Luv:40 */
    --primary-color-50: 120  95 240; /* S:90 Luv:50 */
    --primary-color-60: 146 128 244; /* S:90 Luv:60 */
    --primary-color-70: 172 160 247; /* S:90 Luv:70 */
    --primary-color-80: 199 192 250; /* S:90 Luv:80 */
    }

:root.h315 {
    --primary-color-10:  54   5  49; /* S:90 Luv:10 */
    --primary-color-30: 126  22 115; /* S:90 Luv:30 */
    --primary-color-40: 165  32 151; /* S:90 Luv:40 */
    --primary-color-50: 205  43 189; /* S:90 Luv:50 */
    --primary-color-60: 244  61 225; /* S:90 Luv:60 */
    --primary-color-70: 247 127 231; /* S:90 Luv:70 */
    --primary-color-80: 250 174 238; /* S:90 Luv:80 */
    }

/*
 * Components
 * 
 * */
:root {
    --font-size: 14px;

    --ubo-red: #800000;

    --elevation-up-surface: black;
    --elevation-up1-opacity: 4%;
    --elevation-up2-opacity: 8%;
    --elevation-down-surface: white;
    --elevation-down1-opacity: 16%;
    --elevation-down2-opacity: 32%;

    --ink-rgb: var(--ink-80);
    --ink-0: black;
    --ink-1: rgb(var(--ink-rgb));
    --ink-2: rgb(var(--ink-rgb) / 80%);
    --ink-3: rgb(var(--ink-rgb) / 60%);
    --ink-4: rgb(var(--ink-rgb) / 40%);

    --surface-0: white;
    --surface-1: rgb(var(--gray-95));
    --surface-2: rgb(var(--gray-90));
    --surface-3: rgb(var(--gray-80));
    --surface-4: rgb(var(--gray-75));

    --primary-surface-2: rgb(var(--primary-color-70) / 15%);

    --border-1: rgb(var(--gray-75));
    --border-2: rgb(var(--gray-70));
    --border-3: rgb(var(--gray-65));
    --border-4: rgb(var(--gray-60));

    --accent-ink-1: var(--surface-1);
    --accent-ink-3: var(--ink-1);
    --accent-surface-1: rgb(var(--primary-color-30));
    --accent-surface-2: rgb(var(--primary-color-50));
    --accent-surface-3: rgb(var(--primary-color-70));

    --link-ink: var(--accent-surface-1);

    --fieldset-header-surface: transparent;
    --fieldset-header-ink: var(--ink-2);

    --button-ink: var(--ink-1);
    --button-surface: var(--surface-3);
    --button-border-radius: 5px;
    --button-preferred-ink: var(--accent-ink-1);
    --button-preferred-surface: var(--accent-surface-1);
    --button-disabled-filter: opacity(50%);

    --checkbox-size: calc(var(--font-size) + 2px);
    --checkbox-ink: var(--ink-3);
    --checkbox-checked-ink: var(--accent-surface-1);
    --checkbox-disabled-filter: opacity(50%);

    --notice-ink: var(--accent-ink-1);
    --notice-surface: var(--accent-surface-1);
    --notice-surface-shadow: #000 0 2px 8px;

    --dashboard-bar-shadow:
        0px 0px 0px  1px rgb(var(--ink-rgb) /  4%),
        0px 1px 2px  0px rgb(var(--ink-rgb) /  4%),
        0px 2px 1px -1px rgb(var(--ink-rgb) / 12%),
        0px 1px 6px  0px rgb(var(--ink-rgb) / 12%);
    --dashboard-tab-ink: var(--ink-1);
    --dashboard-tab-active-ink: var(--accent-surface-1);
    --dashboard-tab-surface-hover: var(--surface-2);
    --dashboard-tab-border-hover: var(--surface-3);

    /* info levels: normal, fyi, warn, error -- we want same Luv */
    --info0-ink-rgb: 119 119 119; /* h:  0 S:  0 Luv:60 */
    --info1-ink-rgb:  72 143 255; /* h:255 S:100 Luv:60 */
    --info2-ink-rgb: 227 113   0; /* h: 30 S:100 Luv:60 */
    --info3-ink-rgb: 255  68 166; /* h:330 S:100 Luv:60 */
    --info0-ink: rgb(var(--info0-ink-rgb));
    --info1-ink: rgb(var(--info1-ink-rgb));
    --info2-ink: rgb(var(--info2-ink-rgb));
    --info3-ink: rgb(var(--info3-ink-rgb));

    /* popup panel */
    --popup-cell-surface: var(--surface-2);
    --popup-cell-label-filter: opacity(40%);
    --popup-cell-cname-ink: rgb(var(--blue-50));
    --popup-cell-allow-surface-rgb: 0 153 0;
    --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-surface-rgb));
    --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 35%);
    --popup-cell-noop-surface-rgb: 132 132 132;
    --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-surface-rgb));
    --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 35%);
    --popup-cell-block-surface-rgb: 255 40  40;
    --popup-cell-block-own-surface: rgb(var(--popup-cell-block-surface-rgb));
    --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 35%);
    --popup-cell-label-mixed-surface: #c29100;
    --popup-icon-x-ink: rgb(var(--red-60));
    --popup-power-ink-rgb: var(--primary-color-40);
    --popup-power-ink: rgb(var(--popup-power-ink-rgb));
    --popup-ruleset-tool-ink: var(--ink-1);
    --popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
    --popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
    --popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);

    /* horizontal line separator */
    --hr-ink: var(--surface-2);

    /* cloud widget */
    --cloud-total-used-surface: rgb(var(--violet-60) / 25%);
    --cloud-used-surface: rgb(var(--violet-60));

    /* codemirror */
    --cm-active-line: var(--surface-1);
    --cm-cursor: var(--ink-0);
    --cm-foldmarker-ink: rgb(var(--blue-40));
    --cm-gutter-border: var(--surface-1);
    --cm-gutter-ink: var(--ink-3);
    --cm-gutter-surface: var(--surface-2);
    --cm-matchingbracket: rgb(var(--green-30));
    --cm-merge-copy-ink: rgb(var(--blue-50));
    --cm-merge-l-chunk-border: rgb(var(--blue-5));
    --cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
    --cm-negative: #c00;
    --cm-positive: #080;
    --cm-selection-surface: #8cf4;
    --cm-selection-ink: var(--ink-1);
    --cm-searching-ink: inherit;
    --cm-searching-surface: rgb(var(--yellow-20) / 80%);
    --cm-search-match-surface: rgb(var(--yellow-40) / 50%);

    /* syntax highlight: static filtering */
    --sf-comment-ink: var(--ink-3);
    --sf-def-ink: rgb(var(--blue-50));
    --sf-directive-ink: var(--ink-1);
    --sf-error-ink: rgb(var(--red-60));
    --sf-error-surface: rgb(var(--red-60) / 10%);
    --sf-keyword-ink: rgb(var(--purple-60));
    --sf-notice-ink: var(--border-2);
    --sf-readonly-ink: var(--ink-3);
    --sf-tag-ink: rgb(var(--green-60));
    --sf-value-ink: rgb(var(--orange-70));
    --sf-variable-ink: var(--ink-1);
    --sf-warning-ink: rgb(var(--yellow-50));

    /* syntax highlight: dynamic filtering */
    --df-allow-ink: var(--cm-positive);
    --df-block-ink: var(--cm-negative);
    --df-noop-ink: rgb(var(--dark-gray-10));

    /* logger */
    --logger-allowed-surface: #00a00014;
    --logger-blocked-surface: #c0000014;
    --logger-modified-surface: #0000c010;
    --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
    --logger-blocked-em-surface: #c0000036;
    --logger-modified-em-surface: #0000c028;
    --logger-allowed-em-surface: #00a00036;
}

/*
 * Source for color-blind color scheme from https://github.com/WyohKnott:
 *   https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
 * 
 * */
:root.colorBlind {
    --popup-cell-allow-surface-rgb: 225 157 0;
    --popup-cell-block-surface-rgb: 14 55 255;
    --popup-cell-label-mixed-surface: #ff6a00;
}

/*
 * Default dark theme starts here
 * 
 * https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
 *   Assign a default background color if dark mode is enabled -- hopefully
 *   this will avoid flashes of white background until the document's own CSS
 *   overrides the default color value below.
 * 
 * */

/* https://material.io/design/color/dark-theme.html */
:root.dark {
    --elevation-down-surface: black;
    --elevation-down1-opacity: 16%;
    --elevation-down2-opacity: 32%;
    --elevation-up-surface: white;
    --elevation-up1-opacity: 12%;
    --elevation-up2-opacity: 24%;

    --ink-rgb: var(--gray-95);
    --ink-0: white;

    --surface-0: black;
    --surface-1: rgb(var(--gray-10));
    --surface-2: rgb(var(--gray-20));
    --surface-3: rgb(var(--gray-30));
    --surface-4: rgb(var(--gray-40));

    --border-1: rgb(var(--gray-35));
    --border-2: rgb(var(--gray-40));
    --border-3: rgb(var(--gray-45));
    --border-4: rgb(var(--gray-50));

    --accent-ink-1: rgb(var(--ink-80));
    --accent-surface-1: rgb(var(--primary-color-70));

    --accent-ink-1: var(--surface-1);
    --accent-ink-3: var(--ink-1);
    --accent-surface-1: rgb(var(--primary-color-70));
    --accent-surface-3: rgb(var(--primary-color-30));

    /* popup panel */
    --popup-cell-label-filter: opacity(40%);
    --popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
    --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 65%);
    --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 65%);
    --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 65%);
    --popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1);
    --popup-icon-x-ink: rgb(var(--red-50));
    --popup-power-ink-rgb: var(--primary-color-60);
    --popup-ruleset-tool-shadow: -surface-0;

    /* cloud widget */
    --cloud-total-used-surface: rgb(var(--violet-20) / 25%);
    --cloud-used-surface: rgb(var(--violet-20));

    /* codemirror */
    --cm-merge-copy-ink: rgb(var(--blue-30));
    --cm-foldmarker-ink: rgb(var(--blue-20));
    --cm-matchingbracket: rgb(var(--green-30) / 50%);
    --cm-merge-l-chunk-border: rgb(var(--blue-70));
    --cm-merge-l-chunk-surface: rgb(var(--blue-90));
    --cm-negative: #f44;
    --cm-positive: #0c0;
    --cm-searching-ink: var(--surface-0);
    --cm-searching-surface: rgb(var(--yellow-20));

    /* syntax highlight: static filtering */
    --sf-comment-ink: var(--ink-3);
    --sf-def-ink: rgb(var(--blue-20));
    --sf-error-ink: rgb(var(--red-40));
    --sf-error-surface: rgb(var(--red-40) / 40%);
    --sf-keyword-ink: rgb(var(--purple-10));
    --sf-notice-ink: var(--border-2);
    --sf-tag-ink: rgb(var(--green-50));
    --sf-value-ink: rgb(var(--orange-20));
    --sf-variable-ink: var(--ink-1);
    --sf-warning-ink: rgb(var(--yellow-50));

    /* syntax highlight: dynamic filtering */
    --df-noop-ink: var(--ink-3);

    /* logger */
    --logger-allowed-surface: #24a71960;
    --logger-blocked-surface: #ff4c2b60;
    --logger-modified-surface: #663efd60;
    --logger-redirected-surface: rgb(var(--yellow-5) / 40%);
}

:root.dark.colorBlind {
}

:root.classic:not(.dark) {
    --notice-ink: rgb(var(--ink-80));
    --notice-surface: rgb(var(--yellow-5));
    --popup-power-ink-rgb: 0 110 254;
    --popup-ruleset-tool-ink: var(--ink-1);
    --popup-ruleset-tool-surface: rgb(var(--yellow-5) / 50%);
    --popup-ruleset-tool-surface-hover: rgb(var(--yellow-5) / 75%);
    --popup-ruleset-tool-shadow: rgb(var(--gray-85));
}