/*

Theme Name: Pro &ndash; Child Theme
Theme URI: https://theme.co/pro/
Author: Themeco
Author URI: https://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

/* GLOBAL CSS */

:root {
  
/* TYPOGRAPHY */

--cp-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

--cp-fs-h1: clamp(2.475rem,3.3rem,3.795rem);
--cp-fs-h2: clamp(1.650rem,2.2rem,2.530rem);
--cp-fs-h3: clamp(1.350rem,1.8rem,2.070rem);
--cp-fs-h4: clamp(0.975rem,1.3rem,1.495rem);
--cp-fs-h5: clamp(0.975rem,1.3rem,1.495rem);
--cp-fs-eyebrow: clamp(0.675rem,0.9rem,1.035rem);  

--cp-fs-base-xs: 0.8rem; 
--cp-fs-base-sm: 0.9rem; 
--cp-fs-base-md: 1rem; 
--cp-fs-base-lg: 1.125rem; 

--cp-fw-light: 100; 
--cp-fw-book: 300;
--cp-fw-reg: 400;
--cp-fw-md: 500;
--cp-fw-bold: 700;

--cp-lh-h1: 0.95;
--cp-lh-h2: 0.95;
--cp-lh-h3: 0.95;
--cp-lh-h4: 1;
--cp-lh-h5: 1.2;
--cp-lh-eyebrow-lg: 1.2;
--cp-lh-base: 1;
  
/* SPACING */

--cp-container-article: 800px; /* blogposts, articles etc */
--cp-container-form: 540px; /* forms */

--cp-space-xs: 0.5em;
--cp-space-sm: 1em; 
--cp-space-md: 1.5em;
--cp-space-lg: 2.0em;
--cp-space-2xl: 2.5em; 
--cp-space-3xl: 3.75em;
--cp-space-4xl: 5em;
--cp-space-5xl: 6.25em;
--cp-space-6xl: 7.5em;

--cp-space-mega-menu-top: 52px;


/* COLORS */

--cp-col-light-0: #ffffff; /* white */
--cp-col-light-1: #faf9f5; /* beige */
--cp-col-light-2: #eeede7; /* prev f0eee6 */
--cp-col-light-3: #e8e6dc; /* prev e6e0d9 */
--cp-col-light-4: #e6e0d9; /* prev eeede7 */
--cp-col-light-5: #e3dacc; /* */
--cp-col-light-6: #dedcd9; /* original */

--cp-col-mid-1: #cec7ba; /* mat brown - prev cfc6ba */
--cp-col-mid-2: #b0a89d; /* prev cec7ba */
--cp-col-mid-3: #a19589; /* mid brown - prev cfc6ba, b9b0a5 */
--cp-col-mid-4: #8a7769; /* coffee brown - prev 8c6e56, 94754A */
--cp-col-mid-5: #786657; /* mokka brown - prev 73614b */
  
--cp-col-dark-1: #141413; /* black */
--cp-col-dark-2: #4f4f4b; /* orig: 3d3d3a */

--cp-col-grey-1: #f6f6f6;
--cp-col-grey-2: #e4e4e4;
--cp-col-grey-3: #cacaca;
--cp-col-grey-4: #c2c2c2;
--cp-col-grey-5: #b0b0b0;
--cp-col-grey-6: #5e5d59; /* dark grey */
  
--cp-col-brand-1: #cf7210; /* orange - orig #fb880e, e67d0e, cc710e, e67d0e */
--cp-col-brand-2: #b5c9c3; /* green - alt a0b8af */
--cp-col-brand-3: #598ea8; /* blue dark */
--cp-col-brand-4: #e0b819; /* yellow */
--cp-col-brand-5: #b56655; /* red */
--cp-col-brand-6: #dba49e; /* pink */
--cp-col-brand-7: #b0b0b0; /* grey light !!! */
--cp-col-brand-8: #a88ca4; /* purple */
  
--cp-col-accent: var(--cp-col-brand-1);
--cp-col-accent-faint: var(--cp-col-dark-3);

--cp-col-approve: var(--cp-col-brand-3); /* green approval */
--cp-col-disapprove: var(--cp-col-brand-7); /* red disapproval */
--cp-col-transp-light: rgba(250, 250, 250, 0.3);
--cp-col-transp-dark: rgba(0, 0, 0, 0.5);
  
--cp-col-border-faint: #eee;
--cp-col-border-subtle: #ddd;
--cp-col-border-strong: #777;


/* EFFECTS */

--cp-radius-xs: 4px; /* default */
--cp-radius-sm: 8px;
--cp-radius-md: 12px;
--cp-radius-lg: 16px;
--cp-radius-2xl: 25px;
--cp-radius-4xl: 90px;
--cp-radius-5xl: 50%;

--cp-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.15);
--cp-shadow-md: 0 12px 80px rgba(0, 0, 0, 0.07);
--cp-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

--cp-dur-fast: 180ms;
--cp-dur-base: 280ms;
--cp-dur-slow: 400ms;
  
--cp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

