/* 1. Generic variables.                                         *
 * Things like your color palette that you will reference later. */
/* a. Some named colors */
$off-black: #0a0a0a;

/* b. Background colors */
$body-bg-color: color("grey", "darken-4");
$accent-color: color("cyan", "darken-1");
$contrast-bg-color: color("grey", "darken-3");
$positive-color: color("green", "darken-1");
$yellow-alert-color: color("amber", "darken-3");
$red-alert-color: color("red", "darken-3");
$neutral-color: $body-bg-color;

/* c. Text colors */
$text-color: color("grey", "lighten-1");
$accent-text-color: $off-black;
$dim-text-color: color("grey", "darken-2");
$submit-message-color: color("red", "darken-3");
$neutral-text-color: $text-color;

/* 2. Window                                                     */
$font-family: "Roboto", "Arial", sans-serif;
$window-border-color: $off-black;
$font-size: 1.1rem;
$material-icon-default-size: 24px;

/* 3. Sidenav                                                    */
$sidenav-text-color: color("grey", "lighten-2");
$active-dropdown-color: $contrast-bg-color;
$current-sidenav-bg-color: $accent-color;
$current-sidenav-text-color: $accent-text-color;

/* 4. Tables                                                     */
$table-bg-color: color("grey", "darken-4");
$table-striped-color: $contrast-bg-color;
$data-table-border-color: darken($contrast-bg-color, 10%);

/* 5. Forms                                                      */
/* a. Buttons */
$button-color: $accent-color;
$button-text-color: $accent-text-color;
$button-font-size: 1.3rem;
// $save-prefs-btn-font-size: 1.3rem;
$button-side-padding: 1.5rem;
$button-top-bottom-padding: 0.3rem;
// $button-hover-color: color("cyan", "lighten-1");
$btn-no-accent-bg-color: $contrast-bg-color;
$btn-no-accent-text-color: $accent-color;

/* b. Text input */
$input-focus-color: $accent-color;

/* c. Range */
$range-track-color: $contrast-bg-color;
$range-border-color: $contrast-bg-color;
$range-thumb-color: $accent-color;
$range-track-height: 3px;
$range-thumb-height: 20px;
$range-thumb-width: $range-thumb-height;

/* d. Pickers */
$modal-main-bg-color: $body-bg-color;
$modal-display-bg-color: $accent-color;
$modal-clock-bg-color: $contrast-bg-color;
// $modal-btn-text-color: $accent-color;
$modal-warn-btn-text-color: $red-alert-color;

/* 6. Data                                                       */
$card-bg: $contrast-bg-color;
$card-text-color: $text-color;