/* -----------------------------------------
   UKIAH DARK COLOR THEME
----------------------------------------- */

:root {
  color-scheme: dark;

  /* Highlight */
  --color-p1: #56bfec;
  --color-p1-dark: #349ed1;
  --color-p1-darker: #007fb5;
  --color-p1-darkest: #006590;
  --color-p1-light: #a5ddf5;
  --color-p1-lighter: #dbf1fb;
  --color-p1-lightest: #f4fbfe;

  /* Primary */
  --color-p2: #001c29;
  --color-p2-dark: #00151f;
  --color-p2-darker: #000e14;
  --color-p2-darkest: #000;
  --color-p2-light: #002334;
  --color-p2-lighter: #003248;
  --color-p2-lightest: #00405d;

  /* Standout */
  --color-p3: #002939;
  --color-p3-dark: #001d29;
  --color-p3-darker: #00111a;
  --color-p3-darkest: #000a0f;
  --color-p3-light: #003447;
  --color-p3-lighter: #004057;
  --color-p3-lightest: #004b66;

  /* Secondary 1 */
  --color-s1: #014a72;
  --color-s1-darker: #00344b;
  --color-s1-lighter: #005e87;

  /* Secondary 2 */
  --color-s2: #003d59;
  --color-s2-dark: #002b3f;
  --color-s2-darker: #001925;

  /* Secondary 3 */
  --color-s3: #003248;
  --color-s3-dark: #002334;
  --color-s3-light: #00405d;
  --color-s3-lighter: #004e72;

  /* gray */
  --gray-50: #f7fafe;
  --gray-75: #eef3f9;
  --gray-100: #e7eef6;
  --gray-200: #c9d5e5;
  --gray-300: #aebdd1;
  --gray-400: #95a6bb;
  --gray-500: #7a8c9f;
  --gray-600: #657689;
  --gray-700: #546374;
  --gray-800: #444f5d;
  --gray-900: #36404b;

  /* dark theme unique variables */
  --color-primary: var(--color-p1);
  --color-primary-dark: var(--color-p1-darker);
  --color-primary-light: var(--color-p1-lighter);
  --color-standout: var(--gray-100);
  --text-accent-s1: var(--color-p1-dark);
  --text-accent-s2: var(--color-p1);
  --text-accent-s3: var(--color-p1-light);
  --text-highlight-primary: var(--color-p1);

  /* Accent colors */
  --code-color: #eb5c9c;
  --color-a1: #5aaae7;
  --color-a2: #3ab5f8;
  --color-a3: #31afa0;
  --color-a4: #42af3c;
  --color-a5: #ac92ce;
  --color-a6: #d274dc;
  --color-a7: #e48c81;
  --color-a8: #f17827;

  /* social media brand colors */
  --share-facebook: var(--gray-200);
  --share-facebook-hover: color-mix(in srgb, var(--share-facebook), #000 15%);
  --share-twitter: var(--gray-200);
  --share-twitter-hover: color-mix(in srgb, var(--share-twitter), #000 15%);
  --share-googleplus: var(--gray-200);
  --share-googleplus-hover: color-mix(
    in srgb,
    var(--share-googleplus),
    #000 15%
  );
  --share-flickr: var(--gray-200);
  --share-linkedin: var(--gray-200);
  --share-instagram: var(--gray-200);
  --share-snapchat: var(--gray-200);
  --share-youtube: var(--gray-200);
  --share-pinterest: var(--gray-200);
  --share-vimeo: var(--gray-200);
  --share-email: var(--gray-200);
  --share-github: var(--gray-200);

  /* Override semantic variables (which affects side-nav and more) */
  --body-bg: var(--color-p2-darker);
  --base-light: var(--black);
  --base-dark: var(--white);
  --default-bg: var(--color-p3);
  --default-bg-darker: var(--color-p3-light);
  --default-bg-hover: var(--color-p3-light);
  --default-bg-hover-darker: var(--color-p3-lighter);
  --text-color: #fafafa;
  --text-color-hover: #fff;
  --text-muted: #bababa;
  --text-secondary: #d1d1d1;
  --blockquote-small-color: #ededef;
  --link-color: var(--color-p1, #ffb300);
  --link-color-hover: var(--color-p1-lighter, #fbde84);
  --dark-section-link-color: var(--color-p1);
  --dark-section-link-color-hover: var(--color-p1-lighter);
  --outline-default-color: #85cbf9;
  --outline-dark-mode-color: #0b8ee5;
  --ca-gov-logo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8192 4563'><path fill='%23ffffff' d='M7850 3454l-4 2c-6-125-108-382-197-463 39-115-15-173-46-212-18-23-79-39-106-49-97-147-304-280-593-365-188-55-410-91-661-96-11 0-24-1-37-1-25 0-53 1-84 3-230 13-583 64-665 64h-7c-35-2-120-40-221-79-119-47-257-98-360-98 0 0-21 0-31 2-97 12-324 157-409 203-58 32-335 150-345 153-133 45-227 197-267 223-4-16-54-86-125-86s-17 1-25 3c-86 36-80 99-80 130-17-7-42-38-89-37s-37 4-59 14c-95 51-44 134-66 163-34 45-146 157-188 234-18 32 2 115-12 148-37 91-238 251-256 288-7 17 47 71 114 123 61 48 82 79 175 104s385-51 443-57h1c17 0 47 11 86 21 34 9 75 17 121 17s26 0 39-2c60-13 100-40 133-73 54-55 86-125 148-152 47-21 108-37 161-37s50 4 70 13c-99 177-77 414-112 448-39 37-69 76-92 113-85 130-97 248-137 276-11 8-26 10-42 10-46 0-109-22-154-22s-20 1-29 4c-53 19-176 133-131 160 14 1 216 1 428 1h184c6 0 118-103 124-103h299c28-4 25-49 154-115 146-57 76-339 263-554 2 0 57-52 70-52 65 0 174 118 566 118s487-135 541-135 81 41 81 54c-175 298 266 632 230 653-1 1-3 1-4 1-15 0-58-24-122-24s-55 4-87 15c-72 24-129 114-74 141 15 0 190 1 364 1s194 0 263-1c22-3 20-45 19-86-1-27-1-53 5-68 18-24 35-108 81-167 46-50 81-89 119-89s31 7 47 21c83 45 282 70 395 111 47 17 80 36 82 62-2 14-13 18-29 18s-15-1-23-2c-28-4-64-13-99-13s-36 3-52 9c-51 19-103 75-118 116-8 22-5 40 16 45h470c54 0 34-108 154-348 18-68-151-160-175-288-16-84-32-250-34-412l3-1 1-1hZ'/><path fill='%23ffffff' d='M5362 193h774l711 1843c-187-43-388-67-598-72h-44c-30 0-61 1-90 3h-10c-13 1-26 2-39 3l-312-807-327 846c-9-4-18-8-27-11-19-8-39-16-59-24-156-62-269-113-422-121-153-7-208 25-208 25l651-1685ZM2279 4542c478 0 838-95 1157-264l69-174c-113 17-258 49-374 21s-180-75-289-161c-42-33-109-87-161-159-120 28-248 43-389 43-924 0-1569-643-1569-1563s681-1568 1550-1550c476 10 919 194 1318 593l283-718C3432 236 2874 30 2292 30S1107 249 685 646C246 1058 4 1639 4 2281c0 1332 936 2262 2275 2262v-1h0Z'/></svg>")
    no-repeat;
  --text-field-bg-color: var(--body-bg);
  --text-field-color: var(--text-color);
  --brand-danger: #ff757c;
  --brand-info: #3da5e1;
  --brand-success: #43b33d;
  --brand-primary-darker: var(--color-p1-lighter);

  /* utility header */
  --utility-link: var(--white);
  --utility-link-hover: var(--text-color);
  --utility-header-background: var(--color-p3);

  /* Megamenu sub navigation background */
  --sub-nav-bg: var(--color-s1-lighter);

  /* Mobile navigation drawer */
  --mobile-drawer: var(--color-p3);
  --mobile-drawer-active: var(--color-p3-light);
  --bs-body-bg: var(--body-bg);

  /* Target custom side-nav variables that have no semantic mapping */
  --sidenav-active-bg: var(--color-s1);
  --sidenav-active-color: var(--color-p1-lighter);
  --sidenav-hover-bg: var(--color-p2);
  --sidenav-active-hover-bg: var(--color-s1-darker);
  --sidenav-active-hover-color: var(--color-p1-light);
  --border-color-muted: var(--gray-800);
  --border-color-default: var(--gray-600);

  /* Custom form check SVG icons for dark mode */
  --cagov-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --cagov-form-radio-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
  --cagov-form-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  --cagov-form-select-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path fill='%23fff' d='M17.087 10.35l-4.337 4.336-4.337-4.336c-0.293-0.293-0.768-0.293-1.060 0s-0.293 0.768 0 1.060l4.864 4.864c0.147 0.147 0.341 0.221 0.533 0.219 0.194 0 0.386-0.072 0.533-0.219l4.865-4.864c0.293-0.293 0.293-0.768 0-1.060s-0.768-0.293-1.061 0z'/></svg>");

  /* Main navigation */
  --mobile-menu-icon-color: var(--text-color);
  --main-nav-color: var(--text-color);
  --main-nav-color-hover: var(--text-color);
  --main-nav-bg: var(--color-p2);
  --main-nav-bg-hover: var(--color-p2-light);
  --main-nav-border-color: var(--color-p2-darker);
  --main-nav-color-active: var(--text-color);
  --main-nav-color-active-hover: var(--text-color);
  --main-nav-bg-active: var(--color-p2-light);
  --main-nav-bg-active-hover: var(--color-p2-lighter);

  /* global footer */
  --global-footer-bg: var(--color-p3-dark);
  --footer-links-color: var(--white);
  --footer-links-color-hover: var(--color-p1);

  /* BUTTONS */

  /* Primary Button */
  --primary-btn-color: var(--gray-800);
  --primary-btn-bg: var(--white);
  --primary-btn-border-color: var(--white);
  --primary-btn-color-hover: var(--black);
  --primary-btn-bg-hover: var(--gray-200);
  --primary-btn-border-color-hover: var(--gray-200);
  --primary-btn-color-disabled: var(--gray-700);
  --btn-hover-primary-bg: var(--white);
  --btn-hover-primary-overlay: var(--gray-100);
  --outline-primary-btn: var(--black);

  /* Primary Outline Button */
  --primary-outline-btn-color: var(--white);
  --primary-outline-btn-bg: var(--body-bg);
  --primary-outline-btn-border-color: var(--white);
  --primary-outline-btn-color-hover: var(--black);
  --primary-outline-btn-bg-hover: var(--white);
  --primary-outline-btn-border-color-hover: var(--white);
  --primary-outline-btn-color-disabled: var(--gray-200);
  --outline-primary-outline-btn: var(--outline-for-light-bg);

  /* Default Button */
  --default-btn-color: var(--text-color);
  --default-btn-bg: var(--color-p3);
  --default-btn-border-color: var(--gray-200);
  --default-btn-color-hover: var(--white);
  --default-btn-bg-hover: var(--color-p3-lightest);
  --default-btn-border-color-hover: var(--white);
  --btn-hover-default-bg: var(--color-p3);
  --btn-hover-default-overlay: var(--color-p3-darkest);
  --outline-default-btn: var(--outline-for-dark-bg);

  /* Standout Button */
  --standout-btn-color: var(--black);
  --standout-btn-bg: var(--gray-200);
  --standout-btn-border-color: var(--gray-200);
  --standout-btn-color-hover: var(--gray-700);
  --standout-btn-bg-hover: var(--white);
  --standout-btn-border-color-hover: var(--white);
  --btn-hover-standout-bg: var(--gray-200);
  --btn-hover-standout-overlay: var(--white);
  --outline-standout-btn: var(--outline-for-light-bg);

  /* Standout Outline Button */
  --standout-outline-btn-color: var(--gray-75);
  --standout-outline-btn-bg: transparent;
  --standout-outline-btn-border-color: var(--gray-75);
  --standout-outline-btn-color-hover: var(--black);
  --standout-outline-btn-bg-hover: var(--gray-75);
  --standout-outline-btn-border-color-hover: var(--gray-75);
  --outline-standout-outline-btn: var(--outline-dark-mode-color);

  /* Highlight Button */
  --highlight-btn-color: var(--gray-900);
  --highlight-btn-bg: var(--color-p1);
  --highlight-btn-border-color: var(--color-p1);
  --highlight-btn-color-hover: var(--black);
  --highlight-btn-bg-hover: var(--white);
  --highlight-btn-border-color-hover: var(--white);
  --highlight-btn-color-disabled: var(--gray-900);
  --btn-hover-highlight-bg: var(--color-p1);
  --btn-hover-highlight-overlay: var(--white);
  --outline-highlight-btn: var(--outline-for-light-bg);

  /* Highlight Outline Button */
  --highlight-outline-btn-color: var(--color-p1);
  --highlight-outline-btn-bg: transparent;
  --highlight-outline-btn-border-color: var(--color-p1);
  --highlight-outline-btn-color-hover: var(--black);
  --highlight-outline-btn-bg-hover: var(--color-p1);
  --highlight-outline-btn-border-color-hover: var(--color-p1);
  --highlight-outline-btn-color-disabled: var(--color-p1);
  --outline-highlight-outline-btn: var(--outline-dark-mode-color);

  /* Secondary Button */
  --secondary-btn-color: var(--text-color);
  --secondary-btn-bg: var(--color-s1);
  --secondary-btn-border-color: var(--color-s1);
  --secondary-btn-color-hover: var(--white);
  --secondary-btn-bg-hover: var(--color-s1-lighter);
  --secondary-btn-border-color-hover: var(--color-s1-lighter);
  --btn-hover-secondary-bg: var(--color-s1);
  --btn-hover-secondary-overlay: var(--color-s1-darker);
  --outline-secondary-btn: var(--outline-for-dark-bg);

  /* Secondary Outline Button */
  --secondary-outline-btn-color: var(--gray-100);
  --secondary-outline-btn-bg: transparent;
  --secondary-outline-btn-border-color: var(--gray-300);
  --secondary-outline-btn-color-hover: var(--white);
  --secondary-outline-btn-bg-hover: var(--color-s1);
  --secondary-outline-btn-border-color-hover: var(--gray-300);
  --outline-secondary-outline-btn: var(--outline-for-dark-bg);

  /* S1 Button */
  --s1-btn-color: var(--text-color);
  --s1-btn-bg: var(--color-s2);
  --s1-btn-border-color: var(--color-s2);
  --s1-btn-color-hover: var(--white);
  --s1-btn-bg-hover: var(--color-s2-dark);
  --s1-btn-border-color-hover: var(--color-s2-dark);
  --outline-s1-btn: var(--outline-dark-mode-color);

  /* Light Outline Button */
  --light-outline-btn-color: var(--white);
  --light-outline-btn-bg: transparent;
  --light-outline-btn-border-color: var(--white);
  --light-outline-btn-color-hover: var(--black);
  --light-outline-btn-bg-hover: var(--white);
  --light-outline-btn-border-color-hover: var(--white);
  --outline-light-outline-btn: var(--outline-dark-mode-color);

  /* Link Grid */
  --link-grid-color: var(--white);
  --link-grid-hover-bg: var(--color-p2-light);
  --link-grid-hover-color: var(--white);
  --link-grid-border-bottom-color: var(--color-p1);

  /* cards */
  --card-bg: var(--color-p3);
}