:root {

/* ====================== */
/* === COLOR SYSTEM === */
/* ====================== */

--body-bg: #5f6b7a;
--body-text: #e6edf5;

--section-bg: #1e2a38;
--section-text: #e6edf5;
--section-heading: #9fc3e6;
--section-border: #2c3e55;

--section-link: #9fc7f0;
--section-link-hover: #b9dcff;

--header-title: #ffffff;
--header-tagline: #bcd6f5;

--footer-text: #cfd8e3;

/* ====================== */
/* === TYPOGRAPHY === */
/* ====================== */

--font-body-family: 'Segoe UI', Tahoma, sans-serif;

--font-h1-family: Georgia, serif;
--font-h1-size: 2.4em;
--font-h1-weight: 600;
--font-h1-letter-spacing: 0.5px;
--font-h1-line-height: 1.1;

--font-tagline-family: 'Segoe UI', sans-serif;
--font-tagline-weight: 700;
--font-tagline-transform: uppercase;
--font-tagline-letter-spacing: 3px;
--font-tagline-size: 1.05em;
--font-tagline-style: italic;
--tagline-margin-top: 0.3em;

--p-line-height: 1.6;
--p-margin: 0.75em 0;

--card-h3-size: 28px;
--card-h3-margin-bottom: 0.4em;
--card-p-size: 22px;
--card-p-margin: 0.4em 0 0.6em 0;

/* ====================== */
/* === LAYOUT === */
/* ====================== */

--layout-max-width: 1000px;

--section-padding: 1.5em;
--section-margin-bottom: 2em;
--section-border-width: 3px;
--section-radius: 12px;

/* ====================== */
/* === SHADOWS === */
/* ====================== */

--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);

--shadow-footer: 0 3px 3px rgba(0,0,0,0.5);

/* ====================== */
/* === BUTTONS === */
/* ====================== */

--button-padding: 0.45em 1.1em;
--button-margin: 0.6em 0 1em 0;
--button-bg: #2b3f57;
--button-border-width: 1px;
--button-border: #5f89b5;
--button-text: #9fc7f0;
--button-font-weight: bold;
--button-font-size: 1rem;
--button-radius: 6px;

--button-bg-hover: #365274;
--button-text-hover: #ffffff;

--button-small-font-size: 0.8rem;
--button-small-padding: 0.3em 0.8em;

/* ====================== */
/* === CARDS === */
/* ====================== */

--card-bg: #1e2a38;
--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-highlight-translate: -3px;
--card-shadow-highlight: 0 0 14px rgba(110,162,217,0.45);

/* ====================== */
/* === IMAGES === */
/* ====================== */

--image-radius: 18px;
--image-padding: 3px;
--image-bg: #1e2a38;
--image-border-width: 3px;
--image-border: #5f89b5;
--image-shadow: 0 0 10px rgba(0,0,0,0.4);

--image-hover-scale: 1.04;
--image-shadow-hover: 0 0 12px rgba(110,162,217,0.5);

--image-border-hover: #6ea2d9;

--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: #2b3f57;
--bullet-pill-border: #5f89b5;
--bullet-pill-text: #ffd34d;

--bullet-pill-bg-hover: #365274;
--bullet-pill-text-hover: #ffe27a;

--bullet-decorative: #9fc7f0;

/* ====================== */
/* === NAVIGATION === */
/* ====================== */

--nav-font-size: 0.95em;
--nav-border-width: 2px;
--nav-border: #2c3e55;
--nav-radius: 20px 20px 0 0;
--nav-bg: #1e2a38;

--nav-item-padding: 0.4em 1em;
--nav-item-font-size: 0.95em;

--nav-divider: #3f5875;

--nav-tab-bg: #26384d;
--nav-tab-bg-active: #2f4764;

--nav-tab-text: #dce6f3;
--nav-tab-text-active: #ffffff;

--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: #2c3e55;
--breadcrumb-radius: 20px 20px 0 0;
--breadcrumb-bg: #1e2a38;
--breadcrumb-divider: #3f5875;
--breadcrumb-item-padding: 0.4em 1em;
--breadcrumb-item-font-size: 0.95em;
--breadcrumb-text: #dce6f3;
--breadcrumb-active-bg: #26384d;
--breadcrumb-link: #ffd34d;

/* ====================== */
/* === OUTBOUND LINKS === */
/* ====================== */

--outbound-font-size: 0.95em;
--outbound-border-width: 2px;
--outbound-border: #2c3e55;
--outbound-radius: 20px 20px 0 0;
--outbound-bg: #1e2a38;
--outbound-divider: #3f5875;
--outbound-item-padding: 0.4em 1em;
--outbound-item-font-size: 0.95em;
--outbound-text: #dce6f3;
--outbound-label-bg: #26384d;
--outbound-link: #ffd34d;

/* ====================== */
/* === CAPSULE ITEMS === */
/* ====================== */

--capsule-bg: #26384d;
--capsule-padding: 0.8em 1.2em;
--capsule-border-width: 4px;
--capsule-border: #6ea2d9;
--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;

/* ====================== */
/* === FORMS === */
/* ====================== */

--form-wrapper-width: 520px;
--form-wrapper-margin-top: 1.5em;
--form-max-width: 520px;
--form-group-margin: 1.2em;

--form-label: #dce6f3;

--form-input-width: 500px;
--form-input-bg: #26384d;
--form-input-border-width: 2px;
--form-input-border: #5f89b5;
--form-input-border-focus: #6ea2d9;
--form-input-radius: 6px;
--form-input-padding: 0.6em;
--form-input-text: #ffffff;
--form-input-font-size: 1em;

--form-textarea-height: 200px;

--form-counter-font-size: 0.85em;
--form-counter-margin-top: 0.4em;
--form-muted-text: #9fb7d6;

--form-feedback-padding: 0.8em;
--form-feedback-margin: 1em;
--form-feedback-radius: 6px;
--form-feedback-border-width: 2px;

--form-success-bg: #1f3d2f;
--form-success-border: #3f8f6a;
--form-success-text: #c9ffe3;

--form-failure-bg: #3d1f1f;
--form-failure-border: #b45a5a;
--form-failure-text: #ffd6d6;

}
