/* Nook Look file: _variables.css */
/*
* Nook look based on Thames but without civicrm.css
*/

:root {
  /* 2026 palette */
  --nook-blue-darkest: #031528;
  --nook-blue-dark: #024B8A;
  --nook-blue-mid: #0058A7;
  --nook-blue-icons: #006FCE;
  --nook-blue-lightest: #EFF7FF;
  --nook-blue-overlay: color-mix(in srgb, var(--nook-blue-lightest), transparent 50%);

  --nook-grey: #525761;

  --nook-grey-light: #F9F7F7;
  --nook-grey-mid: #E0E3E2;
  --nook-grey-dark: #D2D2D2;
  --nook-grey-extra-dark: #BBB;

  --nook-green: #32BD46;
  --nook-green-light: #57D169;
  --nook-cream: #FFF9F3;
  --nook-orange: #FED2AA;
  --nook-red: #F34360;

  --nook-white: #FFFFFF;
  --nook-white-tint: #FAFAFA;
  --nook-white-tint2: #FDFDFD;

  --nook-c-urgency-none: var(--nook-grey-mid);
  --nook-c-urgency-low: var(--nook-green);
  --nook-c-urgency-medium: var(--nook-orange);
  --nook-c-urgency-high: var(--nook-red);

  --nook-icon-color: inherit;

/* COLOUR NAMES */
  --crm-c-darkest: #0a0a0a;
  --crm-c-gray-900: #2f2f2e;
  --crm-c-gray-800: #3e3e3e;
  --crm-c-gray-700: #696969;
  --crm-c-gray-600: #828388;
  --crm-c-gray-500: #919297;
  --crm-c-gray-400: #adaeb3;
  --crm-c-gray-300: #c2c0c0;
  --crm-c-gray-200: #d5d5d5;
  --crm-c-gray-100: #e2e1e1;
  --crm-c-gray-050: #f8f8f8;
  --crm-c-gray-025: #fcfbfb;
  --crm-c-blue-overlay2: color-mix(in srgb, var(--nook-grey-mid), var(--nook-blue-lightest) 10%);
  --crm-c-blue-overlay: color-mix(in srgb, var(--nook-grey-light), var(--nook-blue-lightest) 10%);
  --crm-c-blue-light: var(--nook-blue-lightest);
  --crm-c-blue: var(--nook-blue-mid);
  --crm-c-blue-dark: var(--nook-blue-dark);
  --crm-c-blue-darker: color-mix(in srgb, var(--crm-c-blue-dark), black 5%);
  --crm-c-purple: #4d4d69;
  --crm-c-purple-dark: #3e3e54;
  --crm-c-green: #d6e9c6;
  --crm-c-green-light: #dff0d8;
  --crm-c-green-dark: var(--nook-green);
  --crm-c-red: var(--nook-red);
  --crm-c-red-light: #f2dede;
  --crm-c-red-dark: #740f0f; /* thames */
  --crm-c-amber: var(--nook-orange);
  --crm-c-yellow: #fcfc5a; /* thames todo change this horrible yellow! */
  --crm-c-yellow-light: #f2deb9;
  --crm-c-yellow-less-light: #fffdb2;
  --crm-c-teal: #63c4b9;
  --crm-c-dark-teal: #3e8079;
/* PRACTICAL COLOURS */
  --crm-c-page-background: #f3f2ed; /* background to page body */ /* thames */
  --crm-c-drag-background: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
  --crm-c-code-background: var(--crm-c-blue-overlay2); /* background for code regions */
  --crm-focus-color: var(--crm-c-blue-dark);
  --crm-inactive-color: #696969;
  /* Emphasis colours */
  --crm-success-color: var(--crm-c-green-dark);
  --crm-c-success-text: var(--crm-text-light-color);
  --crm-danger-color: var(--crm-c-red);
  --crm-c-danger-text: var(--crm-text-light-color);
  --crm-warning-color: var(--crm-c-amber); /* bg on .btn-warning, .label-warming but border on notification .alert */
  --crm-warning-text-color: var(--crm-text-color);
  --crm-info-color: var(--crm-c-blue-dark);
  --crm-info-text-color: var(--crm-text-light-color);
/* thames only radii */
  --crm-r-5: 0.8rem;
  --crm-r-3: 0.4rem;
  --crm-r-2: 0.25em;
  --crm-r-1: 3px;
/* SHADOWS */
  --crm-shadow-block: unset;
  --crm-shadow-popup: 3px 3px 18px 0 rgba(0, 0, 0,.25); /* thames */
  --crm-shadow-bottom: unset;  /* thames */
  --crm-body-inset: unset;
/* SIZES - temporary */
  --crm-l-radius: 0; /* thames - this gets applied in too many places; so setting to 0 and positively re-applying, rather than using this and negatively unapplying. */
  --crm-l-xsmall: 0.1rem;
  --crm-l-xsmall-1: 0.125rem;
  --crm-l-xsmall-2: 0.15rem;
  --crm-l-small: 0.25rem;
  --crm-l-small-1: 0.275rem;
  --crm-l-small-2: 0.325rem;
  --crm-l-small-3: 0.375rem;
  --crm-l-medium: 0.5rem;
  --crm-l-medium-1: 0.625rem;
  --crm-l-medium-2: 0.75rem;
  --crm-l-medium-3: 0.875rem;
  --crm-l-reg: 1rem;
  --crm-l-reg-1: 1.125rem;
  --crm-l-reg-2: 1.25rem;
  --crm-l-reg-3: 1.375rem;
  --crm-l-reg-4: 1.5rem;
  --crm-l-large: 2rem;
  --crm-l-large-1: 3rem;
  --crm-l-large-2: 4rem;
  --crm-input-width: 15em;
  --crm-input-large-width: 25em;
  --crm-padding-reg: var(--crm-l-reg);
  --crm-padding-small: var(--crm-l-small);
  --crm-padding-inset: var(--crm-l-medium);
/* thames: on standalone the following is overridden in cms.css */
  --crm-page-padding: clamp(0.5rem 2vw 4rem); /* Margin left/right */ /* thames */
  --crm-page-width: 100%; /* Default that CMS can overwrite */
/* Type */
  --crm-font-size: var(--crm-l-reg);
  --crm-font-small-size: var(--crm-l-medium-2);
  --crm-font-line-height: 1.5;
  --crm-link-decoration: none;
  --crm-link-decoration-hover: underline;
  --crm-heading-bg-color: unset;
  --crm-heading-color: var(--crm-text-color);
  --crm-heading-padding: var(--crm-l-small-1) var(--crm-l-medium-1); /* thames unset this? todo */
  --crm-heading-margin: var(--crm-l-medium) 0;
  --crm-heading-radius: var(--crm-l-radius);
/* Mouse events */
  --crm-link-hover-cursor: pointer;
/* Buttons */
  --crm-btn-box-shadow: none;
  --crm-btn-border: 0 solid transparent;
  --crm-btn-txt-transform: inherit;
  --crm-btn-padding-block: var(--crm-l-small); /* padding for top and bottom, one value */ /* thames */
  --crm-btn-padding-inline: var(--crm-l-medium-2); /* padding for left and right, one value */ /* thames */
  --crm-btn-small-padding: var(--crm-l-xsmall) var(--crm-l-small);
  --crm-btn-large-padding: var(--crm-l-medium) var(--crm-l-reg);
  --crm-btn-align: center;
  --crm-btn-height: 1.825rem; /* thames */
  --crm-btn-icon-spacing: var(--crm-l-xsmall-2); /* thames */
  --crm-btn-icon-size: auto;
  --crm-btn-margin: var(--crm-l-medium) 0;
  --crm-btn-icon-border: none;
  --crm-btn-icon-bg-color: transparent;
  --crm-btn-icon-spacing: 0.25rem;
  --crm-btn-radius: 0.25rem;
/* Tables */
  --crm-table-background: var(--crm-c-page-background);
  --crm-table-row-border: var(--crm-border);
  --crm-table-column-border: 0 solid transparent;
  --crm-table-font-size: var(--crm-font-size);
  --crm-table-padding: var(--crm-l-medium);
  --crm-table-header-border: 1px solid transparent;
  --crm-table-header-bottom: 2px solid var(--crm-c-gray-300);
  --crm-table-header-bg-color: var(--nook-blue-mid);
  --crm-table-header-txt: inherit;
  --crm-table-sort-float: left; /* 'left', 'right' or 'none' */
  --crm-table-sort-active-color: var(--nook-white);
  --crm-table-compressed-width: auto;
  --crm-table-nested-padding: var(--crm-l-reg) var(--crm-l-medium);
  --crm-table-nested-head-border: 0 solid transparent;
  --crm-table-nested-border: var(--crm-border);

  --crm-table-row-bg-color: var(--nook-grey-light);
  --crm-table-row-alternate-bg-color: var(--nook-white);
  --crm-table-row-alternate-hover-color: var(--nook-blue-overlay);
  --crm-table-row-hover-color: var(--nook-blue-overlay);

  --crm-table-row-border: 1px solid var(--nook-grey-dark);


  --crm-table-sort-color: var(--crm-primary-text-color);
  --crm-table-header-color: var(--crm-primary-text-color);
/* Panels */
  --crm-panel-shadow: var(--crm-shadow-block);
  --crm-panel-head-margin: 0px;
  --crm-panel-head-height: 42px;
/* Accordions */
  --crm-accordion-icon: "\f0da"; /* unicode value for FontAwesome icon */
  --crm-accordion-icon-color: var(--text);
  --crm-accordion-icon-spacing: var(--crm-l-medium);
  --crm-accordion-transform: rotate(90deg);
  --crm-accordion-transition: transform .3s;
  --crm-accordion-radius: 4px; /* thames */
  --crm-accordion-gap: var(--crm-l-xsmall-2) 0 0; /* space between multiple accordions */
/* .crm-accordion-bold */
  --crm-accordion-header-bg-color: var(--crm-c-blue-overlay); /* thames */
  --crm-accordion-header-bg-active-color: var(--crm-c-blue-overlay); /* thames */
  --crm-accordion-header-color: var(--crm-c-blue-darker); /* thames */
  --crm-accordion-header-padding: 0.6rem 1.6rem 0.6rem 2.8rem; /* thames */
  --crm-accordion-header-weight: bold;
  --crm-accordion-header-border: unset;/*var(--crm-border);*/ /* thames */
  --crm-accordion-header-border-width: unset; /*0 0 1px 0*/; /* thames */
  --crm-accordion-border: unset; /* thames */
  --crm-accordion-border-width: unset; /* thames */
  --crm-accordion-body-bg-color: var(--crm-c-blue-overlay); /* thames  todo check*/
  --crm-accordion-body-box-shadow: unset;
  --crm-accordion-body-padding: 0.25rem 2.8rem; /* thames */
/* .crm-accordion-light */
  --crm-accordion2-header-bg-color: transparent;
  --crm-accordion2-header-bg-active-color: var(--crm-c-background-2);
  --crm-accordion2-header-weight: normal;
  --crm-accordion2-header-color: var(--crm-text-color);
  --crm-accordion2-header-border: unset;
  --crm-accordion2-header-border-width: unset;
  --crm-accordion2-header-padding: .6rem 1.6rem 0.6rem 2.8rem; /*var(--crm-l-small) var(--crm-l-medium); */ /* thames */
  --crm-accordion2-border: unset;
  --crm-accordion2-border-width: unset;
  --crm-accordion2-body-bg-color: transparent;
  --crm-accordion2-body-padding: 0.25rem 2.8rem; /* thames */
/* Alerts */
  --crm-alert-padding: var(--crm-l-reg); /* thames */
  --crm-alert-margin: 0 0 var(--crm-l-medium);
  --crm-alert-border-width: 0; /* thames */
/* Note 'help' suffix here is for the 'success' boxes. */
  --crm-alert-success-bg-color: var(--crm-c-blue-light); /* thames */
  --crm-alert-success-border-color: unset; /* thames */
  --crm-alert-success-text-color: unset; /* thames */
  --crm-alert-warning-text: var(--crm-text-color);
  --crm-alert-warning-border-color: var(--crm-c-yellow);
  --crm-alert-info-bg-color: var(--crm-c-blue-light);
  --crm-alert-info-border-color: var(--crm-c-blue-light);
  --crm-alert-info-text-color: var(--crm-c-blue-darker);
  --crm-alert-danger-bg-color: var(--crm-c-red-light);
  --crm-alert-danger-border-color: var(--crm-c-red);
  --crm-alert-danger-text-color: var(--crm-c-red-dark);
/* Form */
  --crm-form-block-box-shadow: var(--crm-shadow-block);
  --crm-form-block-background: var(--crm-c-background);
  --crm-form-block-padding: var(--crm-l-medium);
  --crm-form-block-border-radius: var(--crm-l-radius);
  --crm-input-color: var(--crm-text-color);
  --crm-input-border-color: #0000001a; /* thames */
  --crm-input-border-radius: 3px;
  --crm-input-active-transition: border-color .15s ease-in-out 0s;
  --crm-input-box-shadow: none; /* thames */
  --crm-input-padding: var(--crm-l-xsmall-1) var(--crm-l-small-2);
  --crm-input-padding-large: var(--crm-l-small) var(--crm-l-medium-1);
  --crm-input-height: var(--crm-l-large);
  --crm-input-font-size: var(--crm-l-medium-3);
  --crm-input-label-weight: bold;
  --crm-input-label-font: var(--crm-font);
  --crm-input-label-size: var(--crm-font-size);
  --crm-input-label-width: 16ch; /* thames todo - where is this used? */
  --crm-input-label-align: right;
  --crm-input-description: #000000e8; /* darker for legibility */ /* thames */
  --crm-input-dropdown-icon: "\f107";
  --crm-input-radio-color: var(--crm-focus-color);
  --crm-input-inline-edit-border: 0 solid transparent;
  --crm-input-inline-edit-bg-color: var(--crm-c-background);
  --crm-form-fieldset-border-color: var(--crm-c-gray-400);
  --crm-form-fieldset-border-width: 0;
  --crm-form-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
/* Tabs */
  --crm-tabs-bg-color: var(--nook-grey-light);
  --crm-tabs-padding: 0;
  --crm-tabs-border: 4px solid var(--crm-c-blue-overlay2);
  --crm-tabs-gap: var(--crm-l-small);
  --crm-tab-hover-bg-color: var(--nook-grey-mid);
  --crm-tab-bg-active: white;
  --crm-tab-hang: 0 0 calc(-1 * var(--crm-l-small)) 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames todo check */
  --crm-tab-padding: var(--crm-l-medium-2) var(--crm-l-reg-1) var(--crm-l-medium); /* thames todo check */
  --crm-tab-color: var(--crm-text-color);
  --crm-tab-weight: normal;
  --crm-tab-count-bg-color: var(--crm-info-text-color);
  --crm-tab-count-color: var(--crm-info-color);
  --crm-tab-radius: var(--crm-r-3) var(--crm-r-3) 0 0;
  --crm-tab-border: none;
  --crm-tab-border-width: 0;
  --crm-tab-active-border: 0 solid transparent;
  --crm-tabs-2-border: var(--crm-tabs-border);
/* Contact dashboard/summary */
  --crm-contact-border: 0 solid transparent; /* thames */
  --crm-contact-radius: var(--crm-r-5); /* thames */
  --crm-contact-direction: grid; /* choose 'flex' for tabs at top, or 'grid' for tabs at side */ /* thames */
  --crm-side-tabs-width: 220px; /* thames */
  --crm-contact-tabs-flow: column; /* choose 'row' for tabs at top, or 'column' for tabs at side */ /* thames */
  --crm-contact-tabs-gap: 0; /* thames */
  --crm-contact-tabs-bg-color: var(--crm-c-blue-overlay); /* thames */
  --crm-contact-tabs-padding: unset; /* thames */
  --crm-contact-tab-bg-color: transparent;
  --crm-contact-tabs-radius: var(--crm-contact-radius) 0 0 var(--crm-contact-radius);
  --crm-contact-tab-hover-bg-color: white; /* thames */
  --crm-contact-tab-padding: var(--crm-l-medium-2) var(--crm-l-reg-1); /* thames */
  --crm-contact-tab-border: var(--crm-contact-border); /* thames */
  --crm-contact-tab-hover-border: 0 solid transparent;
  --crm-contact-tab-border-width: 0; /* to remove border on one side for hanging tabs */
  --crm-dash-tab-col: unset; /* thames */
  --crm-contact-tab-count-bg-color: var(--crm-primary-color); /* thames */
  --crm-contact-tab-count-color: var(--crm-text-light-color); /* thames */
  --crm-contact-tab-width: 100%;
  --crm-contact-tab-align: none;
  --crm-dash-tab-hang: 0 0 -1px 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames */
  --crm-contact-tab-radius: 0; /* thames */
  --crm-contact-icon-size: var(--crm-l-reg); /* thames */
  --crm-contact-summary-row-bg-color: var(--crm-c-background);
  --crm-contact-box-shadow: 0; /* thames */
  --crm-contact-heading-inset: unset;
  --crm-contact-panel-padding: var(--crm-l-reg-2); /* thames */
  --crm-contact-panel-border: 0;
  --crm-contact-panel-radius: 0 var(--crm-contact-radius) var(--crm-contact-radius) 0;
  --crm-contact-edit-border: 1px solid var(--crm-c-blue-dark); /* thames */
  --crm-contact-block-padding: var(--crm-l-medium-2); /* thames */
  --crm-contact-block-bg-color: var(--crm-c-background); /* thames */
  --crm-contact-block-radius: var(--crm-l-radius);
  --crm-contact-label-bg-color: var(--crm-c-background); /* thames */
  --crm-contact-header-bg-color: unset; /* thames */
  --crm-contact-header2-bg-color: unset; /* thames */
  --crm-contact-header-color: var(--crm-c-blue-darker); /* thames */
  --crm-contact-header-size: var(--crm-l-reg-3);
  --crm-contact-header-padding: unset; /* thames */
  --crm-dash-image-right: 20px; /* distance from right of dashboard */
/* Dialog */
  --crm-dialog-bg-color: var(--crm-paper);
  --crm-dialog-body-bg-color: var(--crm-dialog-bg-color);
  --crm-dialog-padding: 0; /* thames */
  --crm-dialog-radius: var(--crm-l-radius);
  --crm-dialog-line: unset;
  --crm-dialog-inner-shadow: var(--crm-shadow-bottom);
  --crm-dialog-header-bg-color: var(--crm-c-blue-overlay); /* thames */
  --crm-dialog-header-color: var(--crm-c-blue-darker); /* thames */
  --crm-dialog-header-size: var(--crm-l-reg-1);
  --crm-dialog-header-padding: var(--crm-l-medium-1) var(--crm-l-reg);
  --crm-dialog-header-radius: var(--crm-dialog-radius);
  --crm-dialog-header-border-color: transparent; /* thames */
  --crm-dialog-body-padding: var(--crm-l-medium);
/* Dashlet */
  --crm-dashlet-border: unset;
  --crm-dashlet-bg: white;
  --crm-dashlet-padding: var(--crm-l-small-2);
  --crm-dashlet-box-shadow: none;
  --crm-dashlet-dashlets-bg-color: var(--crm-c-background);
  --crm-dashlet-header-bg-color: white;
  --crm-dashlet-header-color: var(--crm-accordion-header-color);
  --crm-dashlet-header-border: unset;
  --crm-dashlet-header-border-width: unset;
  --crm-dashlet-header-font-size: var(--crm-font-size);
  --crm-dashlet-header-padding: var(--crm-l-small);
  --crm-dashlet-content-padding: var(--crm-dashlet-padding) 0;
  --crm-dashlet-tabs-bg: var(--crm-tabs-bg-color);
  --crm-dashlet-tabs-border: 0;
  --crm-dashlet-tab-bg: transparent;
  --crm-dashlet-tab-border: unset;
  --crm-dashlet-tab-color: unset;
  --crm-dashlet-tab-active: var(--crm-tab-bg-active);
  --crm-dashlet-tab-border-active: var(--crm-tab-active-border);
  --crm-dashlet-tab-body-border: 0;
  --crm-dashlet-tab-body-padding: var(--crm-l-medium);
  --crm-dashlet-radius: var(--crm-r-3);
/* Button dropdowns */
  --crm-dropdown-padding: var(--crm-l-small);
  --crm-dropdown-radius: var(--crm-l-radius);
  --crm-dropdown-bg-color: white; /* thames */
  --crm-dropdown-color: var(--crm-c-blue-darker); /* thames */
  --crm-dropdown-hover-text-color: var(--crm-c-blue-dark); /* thames */
  --crm-dropdown-hover-bg: var(--crm-c-blue-light); /* thames */
  --crm-dropdown-border: 0;
  --crm-dropdown-width: 23ch; /* thames */
  --crm-dropdown-danger-bg-color: var(--crm-danger-color); /* for delete links in dropdowns */
  --crm-dropdown2-bg-color: var(--crm-secondary-color);
  --crm-dropdown2-color: var(--crm-text-color);
  --crm-dropdown2-padding: var(--crm-padding-small);
/* Notifications */
  --crm-notify-background: white; /* thames */
  --crm-notify-padding: var(--crm-l-medium-2);
  --crm-notify-color: var(--crm-text-color); /* thames */
  --crm-notify-accent-border: 0.875rem 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none */ /* thames */
  --crm-notify-radius: 4px; /* thames */
  --crm-notify-danger-color: var(--crm-danger-color);
  --crm-notify-warning-color: var(--crm-warning-color);
  --crm-notify-success-color: var(--crm-success-color);
  --crm-notify-info-color: var(--crm-info-color);
/* Icons */
  --crm-icon-danger: "\f06a";
  --crm-icon-success: "\f058";
  --crm-icon-info: "\f05a";
  --crm-icon-close: "\f00d";
  --crm-icon-sort: "\f0dc";
  --crm-icon-sort-desc: "\f0dd";
  --crm-icon-sort-asc: "\f0de";
  --crm-icon-danger-color: inherit;
  --crm-icon-success-color: inherit;
  --crm-icon-warning-color: inherit;
  --crm-icon-info-color: inherit;
  /* override special icon colors */
  --crm-icon-success-color: var(--nook-icon-color);
  --crm-icon-alert-color: var(--nook-icon-color);
/* Wizard */
  --crm-wizard-width: fit-content;
  --crm-wizard-margin: 0.5rem auto;
  --crm-wizard-height: 30px;
  --crm-wizard-radius: var(--crm-l-large);
  --crm-wizard-angle: 0px;
  --crm-wizard-active-color: var(--crm-text-light-color);
  --crm-wizard-active-bg: var(--crm-link-color);
  --crm-wizard-border: var(--crm-border);
  --crm-wizard-bg-color: var(--crm-c-page-background);
/* Alpha filter */
  --crm-filter-bg-color: var(--crm-c-blue-overlay);
  --crm-filter-padding: var(--crm-l-medium);
  --crm-filter-item-bg-color: transparent;
  --crm-filter-item-shadow: none;
  --crm-filter-spacing: space-between;
/* Frontend */
  --crm-f-form-width: 700px;
  --crm-f-box-shadow: var(--crm-shadow-block);
  --crm-f-fieldset-bg-color: var(--crm-c-background);
  --crm-f-fieldset-padding: var(--crm-l-reg);
  --crm-f-fieldset-margin: 0 0 var(--crm-padding-reg) 0;
  --crm-f-fieldset-border: 0;
  --crm-f-legend-align: center;
  --crm-f-legend-size: var(--crm-l-reg-3);
  --crm-f-form-padding: var(--crm-padding-reg);
  --crm-f-form-layout: block; /* 'grid' = inline, 'block' = stacked */
  --crm-f-label-position: unset;
  --crm-f-label-align: left;
  --crm-f-label-weight: bold;
  --crm-f-label-margin: var(--crm-l-small);
  --crm-f-label-width: unset;
  --crm-f-input-radius: var(--crm-l-radius);
  --crm-f-input-padding: var(--crm-l-reg-2) var(--crm-l-medium-2);
  --crm-f-input-font-size: var(--crm-l-reg-1);
  --crm-f-input-width: 100%; /* thames */
  --crm-f-form-focus-bg-color: var(--crm-c-green);
  --crm-f-form-error-bg: var(--crm-c-red);
  --crm-f-logo-height: 40px;
  --crm-f-logo-align: center; /* left, right or center */
  /* scaling */
  font-size: 12px;

  --crm-font: 'Work Sans';
  --crm-font-title: 'Space Grotesk Bold';

  --crm-text-dark-color: var(--nook-blue-darkest);
  --crm-text-light-color: var(--nook-cream);

  --crm-primary-color: var(--nook-blue-mid);
  --crm-primary-hover-color: var(--nook-blue-dark);
  --crm-primary-text-color: var(--crm-text-light-color);
  --crm-primary-hover-text-color: var(--crm-text-light-color);
  --crm-primary-ink-color: var(--nook-blue-mid);

  --crm-secondary-color: var(--nook-green-light);
  --crm-secondary-hover-color: var(--nook-green);
  --crm-secondary-text-color: var(--crm-text-dark-color);
  --crm-secondary-hover-text-color: var(--crm-text-dark-color);
  --crm-secondary-ink-color: var(--crm-c-green);

  --crm-link-color: var(--nook-blue-darkest);
  --crm-link-hover-color: var(--nook-blue-dark);

  --crm-paper: var(--nook-white-tint);
  --crm-container-bg-color: var(--nook-white-tint2);
  --crm-input-bg-color: var(--nook-white-tint2);
  --crm-notify-bg-color: var(--crm-paper);
  --crm-border-color: var(--nook-grey-mid);

  --crm-c-page-background: var(--crm-c-background);

  --crm-dropdown-bg-color: var(--nook-grey-mid);
  --crm-btn-alert-bg: var(--nook-red);

  /* source for help text background */
  --crm-c-green-light: color-mix(in srgb, var(--nook-green), white 70%);

  --crm-l-radius: 0.5rem;

  --crm-input-label-weight: normal;
  --crm-tabs-border: none;
  --crm-contact-side-tabs-width: 15rem;
}





:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
/* core dark vars */
:root {
/* Colour names */
/* Practical colours, e.g. text, link '--crm-c-' */
  --crm-text-color: var(--crm-text-light-color);
  --crm-border-color: var(--crm-c-gray-500);
  --crm-paper: var(--crm-c-gray-900); /* The darkest bg in dark mode */
  --crm-ink: var(--crm-text-light-color); /* The lightest foreground in dark mode */
/* Backgrounds, '--crm-c-X-bg' */
  --crm-code-bg-color: var(--crm-layer1-bg-color);
  --crm-layer1-bg-color: var(--crm-c-gray-800);
  --crm-layer2-bg-color: var(--crm-c-gray-700);
/* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
  --crm-primary-ink-color: var(--crm-c-gray-300);
  --crm-secondary-ink-color: #cdcdcd;
  --crm-success-ink-color: var(--crm-success-light-color);
  --crm-warning-ink-color: var(--crm-warning-light-color);
  --crm-danger-ink-color: var(--crm-danger-light-color);
  --crm-info-ink-color: var(--crm-info-light-color);
/* Shadows */
  --crm-shadow-popup: 0 3px 18px 0 rgb(0,0,0);
/* Sizes */
/* Type */
  --crm-heading-color: var(--crm-text-light-color);
/* Mouse events */
/* Buttons '--crm-btn-' */
/* Tables '--crm-table-' */
  --crm-table-row-alternate-bg-color: #fff;
/* Panels '--crm-panel-' */
/* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
  --crm-accordion-body-bg-color: var(--crm-layer1-bg-color);
/* Alerts '--crm-alert' */
  --crm-alert-danger-bg-color: var(--crm-danger-color);
  --crm-alert-danger-text-color: var(--crm-danger-text-color);
  --crm-alert-danger-border-color: color-mix(in srgb, var(--crm-alert-danger-bg-color) 90%,#fff 10%);
  --crm-alert-info-bg-color: var(--crm-info-color);
  --crm-alert-info-border-color: color-mix(in srgb, var(--crm-alert-info-bg-color) 90%,#fff 10%);
  --crm-alert-info-text-color: var(--crm-success-text-color);
  --crm-alert-success-bg-color: var(--crm-success-color);
  --crm-alert-success-border-color: color-mix(in srgb, var(--crm-alert-success-bg-color) 90%,#fff 10%);
  --crm-alert-success-text-color: var(--crm-success-text-color);
  --crm-alert-warning-bg-color: var(--crm-warning-color);
  --crm-alert-warning-border-color: color-mix(in srgb, var(--crm-alert-warning-bg-color) 90%,#fff 10%);
/* Form '--crm-form-' '--crm-input-' '--crm-inline-' '--crm-fieldset-' '--crm-checkbox' */
  --crm-input-description: var(--crm-c-gray-300);
/* Tabs '--crm-tabs' */
  --crm-tabs-bg-color: var(--crm-layer2-bg-color);
/* Contact layout '--crm-contact-' */
  --crm-contact-label-bg-color: transparent;
/* Dialog '--crm-dialog-' */
  --crm-dialog-header-border-color: transparent;
/* Dashlet for main dashboard '--crm-dashlet-' */
/* Button dropdowns '--crm-dropdown-' */
/* Notifications '--crm-notify-' */
/* Icons '--crm-icon-' */
/* Wizard '--crm-wizard-' */
/* Alpha filter '--crm-filter-' */
/* Frontend '--crm-f- */
}

/* Nook Look Dark Styles file: _dark.css */

}