/*  ######################################################################
    #----------------------  Theme-specific styles ----------------------#
    #                           Theme: base16                            #
    ###################################################################### */

/*  Color Palette
    (mapping of friendly names to colors, if needed) */
body.base16 {
  --black-darker-2: #0e0e0e;
  --black-darker: #131313;
  --black: #191919;
  --black-lighter: #282828;
  --black-lighter-2: #333333;
  --black-lighter-3: #434343;
  --black-lighter-4: #575757;

  --white: hsl(0, 0%, 97%);
  --comment-color: hsl(0, 0%, 45%);
  --red: hsl(2, 45%, 47%);
  --yellow: hsl(36, 88%, 75%);
  --green: hsl(75, 33%, 56%);
  --blue: hsl(195, 36%, 62%);
  --purple: hsl(314, 25%, 64%);
  --strong-purple: hsl(314, 25%, 45%);

  /* darkened syntax highlighting (highlights) */
  --dark-white: hsl(0, 0%, 0%);
  --dark-comment-color: hsl(0, 0%, 13%);
  --dark-red: hsl(2, 45%, 20%);
  --dark-yellow: hsl(36, 88%, 25%);
  --dark-green: hsl(75, 33%, 15%);
  --dark-blue: hsl(195, 36%, 25%);
  --dark-purple: hsl(314, 25%, 25%);
  --dark-strong-purple: hsl(314, 25%, 20%);
  --dark-strong-red: hsl(0, 100%, 20%);

  --err-red: #bf4040;
  --success-green: #88cc00;
  --failing-yellow: #ffcc66;

  --strong-red: #ff3333;
  --blue-lighter: #86C1B9;
}

