/* ============================================================
 * Design Tokens — CSS Custom Properties
 * Load this file BEFORE core*.css, page-content.css, tabs.css, screen.css.
 * Variable names that overlap with common/styles/general.php are kept
 * as-is so the legacy system keeps working.
 * ============================================================ */

:root {
	/* ---------- Font families ----------
	 * Site-wide font is Spectrum Sans. Legacy aliases (body/heading/...)
	 * are kept so existing rules in core*.css remain valid; all alias
	 * tokens resolve to Spectrum Sans.
	 */
	--font-family-spectrum:  'Spectrum Sans', sans-serif;
	--font-family-body:      var(--font-family-spectrum);
	--font-family-body-alt:  var(--font-family-spectrum);
	--font-family-heading:   var(--font-family-spectrum);
	--font-family-serif:     var(--font-family-spectrum);
	--font-family-garamond:  var(--font-family-spectrum);
	--font-family-arial:     var(--font-family-spectrum);
	--font-family-icon:      "FontAwesome";


	/* ---------- Font sizes (px) ---------- */
	--font-size-base-percent: 100%;
	--font-size-10:   10px;
	--font-size-12:   12px;
	--font-size-13:   13px;
	--font-size-13-8: 13.8px;
	--font-size-14:   14px;
	--font-size-15:   15px;
	--font-size-16:   16px;
	--font-size-17:   17px;
	--font-size-18:   18px;
	--font-size-20:   20px;
	--font-size-22:   22px;
	--font-size-24:   24px;
	--font-size-28:   28px;
	--font-size-30:   30px;
	--font-size-33:   33px;
	--font-size-40:   40px;
	--font-size-44:   44px;

	/* ---------- Font sizes (rem) ---------- */
	--font-size-rem-0-625:  0.625rem;
	--font-size-rem-0-75:   0.75rem;
	--font-size-rem-0-875:  0.875rem;
	--font-size-rem-0-9375: 0.9375rem;
	--font-size-rem-1:      1rem;
	--font-size-rem-1-125:  1.125rem;
	--font-size-rem-1-25:   1.25rem;
	--font-size-rem-1-875:  1.875rem;

	/* ---------- Font sizes (em) ---------- */
	--font-size-em-1-3: 1.3em;

	/* ---------- Neutrals ---------- */
	--color-white:       #ffffff;
	--color-white-alpha: #00ffffff;
	--color-black:       #000000;
	--color-black-10:    #0000001a;

	/* Grays */
	--color-gray-900:   #333333;
	--color-gray-800:   #58595b;
	--color-gray-medium:#5a5a5a; /* alias, matches general.php */
	--color-gray-600:   #5e5e5e;
	--color-gray-550:   #594a42;
	--color-gray-500:   #7d7d80;
	--color-gray-450:   #8b8b8d;
	--color-gray-400:   #aeafb3;
	--color-gray-350:   #c8c8c8;
	--color-gray-300:   #ccc;
	--color-gray-250:   #e1e2e3;
	--color-gray-240:   #e6e7e8;
	--color-gray-200:   #ecebeb;
	--color-gray-100:   #efefef;

	/* ---------- Brand: Orange / Coral ---------- */
	--color-orange:              #C82030; /* alias, matches general.php */
	--color-brand-orange:        #f78d0e;
	--color-brand-orange-2:      #f78f1f;
	--color-brand-orange-3:      #f68e1e;
	--color-brand-orange-dark:   #f38b00;
	--color-brand-orange-vivid:  #ff7800;
	--color-brand-orange-light:  #f4824e;
	--color-brand-peach:         #f9ba9d;
	--color-brand-rust:          #ae4427;
	--color-brand-rust-dark:     #a7422f;
	--color-brand-terracotta:    #b75527;
	--color-brand-terracotta-2:  #c58275;

	/* Peach / cream backgrounds */
	--color-peach-50:  #fbf0ef;
	--color-peach-75:  #fdede6;
	--color-peach-100: #fef3ed;
	--color-peach-150: #fef5eb;
	--color-peach-250: #f6ecea;
	--color-peach-300: #f5eae1;
	--color-peach-350: #f1e2de;

	/* ---------- Brand: Yellow / Gold ---------- */
	--color-yellow:       #FFE600;
	--color-yellow-sand:  #ffc75a;
	--color-yellow-amber: #f8c00e;
	--color-yellow-dark:  #b89e4a;
	--color-yellow-soft:  #fff6d1;
	--color-yellow-cream: #fff9ee;
	--color-yellow-lime:  #d6de23;

	/* ---------- Brand: Blue ---------- */
	--color-blue-navy:     #0a1c4d;
	--color-blue:          #0067D3; /* alias, matches general.php */
	--color-header-blue:   #4C8CCA; /* header-image, navbar, footer */
	--color-blue-dark:     #1c2c5a;
	--color-blue-deep:     #272262;
	--color-blue-royal:    #25408f;
	--color-blue-indigo:   #2e3192;
	--color-blue-primary:  #004990;
	--color-blue-medium:   #13588f;
	--color-blue-steel:    #035a82;
	--color-blue-teal:     #00688f;
	--color-blue-mid:      #30669e;
	--color-blue-light:    #3c6cab;
	--color-blue-light-2:  #3d6caa;
	--color-blue-medium-2: #4775af;
	--color-blue-lavender: #5074b4;
	--color-blue-dusty:    #6175af;
	--color-blue-slate:    #94aad2;
	--color-blue-sky:      #007dc3;
	--color-blue-ocean:    #028fb4;
	--color-blue-bright:   #1f8dca;
	--color-blue-cyan:     #00aeef;
	--color-blue-electric: #0ab1f0;
	--color-blue-pale:     #77d4f6;
	--color-blue-pale-2:   #95dafa;
	--color-blue-pale-3:   #a6e3f9;
	--color-blue-powder:   #a5bdea;
	--color-blue-powder-2: #c2cee5;
	--color-blue-mist:     #dbe4ef;
	--color-blue-mist-2:   #e0e4f1;
	--color-blue-mist-3:   #e1e0ed;
	--color-blue-mist-4:   #e5edf4;
	--color-blue-mist-5:   #e6e8f2;
	--color-blue-mist-6:   #e7e7f2;
	--color-blue-mist-7:   #e8f4fa;
	--color-blue-mist-8:   #e9e8ef;
	--color-blue-mist-9:   #d3dbe4;
	--color-blue-gray:     #cbd6db;
	--color-blue-ice:      #edf1f7;
	--color-blue-ice-2:    #edf1f8;
	--color-blue-frost:    #e5f7fd;

	/* ---------- Brand: Teal / Green ---------- */
	--color-teal-sea:      #009ea1;
	--color-teal-bright:   #00b09b;
	--color-teal-bright-2: #00b3ac;
	--color-teal:          #00A8AA; /* alias, matches general.php */
	--color-teal-alpha:    #00A8AA1A; /* alias, matches general.php */
	--color-teal-mint:     #48c5b5;
	--color-cyan-light:    #66c9d6;
	--color-teal-pale:     #a0dcd4;
	--color-green-sage:    #509882;
	--color-green-sage-2:  #6faa98;
	--color-green:         #498f3f;
	--color-green-dark:    #519449;
	--color-green-pale:    #e4ede2;
	--color-green-pale-2:  #ebf2e9;
	--color-teal-mist:     #e1f5f2;
	--color-teal-mist-2:   #e5f5f5;
	--color-teal-mist-3:   #e5f7f5;
	--color-teal-mist-4:   #eff9f8;
	--color-teal-mist-5:   #eff9fb;
	--color-teal-mist-6:   #f5fdfe;
	--color-teal-mist-7:   #edf4f2;
	--color-teal-mist-8:   #edf5f3;

	/* ---------- Brand: Red / Pink ---------- */
	--color-dark-red:    #9f4a50; /* alias, matches general.php */
	--color-dark-red-10: #9f4a501a;
	--color-red-dark:    #630101;
	--color-red-pink:    #faa0a0;
	--color-pink:        #dc76b0;
}

html{
	/* Spectrum Sans has top/bottom glyph asymmetry — nudge text down to
	 * visually center in uppercase buttons/nav. Set to 0 if the font changes. */
	--pt-fix-font: 3px;
    --pb-fix-font: 0px;


    /** if this is supporting safari **/
    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
        --pt-fix-font: 0px;
        --pb-fix-font: 1px;
    }
    &.mac_chrome{

        --pt-fix-font: 0px;
        --pb-fix-font: 1px;
    }
}

/* ============================================================
 * Site-wide font default — Spectrum Sans
 * Declared on html/body so every element inherits it.
 * Rules in core*.css that use var(--font-family-*) still work
 * because those variables now resolve to Spectrum Sans.
 * No !important — precedence is handled via the normal cascade.
 * ============================================================ */
html,
body {
	font-family: var(--font-family-spectrum);
}

/* Form controls do not inherit font-family from the parent by default */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}