/* Style Variables */
:root {
	
	/* Font */
	--font-body:"Alegreya Sans", sans-serif; /* Body Font */
	--font-logo:"Outfit", sans-serif; /* Logo Font */
/* ==========================================================
   Grayscale
   ========================================================== */

--gray-0: #000000; /* rgb(0,0,0) */
--gray-1: #1D2325; /* rgb(29,35,37) */
--gray-2: #485759; /* rgb(72,87,89) */
--gray-3: #627273; /* rgb(98,114,115) */
--gray-4: #79898B; /* rgb(121,137,139) */
--gray-5: #8D9DA0; /* rgb(141,157,160) */
--gray-6: #98AAAA; /* rgb(152,170,170) */
--gray-7: #A9B8BA; /* rgb(169,184,186) */
--gray-8: #BCC8C9; /* rgb(188,200,201) */
--gray-9: #D2DBDB; /* rgb(210,219,219) */
--gray-10: #E7EFEF; /* rgb(231,239,239) */
--gray-11: #F7FAFA; /* rgb(247,250,250) */
--gray-12: #FFFFFF; /* rgb(255,255,255) */

--black: #000000;
--white: #FFFFFF;


/* ==========================================================
   Utility
   ========================================================== */

--red: #A90E2B;
--green: #009D79;


/* ==========================================================
   Brand (slightly darker / richer)
   ========================================================== */

--orange: #D96300;      /* darker, stronger, excellent with white */
--gold: #C89A25;          /* warmer, richer, more modern */

--blue:   #005F80;
--purple: #5F4272;


/* ==========================================================
   Bright variants
   ========================================================== */

--orange-bright: #F67B11;
--gold-bright:   #D5A72D;
--blue-bright:   #007EA8;
--green-bright:  #00BD91;
--red-bright:    #C9183C;
--purple-bright: #77558E;


/* ==========================================================
   Strong variants
   ========================================================== */

--orange-strong: #BC5500;
--gold-strong:   #9C7215;
--blue-strong:   #004F69;
--green-strong:  #008765;
--red-strong:    #8F0C24;
--purple-strong: #523962;


/* ==========================================================
   Faint Background Variants
   (for white text on colored sections)
   ========================================================== */

--orange-faint: #E59B66;
--gold-faint:   #D4BA7B;
--blue-faint:   #5C93A8;
--green-faint:  #63A894;
--red-faint:    #B86D7C;
--purple-faint: #947DA5;


/* ==========================================================
   Existing translucent helpers
   ========================================================== */

--orange-soft: rgba(217,99,0,.10);
--orange-subtle: rgba(217,99,0,.20);

--gold-soft: rgba(185,138,30,.10);
--gold-subtle: rgba(185,138,30,.20);

--blue-soft: rgba(0,95,128,.10);
--blue-subtle: rgba(0,95,128,.20);

--green-soft: rgba(0,157,121,.10);
--green-subtle: rgba(0,157,121,.20);

--red-soft: rgba(169,14,43,.10);
--red-subtle: rgba(169,14,43,.20);

--purple-soft: rgba(95,66,114,.10);
--purple-subtle: rgba(95,66,114,.20);



--gold-strong: #AA8018;
--gold-bright: #E0B43B;
--gold-faint: #DCC78C;

--gold-soft: rgba(200,154,37,.10);
--gold-subtle: rgba(200,154,37,.20);


/* ==========================================================
   Subtle Brushed Gold
   ========================================================== */

--gold-blend:
linear-gradient(
135deg,
#B78920 0%,
#C29527 18%,
#D3AE4C 34%,
#DEBF69 50%,
#D0AA43 66%,
#BF9124 82%,
#AE8119 100%
);


/* ==========================================================
   Subtle Brushed Silver
   ========================================================== */

--silver-blend:
linear-gradient(
135deg,
#8B9598 0%,
#A6B0B3 18%,
#C6CECF 36%,
#DCE3E4 50%,
#C9D0D2 64%,
#A7B0B3 82%,
#8B9598 100%
);
	
	/* Gradients */
	--gradient-dark-steel: linear-gradient(
		135deg,
		#2A3336,
		#3A474A
	);
	
	--gradient-dark-prism: linear-gradient(
		135deg,
		#2C3437,
		#374447,
		#2F3B3E
	);
	
	--gradient-light-soft: linear-gradient(
		135deg,
		#F5F9F9,
		#E8F0F0
	);
	
	--gradient-light-sheen: linear-gradient(
		135deg,
		#F3F7F7,
		#E6EEEE,
		#EEF4F4
	);
	
	--gradient-white-soft: linear-gradient(
		135deg,
		#FFFFFF,
		#F3F7F7
	);

	
	/* Color Assignments */
	--logo:var(--orange);
	--background:var(--gray-11);
	--font:var(--gray-1);
	--screen:var(--gray-8);
	
	--text-anchor-color:var(--orange);
	--text-anchor-color-hover:var(--blue);
	
	--good:var(--green);
	--neutral:var(--blue);
	--warning:var(--red);
	
	--attention-info: var(--blue);
	--attention-success: var(--green);
	--attention-warning: var(--red);
	--attention-danger: var(--red);
	
	/* Measurements */
	/* Margins based on units of 4px */
	--margin:44px;
	
	--margin-xxl:88px;
	--margin-xl:60px;
	--margin-l:var(--margin);
	--margin-m:24px;
	--margin-s:16px;
	--margin-xs:12px;
	--margin-xxs:8px;
	--margin-xxxs:4px;
	
	--margin-2:calc(var(--margin) * 2);
	--margin-3:calc(var(--margin) * 3);
	--margin-4:calc(var(--margin) * 4);
	--margin-5:calc(var(--margin) * 5);
	--margin-6:calc(var(--margin) * 6);
	--margin-7:calc(var(--margin) * 7);
	--margin-8:calc(var(--margin) * 8);
	--margin-9:calc(var(--margin) * 9);
	--margin-10:calc(var(--margin) * 10);
	
	--button-height:var(--margin); /* WCAG 2.1 Required Minimum */
	--button-width:calc(var(--margin) * 2); /* minimum width */
	
	--header-height:calc(var(--margin) * 2);
	
	/* Styles */
	--shadow:0px 0px 5px rgba(0,0,0, 0.33);
	--shadow-spread:0px 0px 30px rgb(0,0,0,.1);
	
	--divider:1px solid var(--gray-6);
	--divider-light:1px solid var(--gray-9);
	
	--radius-round:100%;
	--radius-tight:5px;
	
	--max-content-width:720px;
} /* END Style Variables */



