:root {
	/* Colors */
	/* Brand colors */
	--cp-dark-blue: #003557;
	--cp-light-blue: #bddaf3;
	--cp-blue-green: #67bcc4;
	--cp-orange: #ff6201;
	--cp-sand: #ffebd8;

	/* Extended */
	--cp-orange-dark: #E15911;
	--cp-blue-lighter: #F5FAFF;
	--cp-blue-green-dark: #52969D;
	--cp-bronze: #E68D3F;
	--cp-silver: #D2D2D2;
	--cp-gold: #F9CE64;

	/* Neutrals */
	--cp-black: #2f2f2f;
	--cp-grey-dark: #8495A5;
	--cp-grey-medium: #A0B5CA;
	--cp-grey-light: #ECF0F4;
	--cp-white: #ffffff;
	--cp-white-90: rgba(255, 255, 255, 0.9);
	--cp-white-70: rgba(255, 255, 255, 0.7);
	--cp-white-50: rgba(255, 255, 255, 0.5);
	--cp-white-20: rgba(255, 255, 255, 0.2);
	--cp-dark-blue-80: rgba(0, 53, 87, 0.8);

	/* Effects */
	--cp-backdrop-blur: 16px;
	--cp-surface-on-img-blur: 16px;

	/* Typography */
	--cp-font-heading: "Proxima Nova Condensed", "Segoe UI", Arial, sans-serif;
	--cp-font-body: "Proxima Nova Condensed", "Segoe UI", Arial, sans-serif;
	--cp-h1-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) !important;
	--cp-h2-size: clamp(3rem, 1.4rem + 2vw, 4rem);
	--cp-h3-size: clamp(1.5rem, 2.4vw, 2.5rem);
	--cp-h4-size: 24px;
	--cp-body-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);

	/* Buttons */
	--cp-button-primary-bg: var(--cp-orange);
	--cp-button-primary-color: var(--cp-white);
	--cp-button-primary-hover-bg: var(--cp-orange-dark);
	--cp-button-primary-hover-color: var(--cp-white);
	--cp-button-focus: var(--cp-orange);

	/* Light mode */

	/* backgrounds */
	--cp-page-bg: var(--cp-blue-lighter);
	--cp-page-solid-bg: #052038;
	--cp-surface-color: #e6eff7;
	--cp-surface-bg: #e6eff7;
	--cp-surface-2-bg: #D2E2F1;

	/*
	 * Semi-transparent surface for cards placed on imagery.
	 * Works together with --cp-backdrop-blur.
	 */
	--cp-surface-on-img-bg: var(--cp-white-50);

	--cp-badge-bg: var(--cp-light-blue);
	--cp-header-color: var(--cp-white);
	--cp-btn-secondary-bg: var(--cp-grey-light);

	/* text */
	--cp-heading-color: var(--cp-dark-blue);
	--cp-text-primary: var(--cp-black);
	--cp-text-secondary: var(--cp-grey-dark);
	--cp-text-tertiary: var(--cp-blue-green-dark);
	--cp-text-on-image: var(--cp-dark-blue);
	--cp-text-inactive: var(--cp-grey-medium);
	--cp-text-badge: var(--cp-dark-blue);
	--cp-body-color: var(--cp-black);
	--cp-link-color: var(--cp-dark-blue);
	--cp-meta-text: var(--cp-text-secondary);

	/* borders */
	--cp-border-color: rgba(0, 53, 87, 0.14);
	--cp-border-hover-color: rgba(0, 53, 87, 0.24);
	--cp-btn-secondary-border-color: var(--cp-border-color);
}


html[data-theme="dark"] {
	/* backgrounds */
	--cp-page-bg: linear-gradient(135deg, #07243c 0%, #001932 100%);
	--cp-page-solid-bg: #052038;
	--cp-page-bg-dark: linear-gradient(135deg, #07243c 0%, #001932 100%);
	--cp-surface-color: rgba(255, 255, 255, 0.06);
	--cp-surface-bg: rgba(255, 255, 255, 0.06);
	--cp-surface-2-bg: rgba(255, 255, 255, 0.10);

	/*
	 * Dark translucent surface while still allowing the
	 * underlying image to remain visible through the blur.
	 */
	--cp-surface-on-img-bg: var(--cp-dark-blue-80);

	--cp-badge-bg: rgba(255, 255, 255, 0.10);
	--cp-header-color: var(--cp-dark-blue);
	--cp-btn-secondary-bg: var(--cp-surface-color);

	/* text */
	--cp-heading-color: var(--cp-white);
	--cp-text-primary: var(--cp-white);
	--cp-text-secondary: var(--cp-grey-medium);
	--cp-text-tertiary: var(--cp-blue-green);
	--cp-text-on-image: var(--cp-grey-medium);
	--cp-text-inactive: var(--cp-grey-dark);
	--cp-text-badge: var(--cp-light-blue);
	--cp-body-color: var(--cp-white-90);
	--cp-link-color: var(--cp-white);
	--cp-meta-text: var(--cp-grey-medium);

	/* borders */
	--cp-border-color: rgba(255, 255, 255, 0.16);
	--cp-border-hover-color: rgba(255, 255, 255, 0.26);
	--cp-btn-secondary-border-color: rgba(255, 255, 255, 0.1);
}


body {
	background: var(--cp-page-bg);
}