/* HELPERS TYPOGRAPHY SIZES */
.tt-font-step-5{
    font-size:var(--step-5)
}
.tt-font-step-4{
    font-size:var(--step-4)
}
.tt-font-step-3{
    font-size:var(--step-3)
}
.tt-font-step-2{
    font-size:var(--step-2)
}
.tt-font-step-1{
    font-size:var(--step-1)
}
.tt-font-step-0{
    font-size:var(--step-0)
}
.tt-font-step-negative-1{
    font-size:var(--step--1)
}
.tt-font-step-negative-2{
    font-size:var(--step--2)
}

/* TEXT */
.tt-paragraph {
    color:var(--paragraph-color);
    line-height: 1.4;
    max-width: 60ch;
}

.tt-paragraph sup {
    top: -0.1rem;
}

.tt-heading {
    color:var(--heading-color);
    line-height:1.1;
}
.tt-heading {
    font-family: "PP Valve Plain", sans-serif;
    font-weight: 600;
}
.tt-font-accent {
    font-family: "PP Valve Stencil", sans-serif;
}

.tt-highlight, .tt-accent {
    font-family: "PP Valve Stencil", sans-serif;
    color: var(--primary-color)
}

/* TEXT COLOR */
.tt-text {
    color: var(--paragraph-color);
}

.tt-text-accent {
    color: var(--accent-color);
}

.tt-text-primary {
    color: var(--primary-color);
}

.tt-text-danger {
    color: var(--danger-color);
}

.tt-text-warning {
    color: var(--warning-color);
}

.tt-text-info {
    color: var(--info-color);
}

.tt-text-success {
    color: var(--success-color);
}

.tt-text-muted {
    color: var(--text-muted);
}

/* LINKS */
.tt-link-highlight, .tt-link.tt-link-highlight {
    font-family: "PP Valve Stencil", sans-serif;
}

.tt-link-accent, .tt-link.tt-link-accent{
    color: var(--accent-color);
}

.tt-link-primary, .tt-link.tt-link-primary {
    color: var(--primary-color);
}

.tt-link {
    color: var(--link-color);
    display:flex;
    text-decoration: none;
    gap: var(--space-xs);
    cursor: pointer;
}

.tt-link:hover {
    color: var(--link-hover-color);
}

.tt-link-inline {
    display:inline;
}


/* ICONS */
.tt-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: text-bottom;
    display: inline-block;
    fill: currentColor;
    margin: 0 0.25em;
}

.tt-icon-wrapper {
    width: 1.25em;
    height: 1.25em;
    vertical-align: text-bottom;
    position: relative;
    display: inline-block;
    margin: 0 0.25em;
}

.tt-icon-wrapper .tt-icon-fade,
.tt-theme-toggle .tt-icon-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-icon-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute; /* prevent layout shift */
}

/* override for theme-toggle in app. */
[data-headerbg] .header-right .nav-item .tt-icon-wrapper svg.tt-no-stroke path {
    stroke:none;
}

/*LIST STYLES */
.tt-list {
    margin: 20px;
    padding-left: 20px;
    line-height: 1.6;
    color: var(--paragraph-color);
}

.tt-numbered-list {
    list-style-type: decimal;
}

.tt-circled-list {
    list-style-type: circle;
}

.tt-list li {
    margin-bottom: 10px; /* Adds space between list items */
}