/**
 * @file
 * Palette defaults and independent custom-color variables.
 */

body {
  --zp-surface: #f2efea;
  --zp-themed-surface: var(--zp-surface);
  --zp-section-surface: #fff;
  --zp-text: #333;
  --zp-primary: #005a84;
  --zp-primary-hover: #000;
  --zp-highlight-border: #ddd;
  --zp-menu-bg: #005a84;
  --zp-menu-color: #fff;
  --zp-menu-hover-bg: #407697;
  --zp-menu-hover-color: var(--zp-menu-color);
  --zp-menu-child-bg: var(--zp-menu-bg);
  --zp-menu-child-hover-bg: var(--zp-menu-hover-bg);
  --zp-menu-border-light: color-mix(in srgb, var(--zp-menu-bg), white 25%);
  --zp-menu-border-dark: color-mix(in srgb, var(--zp-menu-bg), black 18%);
  --zp-menu-shadow: 0 1px #000;
  --zp-toggle-bg: #f4f2ee;
  --zp-mobile-link: var(--zp-primary);
  --zp-mobile-hover-bg: var(--zp-toggle-bg);
  --zp-mobile-hover-color: #333;
  --zp-pager-bg: var(--zp-menu-bg);
  --zp-pager-color: #fff;
  --zp-top-gradient-height: 180px;
  --zp-section-gradient-height: 150px;
}

body.zp-style-grey {
  --zp-surface: #efefef;
  --zp-primary: #333;
  --zp-primary-hover: #666;
  --zp-highlight-border: #ddd;
  --zp-menu-bg: #666;
  --zp-menu-color: #fff;
  --zp-menu-hover-bg: #999;
  --zp-menu-hover-color: #444;
  --zp-menu-border-light: #7d7d7d;
  --zp-menu-border-dark: #525252;
  --zp-toggle-bg: #e6e6e6;
  --zp-mobile-link: #555;
  --zp-mobile-hover-bg: #e6e6e6;
  --zp-mobile-hover-color: #222;
  --zp-pager-bg: #555;
}

body.zp-style-sky {
  --zp-surface: #def;
  --zp-primary: #2f71a2;
  --zp-primary-hover: #000;
  --zp-highlight-border: #2f71a2;
  --zp-menu-bg: #2f71a2;
  --zp-menu-hover-bg: #408ec8;
  --zp-menu-border-light: #3c90bb;
  --zp-menu-border-dark: #176992;
  --zp-toggle-bg: #f4f2ee;
  --zp-mobile-link: #2f71a2;
  --zp-mobile-hover-bg: #f4f2ee;
  --zp-mobile-hover-color: #333;
  --zp-pager-bg: #2f71a2;
}

body.zp-style-nature {
  --zp-surface: #eff6d5;
  --zp-primary: #4f7f5b;
  --zp-primary-hover: #000;
  --zp-menu-bg: #4f7f5b;
  --zp-menu-hover-bg: #619c70;
  --zp-menu-border-light: #77aa84;
  --zp-menu-border-dark: #41674a;
  --zp-toggle-bg: #e6e6e6;
  --zp-mobile-link: #4f7f5b;
  --zp-mobile-hover-bg: #e6e6e6;
  --zp-pager-bg: #4f7f5b;
}

body.zp-style-ivy {
  --zp-surface: #fee8c4;
  --zp-primary: #5a7d4f;
  --zp-primary-hover: #000;
  --zp-menu-bg: #5a7d4f;
  --zp-menu-hover-bg: #6f9861;
  --zp-menu-border-light: #696;
  --zp-menu-border-dark: #4a6b40;
  --zp-menu-shadow: 1px 1px #000;
  --zp-mobile-link: #5a7d4f;
  --zp-mobile-hover-bg: #e6e6e6;
  --zp-pager-bg: #5a7d4f;
}

body.zp-style-ink {
  --zp-surface: #f2efea;
  --zp-primary: #005a84;
  --zp-primary-hover: #000;
  --zp-menu-bg: #005a84;
  --zp-menu-hover-bg: #407697;
  --zp-menu-border-light: #069;
  --zp-menu-border-dark: #004b64;
  --zp-toggle-bg: #f4f2ee;
  --zp-mobile-link: #005a84;
  --zp-mobile-hover-bg: #f4f2ee;
  --zp-mobile-hover-color: #333;
  --zp-pager-bg: #005a84;
}

body.zp-style-orange {
  --zp-surface: #fce69f;
  --zp-primary: #333;
  --zp-primary-hover: #df7702;
  --zp-menu-bg: #fa0;
  --zp-menu-color: #444;
  --zp-menu-hover-bg: #df7702;
  --zp-menu-border-light: #ffb92e;
  --zp-menu-border-dark: #e69900;
  --zp-mobile-link: #333;
  --zp-mobile-hover-bg: #fce69f;
  --zp-pager-bg: #fd8b0c;
  --zp-pager-color: #333;
}

