:root {

    --yusaso-blue: #06717d;
	--yusaso-blue-light: #275861;
    --yusaso-green: #12824b;
	--yusaso-green-light: #4b735f;
    --yusaso-purple: #601e5a;
	--yusaso-purple-light: #693b64;
	--yusaso-orange: #fab207;

	--font-h2-size: 1.3rem;
    --font-lg: 1.45rem;
    --font-md: 1rem;
    --font-sm: 0.875rem;
    --font-xl: 1.5rem;
    --font-xs: 0.75rem;
	--header-username-font-size: 1.125rem; /* Oct 10 2026 - her request: header username is 18px */
	--font-family: Arial, Helvetica, sans-serif !important;

	--primary-color: #06010d;  /* deep purple-black #333 med grey */
    --secondary-color: #111111; /*#525252; lighter grey */

	--primary-accent-color: #06424d; /* darker teal */
	--secondary-accent-color: #275861;  /* lighter teal */

	--primary-border-color: var(--gradient-mix); /*#140626;*/
	--secondary-border-color: var(--primary-color);
	--tertiary-border-color: var(--feature-gradient);

    --primary-font-color: #fff;
    --secondary-font-color: #000;

    --primary-link-active-color: #4aa2b0;
    --primary-link-color: #06717d;
    --primary-link-hover-color: #22a2b3;

    --primary-toolbar-color: #111111;

    --secondary-toolbar-color: #222222;

	--font-inactive-color: #507f87;

	--viewer-primary-font-color: var(--primary-font-color);
	--persona-name-text: var(--viewer-primary-font-color);
	--persona-type-text: var(--viewer-primary-font-color);
	--persona-compact-text: var(--viewer-primary-font-color);

	--layout-theme-zone-scale: 1;

	--layout-theme-zone-pad: calc(5px * var(--layout-theme-zone-scale, 1));

	--widget-scrollbar-gutter-width: 0.65rem;

	--standard-button-gap: 4px;

	--radius-none: 0;
	--radius-small: 8px;
	--radius-large: 15px;

	--theme-zone-memory-board-frame-corner-image: none;
	--theme-zone-memory-board-frame-side-image: none;
	--theme-zone-memory-board-frame-side-vertical-image: none;
	--button-full-set-image: var(--theme-button-bg-full);
	--button-mobile-set-image: var(--theme-button-bg-mobile);

    --layout-rail-extra-start: 1600px;
    --layout-rail-extra: clamp(0px, calc((100vw - var(--layout-rail-extra-start)) / 2), 50px);
    --layout-rail-width: calc(20rem + var(--layout-rail-extra));

	--tertiary-color: #6f9e88;

	--faded: #ccc;
	--light: #fff;
	--dark: #000;
	--glyph: #fff;

	--tertiary-font-color: var(--faded);

	--alert-bad-bg: var(--yusaso-purple-light);
	--alert-bad-border: var(--yusaso-purple);
	--alert-good-bg: var(--yusaso-green-light);
	--alert-good-border: var(--yusaso-green);

	--glow: var(--light);

	--shadow: 0 0 10px rgba(13, 13, 13, 0.2), 0 14px 34px rgba(0, 0, 0, 0.45);

	--primary-transparent: color-mix(in srgb,var(--primary-color) 90%,transparent);

	--gradient-content-bg: color-mix(in srgb, var(--primary-color) 40%, transparent);

	--body-bg-gradient: radial-gradient(ellipse at 12% 18%, rgba(0, 180, 190, .22) 0, rgba(0, 180, 190, 0) 48%), radial-gradient(ellipse at 88% 15%, rgba(55, 115, 235, .18) 0, rgba(55, 115, 235, 0) 45%), radial-gradient(ellipse at 82% 88%, rgba(160, 75, 210, .16) 0, rgba(160, 75, 210, 0) 48%), radial-gradient(ellipse at 15% 85%, rgba(240, 105, 105, .12) 0, rgba(240, 105, 105, 0) 44%);

	--gradient-mix: linear-gradient(90deg, rgba(4, 4, 23, 1) 0%, rgba(7, 18, 18, 1) 25%, rgba(10, 5, 20, 1) 50%, rgba(23, 3, 23, 1) 76%, rgba(7, 7, 26, 1) 100%) !important;
    --gradient-mix-header: linear-gradient(90deg, rgba(4, 4, 23, 1) 0%, rgba(7, 18, 18, 1) 25%, rgba(10, 5, 20, 1) 50%, rgba(23, 3, 23, 1) 76%, rgba(7, 7, 26, 1) 100%);

	--feature-gradient: linear-gradient(135deg, rgba(8, 1, 11, 0.92), rgba(3, 0, 6, 0.94));

	--theme-button-bg-full: url("../images/theme_samples/yusaso_metal_button_full.png");
	--theme-button-bg-mobile: url("../images/theme_samples/yusaso_metal_button_mobile.png");
}

@media (max-width: 87.5rem) {
	:root { --layout-theme-zone-scale: .75; }
}
@media (max-width: 50rem) {
	:root { --layout-theme-zone-scale: .5; }
}

@media (max-width: 87.5rem) {
    :root {
        --layout-rail-width: clamp(12rem, 18vw, 20rem);
    }
}