/*!
* Dark mode of the theme 
* Theme Name: technocrat 
* Description: Main darkmode styles for Technocrat theme
* Author: kodx.dev
* Version: 1.6.3
*/

/*
 
 8888b.     db    88""Yb 88  dP     8b    d8  dP"Yb  8888b.  888888      dP"Yb  88b 88 88     Yb  dP 
  8I  Yb   dPYb   88__dP 88odP      88b  d88 dP   Yb  8I  Yb 88__       dP   Yb 88Yb88 88      YbdP  
  8I  dY  dP__Yb  88"Yb  88"Yb      88YbdP88 Yb   dP  8I  dY 88""       Yb   dP 88 Y88 88  .o   8P   
 8888Y"  dP""""Yb 88  Yb 88  Yb     88 YY 88  YbodP  8888Y"  888888      YbodP  88  Y8 88ood8  dP    
 
*/

/* This edits dark mode of main theme, for woocommerce dark mode see /css/darkwoocommerce.css */

:root.darkmode {
  /* ==================== */
  /* Core Color Tokens    */
  /* ==================== */
  --color-primary: #6ead00; /* Accent/actions, links, title link hovercolor button hovercolor #6ead00*/
  --color-secondary: #f1f1f1; /* High contrast used for buttons, hover and current menu text links, article title links*/

  /* Text */
  --color-text-base: #f1f1f1; /* Primary text */
  --color-text-muted: #a39f9f; /* Secondary text , used for main menu links*/
  --color-pure: #101010; /* Added for rich black */

  /* Backgrounds */
  --color-background-main: #1a1a1b; /* background color for entire cotent area of main site. */
  --color-background-alt: #202123; /* Secondary surfaces border, dividers, dropdown menu background over widget li backgrounds */
  --body-bg-color: #101010; /* Body background color */

  --color-highlight: #1f1f1f; /* Dropdowns, soft lines dropdown menu border*/
  --color-highlight-vivid: #191919; /* Used for hover on main menu, sub menu background color, and widget li background color */
  --color-highlight-soft: #202123; /* Table TDs */
  --color-accent: #6ead00; /* Accents like price discounts etc in woocommerce */
  --body-font-weight: 300;

  /** invert image of social media */
  --img-invert-on: invert(100%);
  --img-invert-off: invert(0%);
}

/* Remove browser-default focus styles */
textarea:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/** on desktop size */

.social-media img {
  filter: var(--img-invert-on);
}

.social-media a:hover img {
  filter: var(--img-invert-off);
}

@media only screen and (max-width: 1024px) {
  .social-media img {
    filter: var(--img-invert-off) !important;
  }

  .social-media a:hover img {
    filter: var(--img-invert-on);
  }
}

@media only screen and (max-width: 688px) {
  .social-media img {
    filter: var(--img-invert-off);
  }

  .social-media a:hover img {
    filter: var(--img-invert-on);
  }
}