body.base16 {

  /* Syntax Highlighting */
  --keyword:        var(--red);             /* keywords */
  --comments:       var(--comment-color);   /* comments */
  --booleans:       var(--purple);          /* booleans */
  --built-ins:      var(--blue);            /* built-ins */
  --function-names: var(--white);           /* function names */
  --types:          var(--blue);            /* types */
  --variables:      var(--white);           /* variables */
  --numbers:        var(--purple);          /* exact nums */
  --rough-nums:     var(--strong-purple);   /* rough nums */
  --rationals:      var(--purple);          /* rational numbers */
  --bad-numbers:    var(--strong-red);      /* bad numbers */
  --unterm-strings: var(--yellow);          /* unterminated strings */
  --strings:        var(--green);           /* strings */
  --repl-print:     var(--white);           /* result of print() in the REPL */
  --repl-output:    #e9e9e9;              /* values displayed in the REPL */

  /*  Non-color font styling. */
  --keyword-font-weight: bold;
  --bad-numbers-font-weight: bold;
  --unterm-strings-font-weight: bold;

  /* Basic editor appearance */
  --default-text: var(--white);   /* default text across editor */
  --background:   var(--black);   /* default bg color of definitions/interactions */
  --cursor:       var(--white);   /* cursor color */

  /* Regions/Selected Text */
  --selected-text:        var(--black-lighter-3);     /* selected text in editor */
  --matching-brackets:    var(--black-lighter-2);   /* brackets around check:...end regions, etc. */
  --matching-region-bg:   var(--black-lighter);     /* bg on regions like check:...end, etc. */
  --nonmatching-bg:       var(--black-lighter);     /* bg on span.CodeMirror-nonmatchingbracket-region */
  --nonmatching-bg-2:     var(--black-lighter);     /* bg and borders on nonmatchingbracket-region */
  --nonmatching-brackets: var(--strong-red);        /* brackets that form a nonmatching region */

  /* Check Blocks */
  --check-block-default-bg: var(--black-lighter-2);   /* default bg on check blocks (usually invisible) */
  --check-success-bg:       var(--black-lighter-2);   /* bg on passing check blocks */
  --check-fail-bg:          var(--black-lighter-2);   /* bg on failed check block */
  --check-error-bg:         var(--black-lighter-2);   /* bg (& box-shadow) on erroring check block */

  /* Tests within check blocks */
  --failing-test-header-bg:   var(--black-lighter);   /* bg of header within a focused failing test (contains "Test n: Failed") */
  --failing-test-bg:          var(--black-lighter);   /* bg of failing test NOT in focus */
  --passing-test-bg:          var(--black-lighter);   /* bg of passing test */
  --highlights-active-border: var(--blue-lighter);    /* border around errors/tests with highlights active */
  --highlights-active-bg:     var(--black-lighter);   /* bg on check block errors/tests with highlights active */
  --empty-check-err-bg:       rgba(255,255,255,0.4);  /* bg behind "Processing Result..." in check-block-error:empty */

  /* Errors */
  --err-dotted-border:      var(--err-red);         /* dotted border around compile/parse errors */
  --err-bg:                 var(--black);           /* bg on compile/parse errors */
  --err-link:               var(--blue-lighter);    /* links within compile/parse errors */
  --trace-err-bg:           var(--black);           /* bg on div.trace.error */
  --err-hover-shadow:       var(--blue-lighter);    /* box-shadow on hover on errors */
  --err-focused-shadow:     #737373;              /* box-shadow on errors in focus */
  --active-highlight-underline:  rgba(255, 255, 255, 0.5);    /* border below .highlight and .hinted-highlight */
  --inactive-highlight-underline: rgba(255, 255, 255, 0.5);   /* border below inactive highlights (darker) */
  --active-highlight-text:  black;                /* text color in a.highlight */
  --inactive-highlight-text: var(--white);          /* text color in a.highlight within non-highlighted blocks */

  /* Testing Summaries */
  --testing-summary:          var(--white);             /* text color in testing summary */
  --testing-summary-bg:       var(--black-lighter-2);   /* bg on testing summary */
  --summary-fail-bg:          var(--black-lighter);     /* bg of summary of failed tests */
  --summary-pass-bg:          var(--black-lighter);     /* bg of summary of passed tests */
  --summary-error-bg:         var(--err-red);           /* bg of announcement in summary that tests errored */
  --summary-err:              var(--white);             /* announcement text that tests errored in testing summary */
  --summary-err-left-border:  var(--white);             /* vertical border left of error announcement in summary */

  /* Tables */
  --table-border:       var(--black-lighter-3);    /* border on tables */
  --table-bg:           var(--black-lighter);      /* bg on tables */
  --table-even-rows-bg: var(--black-lighter-2);    /* bg on even rows in table */
  --th-bg:              var(--black-darker);       /* bg on table headers */
  --th-font-weight:     normal;                    /* font weight on table headers */
  --table-col-dividers: var(--black-lighter-3);    /* righthand borders separating table columns */
  --pyret-table-col-dividers: var(--black-lighter-3);  /* vertical borders between Pyret table columns */
  --pyret-table-row-dividers: var(--black-lighter-3);  /* horizontal borders between Pyret table row */

  /* Spy Blocks */
  --spy-borders:      var(--black-lighter-2);   /* borders on spy block */
  --spy-bg:           var(--black-darker);      /* bg on spy block */
  --spy-odd-rows-bg:  var(--black-lighter-2);   /* bg on odd table rows of spy block */
  --spy-even-rows-bg: var(--black-lighter);     /* bg on even table rows of spy block */

  /* Spotlights */
  --spotlighted-text-bg:            var(--black);             /* bg on spotlighted text (should match default bg) */
  --non-spotlight-bg:               var(--black-lighter-3);   /* bg on non-spotlighted elements during spotlight */
  --surrounding-check-spotlight-bg: var(--black-lighter-3);   /* bg on check block containing spotlighted test */

  /* Handle that adjusts interactions window size */
  --repl-handle-gradient-darker:  var(--black-lighter);     /* darker color in REPL handle gradient */
  --repl-handle-gradient-lighter: var(--black-lighter-2);   /* lighter color in REPL handle gradient */
  --repl-handle-border:           var(--black-darker-2);    /* border on REPL handle */

  /* CodeMirror snippets */
  --snippet-border:         var(--black-lighter-2);   /* dashed border around CodeMirror snippets */
  --snippet-header-bg:      var(--black-darker);      /* CodeMirror snippet header bg color */
  --snippet-header-border:  var(--black-lighter-2);   /* border between snippet header & code */
  --check-block-snippet-bg: var(--black);             /* bg of code snippets within check block tests */

  /* Misc. */
  --img-thumbnail-shadow:       var(--black-lighter-2);   /* box-shadow on hover over image thumbnail in REPL */
  --cm-in-repl-bg:              #202020;                /* bg on .repl .CodeMirror */
  --failed-test-gutter-marker:  var(--failing-yellow);    /* CodeMirror gutter marker bg for failed test */

  /* CodeMirror gutters/line numbers/ruler */
  --gutter-bg:      var(--black);           /* background of line number gutters */
  --gutter-border:  var(--black-lighter);   /* border between gutter & definitions window */
  --line-numbers:   var(--comment-color);   /* line numbers in left gutter */
  --line-ruler:     var(--red);             /* 100-char line ruler */

  /* REPL */
  --repl-text-output:   #e9e9e9;                /* text output in the REPL */
  --repl-prompts:       var(--white);             /* >>> prompt in the REPL */
  --loader-bg:          rgba(25, 25, 25, 0.5);  /* REPL background during page load */
  --loader-text:        var(--white);             /* text containing loading messages during page load */

  /* Scrollbars */
  --scrollbar-theme: dark;

  /* More granular control of check blocks */
  --check-success-text: var(--success-green);   /* text within successful check block */
  --check-fail-text:    var(--failing-yellow);  /* text within failing check block */
  --check-fail-header-font-weight: normal;      /* font weight of header text in failing check */
  --check-error-text:   var(--err-red);         /* text within erroring check block */
  --check-error-header-font-weight: normal;     /* font weight of header text in erroring check */
  --check-fail-border:  0.17em solid var(--failing-yellow);  /* border around failing check blocks */
  --check-error-border: 0.17em solid var(--err-red);         /* border around erroring check blocks */

  /* Testing summaries */
  --summary-pass-text: var(--success-green);  /* text saying "N TESTS FAILED" */
  --summary-fail-text: var(--failing-yellow); /* text saying "N TESTS PASSED" */

  /* darker syntax highlighting colors for text within error highlights */
  --dark-default-text:    var(--dark-white);
  --dark-comments:        var(--dark-comment-color); 
  --dark-booleans:        var(--dark-purple);
  --dark-built-ins:       var(--dark-blue);
  --dark-function-names:  var(--dark-white);
  --dark-variables:       var(--dark-white);
  --dark-keyword:         var(--dark-red);
  --dark-numbers:         var(--dark-purple);
  --dark-rough-nums:      var(--dark-strong-purple);
  --dark-bad-numbers:     var(--dark-strong-red);
  --dark-strings:         var(--dark-green);
  --dark-unterm-strings:  var(--dark-yellow);
  --dark-types:           var(--dark-blue);

}