/* Clier brand skin for vanilla-cookieconsent. Load AFTER cookieconsent.css.
   Structure/animation come from the library; this only maps colours, font and
   radii to the Clier design. Light = #cc-main, dark = .cc--darkmode #cc-main
   (the darkmode class is toggled from [data-theme] in cookie-config.js). */

#cc-main {
  --cc-font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 999px;

  --cc-bg: #fdfcfa;
  --cc-primary-color: #14130f;
  --cc-secondary-color: #57544c;
  --cc-separator-border-color: #e4e0d6;
  --cc-link-color: #1f2bcf;

  --cc-btn-primary-bg: #14130f;
  --cc-btn-primary-color: #f6f5f1;
  --cc-btn-primary-border-color: #14130f;
  --cc-btn-primary-hover-bg: #000000;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #000000;

  --cc-btn-secondary-bg: #efece4;
  --cc-btn-secondary-color: #14130f;
  --cc-btn-secondary-border-color: #efece4;
  --cc-btn-secondary-hover-bg: #e4e0d6;
  --cc-btn-secondary-hover-color: #14130f;
  --cc-btn-secondary-hover-border-color: #e4e0d6;

  --cc-toggle-readonly-bg: #d8d3c8;
  --cc-cookie-category-block-bg: #f4f2ec;
  --cc-cookie-category-block-bg-hover: #efece4;
}

.cc--darkmode #cc-main {
  --cc-bg: #212120;
  --cc-primary-color: #f2f0ea;
  --cc-secondary-color: #a8a49a;
  --cc-separator-border-color: #33322e;
  --cc-link-color: #7d8bff;

  --cc-btn-primary-bg: #f2f0ea;
  --cc-btn-primary-color: #191917;
  --cc-btn-primary-border-color: #f2f0ea;
  --cc-btn-primary-hover-bg: #ffffff;
  --cc-btn-primary-hover-color: #191917;
  --cc-btn-primary-hover-border-color: #ffffff;

  --cc-btn-secondary-bg: #2b2a27;
  --cc-btn-secondary-color: #f2f0ea;
  --cc-btn-secondary-border-color: #2b2a27;
  --cc-btn-secondary-hover-bg: #33322e;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #33322e;

  --cc-toggle-readonly-bg: #3a3833;
  --cc-cookie-category-block-bg: #1a1a18;
  --cc-cookie-category-block-bg-hover: #201f1d;
}
