/* ==========================================================================
   TASC Brand Guidelines - core tokens, typography, buttons, links
   Source: TASC Brand Guidelines (2025)
   ========================================================================== */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap);

:root {
    /* Main palette */
    --tasc-navy: #05164F;
    --tasc-purple: #3E2993;
    --tasc-teal: #0093A2;
    --tasc-pink: #F80070;
    --tasc-green: #6D9529;
    --tasc-orange: #F06649;

    /* Extended palette - dark shades, used for hover/active states */
    --tasc-navy-dark: #04103B;
    --tasc-purple-dark: #2E1F6E;
    --tasc-teal-dark: #006E79;
    --tasc-pink-dark: #BA0054;
    --tasc-green-dark: #52701F;
    --tasc-orange-dark: #B44C37;

    /* Extended palette - neutrals (tints of navy), used for borders/backgrounds/muted text */
    --tasc-neutral-100: #E6E7ED;
    --tasc-neutral-200: #C0C5D3;
    --tasc-neutral-300: #828AA7;
    --tasc-neutral-600: #44507B;

    /* Extended palette - light tints, used for highlights/subtle backgrounds */
    --tasc-purple-tint: #EBE9F4;
    --tasc-teal-tint: #E5F4F6;
    --tasc-pink-tint: #FEE5F0;
    --tasc-green-tint: #F0F4E9;
    --tasc-orange-tint: #FDEFEC;

    --tasc-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Web type hierarchy, per brand guidelines */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tasc-font);
    color: var(--tasc-navy);
    font-weight: 700;
    margin: 0 0 12px 0;
}

h1 { font-size: 61px; line-height: 1.15; font-weight: 800; }
h2 { font-size: 49px; line-height: 1.15; font-weight: 800; }
h3 { font-size: 31px; line-height: 1.2; font-weight: 700; }
h4 { font-size: 25px; line-height: 1.25; font-weight: 700; }
h5 { font-size: 20px; line-height: 1.3; font-weight: 600; }
h6 { font-size: 16px; line-height: 1.3; font-weight: 600; }

p {
    font-family: var(--tasc-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tasc-navy);
}

/* Links / Secondary Links (5px bottom border static, same weight/color as buttons on hover) */
a {
    color: var(--tasc-purple);
    text-decoration: underline;
    text-decoration-color: var(--tasc-purple);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 600;
}

a:hover {
    color: var(--tasc-purple-dark);
    text-decoration-color: var(--tasc-purple-dark);
}

a:active {
    color: var(--tasc-purple-dark);
}

/* Primary buttons - pill shape, 50px radius, semibold 16px, per Web Components spec */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn {
    font-family: var(--tasc-font);
    font-weight: 600;
    font-size: 14px;
    color: #ffffff !important;
    background-color: var(--tasc-purple);
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    display: inline-block;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.btn:hover,
a.btn:hover {
    background-color: var(--tasc-purple-dark);
    color: #ffffff !important;
}

button:disabled,
input:disabled {
    background-color: var(--tasc-neutral-200);
    color: #ffffff !important;
    cursor: default;
}

/* Secondary / outline button variant */
.btn_g,
a.btn_g {
    background-color: var(--tasc-neutral-300) !important;
}

.btn_g:hover,
a.btn_g:hover {
    background-color: var(--tasc-purple-dark) !important;
}