:root {

/* FONTS */
--font-body-family: 'IBM Plex Sans', sans-serif;

--font-h1-family: Georgia, serif;
--font-h1-size: 2.5em;
--font-h1-weight: 600;
--font-h1-letter-spacing: 0.5px;
--font-h1-line-height: 1;

--font-tagline-family: 'Segoe UI', Roboto, sans-serif;
--font-tagline-weight: 700;
--font-tagline-transform: uppercase;
--font-tagline-letter-spacing: 3px;
--font-tagline-size: 1.1em;
--font-tagline-style: italic;
--tagline-margin-top: 0.3em;

/* BODY */
--body-bg: #2a3442;
--body-text: #eee;

/* PARAGRAPH */
--p-line-height: 1.6;
--p-margin: 0.75em 0;

/* HEADER */
--header-title: #e3ecf7;
--header-tagline: #e3ecf7;
--logo-max-height: 250px;

--shadow-h1:
  0 3px 0 rgba(0,0,0,0.55),
  0 6px 12px rgba(0,0,0,0.75),
  0 10px 25px rgba(0,0,0,0.6);

--shadow-tagline:
  0 3px 0 rgba(0,0,0,0.5),
  0 4px 10px rgba(0,0,0,0.65);

/* LAYOUT */
--layout-max-width: 1000px;

/* SECTION */
--section-bg: rgba(17, 17, 17, 0.9);
--section-padding: 1.5em;
--section-margin-bottom: 2em;
--section-border-width: 3px;
--section-border: #221d10;
--section-radius: 12px;
--section-text: #eee;
--section-heading: #a9c0dc;

--section-link: #c6d4e8;
--section-link-hover: #e0eaf8;

/* FOOTER */
--footer-text: #b0c3da;
--footer-font-size: 16px;
--footer-line-height: 1.5;
--shadow-footer: 0 3px 3px rgba(0,0,0,0.6);

/* BUTTONS */
--button-padding: 0.45em 1.1em;
--button-margin: 0.6em 0 1em 0;
--button-bg: #2f3c4f;
--button-bg-hover: #3a4a61;
--button-border-width: 1px;
--button-border: #5c728d;
--button-text: #9fb4cc;
--button-text-hover: #c6d4e8;
--button-font-weight: bold;
--button-font-size: 1rem;
--button-radius: 6px;
--button-small-font-size: 0.8rem;
--button-small-padding: 0.3em 0.8em;

/* CARD */
--card-bg: rgba(22, 26, 34, 0.9);
--card-border-width: 3px;
--card-radius: 14px;
--card-padding: 1.5em 1.8em;
--card-line-height: 1.5;

--card-shadow: 0 0 12px rgba(0,0,0,0.45);
--card-shadow-hover: 0 0 10px rgba(0,0,0,0.4);
--card-shadow-highlight: 0 0 14px rgba(240,192,64,0.4);
--card-highlight-translate: -3px;

--card-h3-size: 28px;
--card-h3-margin-bottom: 0.4em;

--card-p-margin: 0.4em 0 0.6em 0;
--card-p-size: 22px;

/* IMAGES */
--image-bg: #1a1410;
--image-border-width: 3px;
--image-border: #3a2e1a;
--image-border-hover: #77899f;
--image-radius: 18px;
--image-padding: 3px;

--image-shadow: 0 0 10px rgba(0,0,0,0.4);
--image-shadow-hover: 0 0 12px rgba(119,137,159,0.45);
--image-hover-scale: 1.04;

--image-size-small: 120px;
--image-size-medium: 200px;
--image-size-large: 300px;
--image-size-xlarge: 400px;

--image-responsive-width: 70%;
--image-responsive-max: 300px;

/* PILL BULLETS */
--pill-margin: 1em 0;
--pill-gap: 0.5rem;
--pill-padding: 0.4rem 0.8rem;
--pill-radius: 999px;
--pill-border-width: 1px;
--pill-font-weight: bold;
--pill-font-size: 1rem;
--pill-line-height: 1;
--pill-small-font-size: 0.85rem;
--pill-small-padding: 0.3em 0.7em;
--pill-big-font-size: 1.15rem;
--pill-big-padding: 0.5em 1.1em;

--bullet-pill-bg: #2a3442;
--bullet-pill-border: #9fb4cc;
--bullet-pill-text: #9fb4cc;
--bullet-pill-bg-hover: #33465c;
--bullet-pill-text-hover: #c6d4e8;

--bullet-decorative: #9fb4cc;

/* NAVIGATION */
--nav-font-size: 0.95em;
--nav-border-width: 2px;
--nav-border: #2c3442;
--nav-radius: 20px 20px 0 0;
--nav-bg: rgba(16,20,27,0.9);
--nav-tab-bg: rgba(28,33,42,0.9);
--nav-tab-bg-active: rgba(22,26,34,0.9);
--nav-divider: #2c3442;
--nav-item-padding: 0.4em 1em;
--nav-item-font-size: 0.95em;
--nav-tab-text: #9fb0c6;
--nav-tab-text-active: #e6edf7;

/* NAV MOBILE */
--nav-mobile-width: 90%;
--nav-mobile-max-width: 520px;
--nav-mobile-radius: 18px;
--nav-mobile-link-padding: 16px 0;
--nav-mobile-link-font-size: 18px;

/* BREADCRUMBS */
--breadcrumb-font-size: 0.95em;
--breadcrumb-border-width: 2px;
--breadcrumb-border: #2c3442;
--breadcrumb-radius: 20px 20px 0 0;
--breadcrumb-bg: rgba(17,17,17,0.9);
--breadcrumb-divider: #3a2e1a;
--breadcrumb-item-padding: 0.4em 1em;
--breadcrumb-item-font-size: 0.95em;
--breadcrumb-text: #eee;
--breadcrumb-link: #9fb4cc;
--breadcrumb-active-bg: rgba(32,32,32,0.95);

/* OUTBOUND */
--outbound-font-size: 0.95em;
--outbound-border-width: 2px;
--outbound-border: #2c3442;
--outbound-radius: 20px 20px 0 0;
--outbound-bg: rgba(17,17,17,0.9);
--outbound-divider: #3a2e1a;
--outbound-item-padding: 0.4em 1em;
--outbound-item-font-size: 0.95em;
--outbound-text: #eee;
--outbound-link: #9fb4cc;
--outbound-label-bg: rgba(32,32,32,0.95);

/* CAPSULE */
--capsule-bg: rgba(26,26,26,0.9);
--capsule-padding: 0.8em 1.2em;
--capsule-border-width: 4px;
--capsule-border: #9fb4cc;
--capsule-max-width: 800px;
--capsule-margin: 0.8em auto;
--capsule-radius: 0 999px 999px 0;
--capsule-soft-radius: 0 15px 15px 0;

/* ASSET LIST */
--asset-font-size: 18px;
--asset-padding-left: 1.2em;
--asset-text-indent: -1.2em;
--asset-margin: 0.25em 0;
--asset-line-height: 1.4;

/* FORM */
--form-wrapper-width: 520px;
--form-wrapper-margin-top: 1.5em;
--form-max-width: 520px;
--form-group-margin: 1.2em;

--form-label: #cbd7e6;

--form-input-width: 500px;
--form-input-bg: #1b1f27;
--form-input-border-width: 2px;
--form-input-border: #2c3440;
--form-input-border-focus: #4c82c4;
--form-input-radius: 6px;
--form-input-padding: 0.6em;
--form-input-text: #e3ecf7;
--form-input-font-size: 1em;

--form-textarea-height: 200px;

--form-counter-font-size: 0.85em;
--form-counter-margin-top: 0.4em;
--form-muted-text: #8fa4bd;

--form-feedback-padding: 0.8em;
--form-feedback-margin: 1em;
--form-feedback-radius: 6px;
--form-feedback-border-width: 2px;

--form-success-bg: rgba(40,120,60,0.25);
--form-success-border: #2f8f4a;
--form-success-text: #7ee787;

--form-failure-bg: rgba(120,40,40,0.25);
--form-failure-border: #b33a3a;
--form-failure-text: #ff7b7b;

}