/* Variables
/* ---------------------------------------------------------- */

:root {
  --color-background-main: #ffffff;
  --color-text-main: #1d1d1f;

  --accent-color: var(--ghost-accent-color, var(--color-text-main));

  --color-buttons-main-text: #fdfdfd;

  --color-buttons-secondary: #ededed;
  --color-buttons-secondary-text: #1d1d1f;
  --color-buttons-secondary-hover: #dddddd;

  --color-background-elements-main: #f1f1f2;
  --color-background-elements-main-hover: #ededed;

  --color-borders: #dddddd;

  --color-nav-link-hover: #8e8e8f;

  --color-dark-mode-slider: #fdfdfd;

  --color-text-light: #ffffff;
  --color-text-lighter: #777779;
  --color-text-tags: #616162;
  --color-text-meta: #a5a5a5;
  --color-text-post: #343435;
  --color-text-input: #1d1d1f;
  --color-text-tier-desc: #777779;

  --color-card-title-hover: #616162;

  --color-link: #8e8e8f;
  --color-link-hover: #616162;

  --color-background-text-blocks: #f6f6f6;

  --color-bookmark-border: #ededed;
  --color-footer-meta-separator: #bbbbbc;

  --color-audio-thumbnail-placeholder: #e4e4e4;

  --color-background-block-hover: #f4f4f4;

  --color-accent: var(--ghost-accent-color, #12c91e);

  --form-input-focus-color: #b7b7b7;

  --color-moody-black: #111017;
  --color-hyper-object-red: #d8173d;
}

/* Hero-Section, Header-Sections and Footer variables for color changing based on background color */
/* ---------------------------------------------------------- */

:root[data-color-scheme="light"].gh-color-section-font-dark {
  --font-color-hero: #1d1d1f;
  --font-color-footer-main: #1d1d1f;
  --font-color-footer-secondary: #5c5c5c;
  --font-color-foot-meta: #5c5c5c;
  --color-footer-border: #dadde2;
  --font-color-post-meta: #a5a5a5;
}

:root[data-color-scheme="light"].gh-color-section-font-light {
  --font-color-hero: #ededed;
  --font-color-footer-main: #ededed;
  --font-color-footer-secondary: #ecebeb;
  --font-color-foot-meta: #ededed;
  --color-footer-border: #dadde2;
  --font-color-post-meta: #a5a5a5;
}

:root[data-color-scheme="light"].gh-color-section-font-light.gh-html-white-background,
:root[data-color-scheme="light"].gh-color-section-font-dark.gh-html-white-background {
  --font-color-hero: #1d1d1f;
  --font-color-footer-main: #1d1d1f;
  --font-color-footer-secondary: #5c5c5c;
  --font-color-foot-meta: #8e8e8f;
  --color-footer-border: #dddddd;
  --font-color-post-meta: #a5a5a5;
}

:root[data-color-scheme="dark"].gh-color-section-font-light,
:root[data-color-scheme="dark"].gh-color-section-font-dark {
  --font-color-hero: #ededed;
  --font-color-footer-main: #ededed;
  --font-color-footer-secondary: #f1f0f0;
  --font-color-foot-meta: #ededed;
  --color-footer-border: #343435;
  --font-color-post-meta: #a5a5a5;
}

/* Dark Theme Variables */
/* ---------------------------------------------------------- */

:root[data-color-scheme="dark"] {
  --color-background-main: #1d1d1f;
  --color-text-main: #ededed;

  --accent-color: #ededed;

  --color-buttons-main-text: #f6f6f6;

  --color-buttons-secondary: #343435;
  --color-buttons-secondary-text: #f6f6f6;
  --color-buttons-secondary-hover: #29292a;

  --color-background-elements-main: #29292a;
  --color-background-elements-main-hover: #121214;

  --color-borders: #343435;

  --color-nav-link-hover: #777779;

  --color-dark-mode-slider: #4a4a4c;

  --color-text-light: #ffffff;
  --color-text-lighter: #8e8e8f;
  --color-text-tags: #bbbbbc;
  --color-text-meta: #a5a5a5;
  --color-text-post: #ededed;
  --color-text-input: #ededed;
  --color-text-tier-desc: #bbbbbc;

  --color-link: #8e8e8f;
  --color-link-hover: #616162;

  --color-card-title-hover: #bbbbbc;

  --color-background-text-blocks: #29292a;

  --color-bookmark-border: #343435;
  --color-footer-meta-separator: #bbbbbc;

  --color-audio-thumbnail-placeholder: #e4e4e4;

  --color-background-block-hover: #121214;

  --color-accent: var(--ghost-accent-color, #12c91e);

  --form-input-focus-color: #505050;
}