body.zp-style-sangue {
  --zp-surface: #d8e0d8;
  --zp-primary: #900;
  --zp-primary-hover: #000;
  --zp-menu-bg: #900;
  --zp-menu-hover-bg: #ca0000;
  --zp-menu-child-bg: #ca0000;
  --zp-menu-child-hover-bg: #df0000;
  --zp-menu-border-light: #df0000;
  --zp-menu-border-dark: #900;
  --zp-menu-shadow: 1px 1px #000;
  --zp-toggle-bg: #e6e6e6;
  --zp-mobile-link: #900;
  --zp-mobile-hover-bg: #e6e6e6;
  --zp-pager-bg: #900;
}

body.zp-style-lime {
  --zp-surface: #ffd;
  --zp-primary: #5a7d4f;
  --zp-primary-hover: #535353;
  --zp-highlight-border: #5a7d4f;
  --zp-menu-bg: #5a7d4f;
  --zp-menu-hover-bg: #6f9861;
  --zp-menu-border-light: #638c57;
  --zp-menu-border-dark: #527049;
  --zp-toggle-bg: #ffd;
  --zp-mobile-link: #5a7d4f;
  --zp-mobile-hover-bg: #ffd;
  --zp-pager-bg: #5a7d4f;
  --zp-top-gradient-height: 200px;
  --zp-section-gradient-height: 180px;
}

body.zp-style-plum {
  --zp-surface: #d4c8d7;
  --zp-primary: #9d408d;
  --zp-primary-hover: #000;
  --zp-highlight-border: #000;
  --zp-menu-bg: #b7a4bc;
  --zp-menu-color: #000;
  --zp-menu-hover-bg: #d4c8d7;
  --zp-menu-border-light: #e1d9e3;
  --zp-menu-border-dark: #907297;
  --zp-menu-shadow: 0 1px #eee;
  --zp-toggle-bg: #f4f2ee;
  --zp-mobile-link: #9d408d;
  --zp-mobile-hover-bg: #f4f2ee;
  --zp-pager-bg: #b7a4bc;
  --zp-pager-color: #000;
}

body.zp-style-velvet {
  --zp-surface: #dfafb4;
  --zp-themed-surface: #ecd1d4;
  --zp-primary: #631f3a;
  --zp-primary-hover: #000;
  --zp-highlight-border: #631f3a;
  --zp-menu-bg: #a35061;
  --zp-menu-hover-bg: #8f3b4c;
  --zp-menu-border-light: #b56675;
  --zp-menu-border-dark: #964253;
  --zp-menu-shadow: 1px 1px #000;
  --zp-toggle-bg: #f2d3cc;
  --zp-mobile-link: #631f3a;
  --zp-mobile-hover-bg: #f2d3cc;
  --zp-pager-bg: #8f3b4c;
}

body.zp-style-clean {
  --zp-primary: #4f7f5b;
  --zp-primary-hover: #000;
  --zp-menu-bg: #f4f2ee;
  --zp-menu-color: #333;
  --zp-menu-hover-bg: #e6e6e6;
  --zp-menu-border-light: #fff;
  --zp-menu-border-dark: #ddd;
  --zp-menu-shadow: 0 1px #4f7f5b;
  --zp-mobile-link: #4f7f5b;
  --zp-mobile-hover-bg: #f4f2ee;
}

body.zp-style-clean-blue {
  --zp-primary: #2f71a2;
  --zp-primary-hover: #000;
  --zp-menu-bg: #f4f2ee;
  --zp-menu-color: #333;
  --zp-menu-hover-bg: #e6e6e6;
  --zp-menu-border-light: #fff;
  --zp-menu-border-dark: #ddd;
  --zp-menu-shadow: 0 1px #2f71a2;
  --zp-mobile-link: #2f71a2;
  --zp-mobile-hover-bg: #f4f2ee;
}

body.zp-style-custom {
  --zp-themed-surface: var(--zp-surface);
  --zp-menu-hover-color: var(--zp-menu-color);
  --zp-menu-child-bg: var(--zp-menu-bg);
  --zp-menu-child-hover-bg: var(--zp-menu-hover-bg);
  --zp-menu-border-light: color-mix(in srgb, var(--zp-menu-bg), white 25%);
  --zp-menu-border-dark: color-mix(in srgb, var(--zp-menu-bg), black 18%);
  --zp-toggle-bg: color-mix(in srgb, var(--zp-surface), white 35%);
  --zp-mobile-link: var(--zp-primary);
  --zp-mobile-hover-bg: var(--zp-toggle-bg);
  --zp-pager-bg: var(--zp-menu-bg);
}