/* Animations */
@keyframes fade-in {
            0% {
	        opacity:0%;
            }
            100% {
	        opacity:100%; 
            } 
        }
        
@keyframes message-in {
            0% {
	        opacity:0%;
            transform:translateY(-30%); 
            }
            20% {
	        opacity:0%;
            transform:translateY(-30%); 
            }
            100% {
	        opacity:100%;
            transform:translateY(0%); 
            } 
        }
 


/* Basic reset and styling */
* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
	}

div {
	position:relative;
	}

svg,	
svg.icon {
	height:24px;
	width:24px;
}

body {
	margin:auto;
	font-family:var(--font-body);
	font-size:1em;
	line-height:1.5em;
	color:var(--gray-1);
	background:var(--gray-11);
}
	
p {
	margin-bottom:var(--margin-s);
}
	
	p.caption {
		font-size:12px;
	}


ul {
	margin-bottom:var(--margin-s);
}
	
	div.layout ul {
		margin-left:var(--margin-m);
	}
	


/* Anchors */
a { 
	position:relative;
	color:var(--gray-1);
	text-decoration:none;
	transition:.5s;
	cursor:pointer;
	}
	
	a:hover {
		color:var(--orange);
		} 
		
		a.delete:hover {
			color:var(--red) !important;
			}
	
	/* Anchors */
	a.text_link,
	a.orange_link,
	a.link {
		color:var(--text-anchor-color);
		text-decoration:underline;
	}
		a.orange_link:hover,
		a.link:hover {
			color:var(--text-anchor-color-hover);
		}
		


/* Logo */
.logo {
	font-family:var(--font-logo);
	font-weight:900;
	color:var(--orange);
}



/* Hide & Show */
.hide, .hidden {
	display:none !important;;
}

.show, .visible {
	display:block;
}

.underline {
	text-decoration:underline;
}

.dim {
	opacity:.5;
	box-shadow:none;
	cursor:default;
}



/* General Settings - Responsive */
.mobile_show {
	display:none !important;
}

@media (max-width: 768px) {
	
	.mobile_show {
		display:inline-block !important;
	}
	
	.mobile_hide {
		display: none;
	}
}



/* Impact Color */
.impact_uncertain {
	background-color:var(--gray-5) !important;
	color:var(--white) !important;
}

.impact_major_catalyst {
	background-color:var(--green) !important;
	color:var(--white) !important;
}

.impact_catalyst {
	background-color:var(--green) !important;
	background-color:color-mix(in oklab, var(--blue) 33%, var(--green) 66%) !important;
	color:var(--white) !important;
}

.impact_minor_catalyst {
	background-color:var(--green) !important;
	background-color:color-mix(in oklab, var(--blue) 66%, var(--green) 33%) !important;
	color:var(--white) !important;
}

.impact_neutral {
	background-color:var(--blue) !important;
	color:var(--white) !important;
}

.impact_minor_obstacle {
	background-color:var(--red) !important;
	background-color:color-mix(in oklab, var(--blue) 66%, var(--red) 33%) !important;
	color:var(--white) !important;
}

.impact_obstacle {
	background-color:var(--red) !important;
	background-color:color-mix(in oklab, var(--blue) 33%, var(--red) 66%) !important;
	color:var(--white) !important;
}

.impact_major_obstacle {
	background-color:var(--red) !important;
	color:var(--white) !important;
}