/* 
 Theme Name:   TBS
 Theme URI:    
 Description:  
 Author:       Chrissy
 Author URI:   
 Template:     generatepress
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/



html {
    font-size: 62.5%;
}
:root, :root.cf-theme-dark .cf-theme-inverted, :root.cf-theme-dark .theme-always-light, :root.cf-theme-light .cf-theme-inverted .theme-always-light {
    --cfv-min-screen-width: 320px;
    --cfv-max-screen-width: 1120px;
    --cfv-space-xs: clamp(0.8rem, calc(0.5vw + 0.64rem), 1.2rem);
    --cfv-space-s: clamp(1.2rem, calc(0.5vw + 1.04rem), 1.6rem);
    --cfv-space-m: clamp(1.6rem, calc(0.5vw + 1.44rem), 2rem);
    --cfv-space-l: clamp(1.8rem, calc(0.88vw + 1.52rem), 2.5rem);
    --cfv-space-xl: clamp(2rem, calc(1.25vw + 1.6rem), 3rem);
    --cfv-space-2xl: clamp(2.4rem, calc(2vw + 1.76rem), 4rem);
    --cfv-space-3xl: clamp(3rem, calc(2.25vw + 2.28rem), 4.8rem);
    --cfv-space-4xl: clamp(3.6rem, calc(3vw + 2.64rem), 6rem);
    --cfv-text-s: clamp(1.2rem, calc(0.25vw + 1.12rem), 1.4rem);
    --cfv-text-m: clamp(1.6rem, calc(0.25vw + 1.52rem), 1.6rem);
    --cfv-text-l: clamp(1.8rem, calc(0.5vw + 1.64rem), 2.2rem);
    --cfv-text-xl: clamp(2rem, calc(1vw + 1.68rem), 2.8rem);
    --cfv-text-2xl: clamp(2.2rem, calc(1.75vw + 1.64rem), 3.6rem);
    --cfv-text-3xl: clamp(2.6rem, calc(2.25vw + 1.88rem), 4.4rem);
    --cfv-text-4xl: clamp(3.2rem, calc(3vw + 2.24rem), 5.6rem);
    --cfv-text-5xl: clamp(4.2rem, calc(4.25vw + 2.84rem), 7.6rem);
    --cfv-hero-title-size: var(--cfv-text-5xl);
    --cfv-post-title-size: var(--cfv-text-2xl);
    --cfv-nav-link-size: var(--cfv-text-m);
}
/* Components */
.cf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cfv-space-m);
    padding: var(--cfv-space-m) var(--cfv-space-l);
    background: var(--primary);
    color: #fff;
    font-size: var(--cfv-text-l);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: 1px solid var(--primary-d-1);
    box-shadow: var(--shadow-m);
    transition: all 0.25s ease-in-out;
    outline: 0;
    cursor: pointer;
}
.cf-btn:hover {
    background: var(--primary-d-1);
    transform: translateY(-0.1rem);
}
.cf-btn.small {
    font-size: var(--cfv-text-s);
    padding: var(--cfv-space-xs) var(--cfv-space-s);
}
.cf-btn.large {
    font-size: var(--cfv-text-l);
    padding: var(--cfv-space-s) var(--cfv-space-m);
}
.cf-btn.tertiary {
    background: var(--tertiary);
    border-color: var(--tertiary-d-1);
}
.cf-btn.ghost {
    color: var(--dark-80);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.cf-btn.slight {
    color: var(--dark-80);
    background: var(--bg-surface);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-s);
}
.cf-btn.secondary {
    background: var(--secondary);
    border-color: var(--secondary-d-1);
}
.cf-btn.ghost:hover {
    background: var(--dark-10);
}
.cf-btn.slight:hover {
    background: var(--dark-5);
}
.cf-btn.tertiary:hover {
    background: var(--tertiary-d-1);
}
.cf-btn.secondary:hover {
    background: var(--secondary-d-1);
}
.cf-btn:focus {
    outline: 4px solid var(--primary-l-3);
    outline-offset: 2px;
}
.cf-btn.no-bg {
    color: var(--dark-80);
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}
.cf-btn.no-bg:hover {
    color: var(--dark);
}
.cf-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xs);
    padding: var(--space-2xs) var(--cfv-space-s);
    background: var(--dark-10);
    color: var(--primary);
    font-size: var(--cfv-text-s);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 0;
    outline: 0;
}
.cf-badge.secondary {
    color: var(--secondary);
}
.cf-link {
    color: var(--primary);
    font-size: var(--cfv-text-m);
    font-weight: 600;
    letter-spacing: 0.05rem;
    box-shadow: 0 2px 0 var(--primary-20);
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.cf-link:hover {
    box-shadow: 0 2px 0 var(--primary-40);
}
.cf-link:focus {
    background: var(--primary-10);
}
.cf-link.secondary {
    color: var(--secondary);
    border-color: var(--secondary-20);
}
.cf-link.tertiary {
    color: var(--tertiary);
    border-color: var(--tertiary-20);
}
.cf-input {
    padding: var(--cfv-space-xs) var(--cfv-space-s);
    background: var(--dark-5);
    color: var(--text-title);
    font-size: var(--cfv-text-m);
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    appearance: none;
    outline: 0;
}
.cf-input:focus {
    background: var(--primary-20);
    border-color: var(--primary);
    box-shadow: var(--shadow-l);
}
.cf-input:hover {
    border-color: var(--primary);
    background: transparent;
    box-shadow: var(--shadow-l);
}
.cf-input::placeholder {
    color: var(--dark-40);
}
.cf-input:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.cf-input:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}
.cf-select {
    padding: var(--cfv-space-xs) var(--cfv-space-s);
    background: var(--dark-5);
    color: var(--text-body);
    font-size: var(--cfv-text-m);
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    outline: 0;
}
.cf-select:focus {
    background: var(--primary-20);
    border-color: var(--primary);
}
.cf-select:hover {
    border-color: var(--primary);
}
.cf-select::placeholder {
    color: var(--dark-40);
}
.cf-select:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.cf-select:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}
.cf-card {
    display: grid;
    gap: var(--cfv-space-xs);
    padding: var(--cfv-space-m);
    font-size: var(--cfv-text-m);
    color: var(--text-body);
    background: var(--bg-surface);
    line-height: 1.3;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
}
.cf-card.secondary {
    background: var(--secondary);
    color: #fff;
}
.cf-card.primary {
    background: var(--primary);
    color: #fff;
}
.cf-icon {
    color: var(--primary);
    width: var(--cfv-space-2xl);
    height: auto;
    font-size: var(--cfv-space-2xl);
}
.cf-icon.large {
    width: var(--cfv-space-3xl);
    font-size: var(--cfv-space-3xl);
}
.cf-icon.secondary {
    color: var(--secondary);
}
.cf-icon.tertiary {
    color: var(--tertiary);
}
.cf-icon.outline {
    padding: 0.5em;
    border: 1px solid var(--border-primary);
    border-radius: 100%;
    box-sizing: content-box;
}
.cf-icon.filled {
    padding: 0.5em;
    border-radius: 100%;
    box-sizing: content-box;
    background: var(--dark-10);
}
.cf-icon.small {
    width: var(--cfv-space-l);
    font-size: var(--cfv-space-l);
}
.cf-avatar {
    width: var(--cfv-space-2xl);
    height: var(--cfv-space-2xl);
    border-radius: 100%;
    box-shadow: var(--shadow-m);
    object-fit: cover;
}
.cf-avatar.small {
    width: var(--cfv-space-l);
    height: var(--cfv-space-l);
}
.cf-avatar.large {
    width: var(--cfv-space-4xl);
    height: var(--cfv-space-4xl);
}
.cf-divider {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    height: 1px;
    max-height: 1px;
    background: var(--border-primary);
    margin: var(--cfv-space-m) 0;
    border: 0;
}
.cf-divider.vertical {
    min-width: 1px;
    width: 1px;
    max-width: 1px;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}
.cf-checkbox {
    appearance: none;
    display: grid;
    place-content: center;
    border: 2px solid var(--dark-40);
    border-radius: var(--radius-s);
    width: clamp(1.8rem, calc(-0.5vw + 2.36rem), 2.2rem);
    height: clamp(1.8rem, calc(-0.5vw + 2.36rem), 2.2rem);
}
.cf-checkbox:checked:before {
    transform: scale(1);
}
.cf-checkbox::before {
    content: "";
    width: 1em;
    height: 1em;
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.2s;
}
.cf-checkbox:hover {
    border-color: var(--primary);
}
.cf-checkbox:focus {
    outline: 3px solid var(--primary-l-3);
    outline-offset: 2px;
}
.cf-checkbox:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.cf-radio {
    appearance: none;
    display: grid;
    place-content: center;
    border: 2px solid var(--dark-40);
    border-radius: var(--radius-full);
    width: clamp(1.8rem, calc(-0.5vw + 2.36rem), 2.2rem);
    height: clamp(1.8rem, calc(-0.5vw + 2.36rem), 2.2rem);
}
.cf-radio:checked:before {
    transform: scale(1);
}
.cf-radio::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 100%;
    transform: scale(0);
    transition: transform 0.2s;
    background: var(--primary);
}
.cf-radio:hover {
    border-color: var(--primary);
}
.cf-radio:focus {
    outline: 3px solid var(--primary-l-3);
    outline-offset: 2px;
}
.cf-radio:checked {
    border-color: var(--primary);
}
/* Color System */
.cf-bg-primary {
    background-color: var(--primary);
}
.cf-bg-primary-5 {
    background-color: var(--primary-5);
}
.cf-bg-primary-10 {
    background-color: var(--primary-10);
}
.cf-bg-primary-20 {
    background-color: var(--primary-20);
}
.cf-bg-primary-30 {
    background-color: var(--primary-30);
}
.cf-bg-primary-40 {
    background-color: var(--primary-40);
}
.cf-bg-primary-50 {
    background-color: var(--primary-50);
}
.cf-bg-primary-60 {
    background-color: var(--primary-60);
}
.cf-bg-primary-70 {
    background-color: var(--primary-70);
}
.cf-bg-primary-80 {
    background-color: var(--primary-80);
}
.cf-bg-primary-90 {
    background-color: var(--primary-90);
}
.cf-bg-primary-d-1 {
    background-color: var(--primary-d-1);
}
.cf-bg-primary-d-2 {
    background-color: var(--primary-d-2);
}
.cf-bg-primary-d-3 {
    background-color: var(--primary-d-3);
}
.cf-bg-primary-d-4 {
    background-color: var(--primary-d-4);
}
.cf-bg-primary-l-1 {
    background-color: var(--primary-l-1);
}
.cf-bg-primary-l-2 {
    background-color: var(--primary-l-2);
}
.cf-bg-primary-l-3 {
    background-color: var(--primary-l-3);
}
.cf-bg-primary-l-4 {
    background-color: var(--primary-l-4);
}
.cf-text-primary {
    color: var(--primary);
}
.cf-text-primary-5 {
    color: var(--primary-5);
}
.cf-text-primary-10 {
    color: var(--primary-10);
}
.cf-text-primary-20 {
    color: var(--primary-20);
}
.cf-text-primary-30 {
    color: var(--primary-30);
}
.cf-text-primary-40 {
    color: var(--primary-40);
}
.cf-text-primary-50 {
    color: var(--primary-50);
}
.cf-text-primary-60 {
    color: var(--primary-60);
}
.cf-text-primary-70 {
    color: var(--primary-70);
}
.cf-text-primary-80 {
    color: var(--primary-80);
}
.cf-text-primary-90 {
    color: var(--primary-90);
}
.cf-text-primary-d-1 {
    color: var(--primary-d-1);
}
.cf-text-primary-d-2 {
    color: var(--primary-d-2);
}
.cf-text-primary-d-3 {
    color: var(--primary-d-3);
}
.cf-text-primary-d-4 {
    color: var(--primary-d-4);
}
.cf-text-primary-l-1 {
    color: var(--primary-l-1);
}
.cf-text-primary-l-2 {
    color: var(--primary-l-2);
}
.cf-text-primary-l-3 {
    color: var(--primary-l-3);
}
.cf-text-primary-l-4 {
    color: var(--primary-l-4);
}
.cf-border-primary {
    border-color: var(--primary);
    border-color: var(--border-primary);
}
.cf-border-primary-5 {
    border-color: var(--primary-5);
    border-color: var(--border-primary-5);
}
.cf-border-primary-10 {
    border-color: var(--primary-10);
    border-color: var(--border-primary-10);
}
.cf-border-primary-20 {
    border-color: var(--primary-20);
    border-color: var(--border-primary-20);
}
.cf-border-primary-30 {
    border-color: var(--primary-30);
    border-color: var(--border-primary-30);
}
.cf-border-primary-40 {
    border-color: var(--primary-40);
    border-color: var(--border-primary-40);
}
.cf-border-primary-50 {
    border-color: var(--primary-50);
    border-color: var(--border-primary-50);
}
.cf-border-primary-60 {
    border-color: var(--primary-60);
    border-color: var(--border-primary-60);
}
.cf-border-primary-70 {
    border-color: var(--primary-70);
    border-color: var(--border-primary-70);
}
.cf-border-primary-80 {
    border-color: var(--primary-80);
    border-color: var(--border-primary-80);
}
.cf-border-primary-90 {
    border-color: var(--primary-90);
    border-color: var(--border-primary-90);
}
.cf-border-primary-d-1 {
    border-color: var(--primary-d-1);
}
.cf-border-primary-d-2 {
    border-color: var(--primary-d-2);
}
.cf-border-primary-d-3 {
    border-color: var(--primary-d-3);
}
.cf-border-primary-d-4 {
    border-color: var(--primary-d-4);
}
.cf-border-primary-l-1 {
    border-color: var(--primary-l-1);
}
.cf-border-primary-l-2 {
    border-color: var(--primary-l-2);
}
.cf-border-primary-l-3 {
    border-color: var(--primary-l-3);
}
.cf-border-primary-l-4 {
    border-color: var(--primary-l-4);
}
.cf-bg-secondary {
    background-color: var(--secondary);
}
.cf-bg-secondary-5 {
    background-color: var(--secondary-5);
}
.cf-bg-secondary-10 {
    background-color: var(--secondary-10);
}
.cf-bg-secondary-20 {
    background-color: var(--secondary-20);
}
.cf-bg-secondary-30 {
    background-color: var(--secondary-30);
}
.cf-bg-secondary-40 {
    background-color: var(--secondary-40);
}
.cf-bg-secondary-50 {
    background-color: var(--secondary-50);
}
.cf-bg-secondary-60 {
    background-color: var(--secondary-60);
}
.cf-bg-secondary-70 {
    background-color: var(--secondary-70);
}
.cf-bg-secondary-80 {
    background-color: var(--secondary-80);
}
.cf-bg-secondary-90 {
    background-color: var(--secondary-90);
}
.cf-bg-secondary-d-1 {
    background-color: var(--secondary-d-1);
}
.cf-bg-secondary-d-2 {
    background-color: var(--secondary-d-2);
}
.cf-bg-secondary-d-3 {
    background-color: var(--secondary-d-3);
}
.cf-bg-secondary-d-4 {
    background-color: var(--secondary-d-4);
}
.cf-bg-secondary-l-1 {
    background-color: var(--secondary-l-1);
}
.cf-bg-secondary-l-2 {
    background-color: var(--secondary-l-2);
}
.cf-bg-secondary-l-3 {
    background-color: var(--secondary-l-3);
}
.cf-bg-secondary-l-4 {
    background-color: var(--secondary-l-4);
}
.cf-text-secondary {
    color: var(--secondary);
}
.cf-text-secondary-5 {
    color: var(--secondary-5);
}
.cf-text-secondary-10 {
    color: var(--secondary-10);
}
.cf-text-secondary-20 {
    color: var(--secondary-20);
}
.cf-text-secondary-30 {
    color: var(--secondary-30);
}
.cf-text-secondary-40 {
    color: var(--secondary-40);
}
.cf-text-secondary-50 {
    color: var(--secondary-50);
}
.cf-text-secondary-60 {
    color: var(--secondary-60);
}
.cf-text-secondary-70 {
    color: var(--secondary-70);
}
.cf-text-secondary-80 {
    color: var(--secondary-80);
}
.cf-text-secondary-90 {
    color: var(--secondary-90);
}
.cf-text-secondary-d-1 {
    color: var(--secondary-d-1);
}
.cf-text-secondary-d-2 {
    color: var(--secondary-d-2);
}
.cf-text-secondary-d-3 {
    color: var(--secondary-d-3);
}
.cf-text-secondary-d-4 {
    color: var(--secondary-d-4);
}
.cf-text-secondary-l-1 {
    color: var(--secondary-l-1);
}
.cf-text-secondary-l-2 {
    color: var(--secondary-l-2);
}
.cf-text-secondary-l-3 {
    color: var(--secondary-l-3);
}
.cf-text-secondary-l-4 {
    color: var(--secondary-l-4);
}
.cf-border-secondary {
    border-color: var(--secondary);
}
.cf-border-secondary-5 {
    border-color: var(--secondary-5);
}
.cf-border-secondary-10 {
    border-color: var(--secondary-10);
}
.cf-border-secondary-20 {
    border-color: var(--secondary-20);
}
.cf-border-secondary-30 {
    border-color: var(--secondary-30);
}
.cf-border-secondary-40 {
    border-color: var(--secondary-40);
}
.cf-border-secondary-50 {
    border-color: var(--secondary-50);
}
.cf-border-secondary-60 {
    border-color: var(--secondary-60);
}
.cf-border-secondary-70 {
    border-color: var(--secondary-70);
}
.cf-border-secondary-80 {
    border-color: var(--secondary-80);
}
.cf-border-secondary-90 {
    border-color: var(--secondary-90);
}
.cf-border-secondary-d-1 {
    border-color: var(--secondary-d-1);
}
.cf-border-secondary-d-2 {
    border-color: var(--secondary-d-2);
}
.cf-border-secondary-d-3 {
    border-color: var(--secondary-d-3);
}
.cf-border-secondary-d-4 {
    border-color: var(--secondary-d-4);
}
.cf-border-secondary-l-1 {
    border-color: var(--secondary-l-1);
}
.cf-border-secondary-l-2 {
    border-color: var(--secondary-l-2);
}
.cf-border-secondary-l-3 {
    border-color: var(--secondary-l-3);
}
.cf-border-secondary-l-4 {
    border-color: var(--secondary-l-4);
}
.cf-bg-accent {
    background-color: var(--accent);
}
.cf-bg-accent-5 {
    background-color: var(--accent-5);
}
.cf-bg-accent-10 {
    background-color: var(--accent-10);
}
.cf-bg-accent-20 {
    background-color: var(--accent-20);
}
.cf-bg-accent-30 {
    background-color: var(--accent-30);
}
.cf-bg-accent-40 {
    background-color: var(--accent-40);
}
.cf-bg-accent-50 {
    background-color: var(--accent-50);
}
.cf-bg-accent-60 {
    background-color: var(--accent-60);
}
.cf-bg-accent-70 {
    background-color: var(--accent-70);
}
.cf-bg-accent-80 {
    background-color: var(--accent-80);
}
.cf-bg-accent-90 {
    background-color: var(--accent-90);
}
.cf-bg-accent-d-1 {
    background-color: var(--accent-d-1);
}
.cf-bg-accent-d-2 {
    background-color: var(--accent-d-2);
}
.cf-bg-accent-d-3 {
    background-color: var(--accent-d-3);
}
.cf-bg-accent-d-4 {
    background-color: var(--accent-d-4);
}
.cf-bg-accent-l-1 {
    background-color: var(--accent-l-1);
}
.cf-bg-accent-l-2 {
    background-color: var(--accent-l-2);
}
.cf-bg-accent-l-3 {
    background-color: var(--accent-l-3);
}
.cf-bg-accent-l-4 {
    background-color: var(--accent-l-4);
}
.cf-text-accent {
    color: var(--accent);
}
.cf-text-accent-5 {
    color: var(--accent-5);
}
.cf-text-accent-10 {
    color: var(--accent-10);
}
.cf-text-accent-20 {
    color: var(--accent-20);
}
.cf-text-accent-30 {
    color: var(--accent-30);
}
.cf-text-accent-40 {
    color: var(--accent-40);
}
.cf-text-accent-50 {
    color: var(--accent-50);
}
.cf-text-accent-60 {
    color: var(--accent-60);
}
.cf-text-accent-70 {
    color: var(--accent-70);
}
.cf-text-accent-80 {
    color: var(--accent-80);
}
.cf-text-accent-90 {
    color: var(--accent-90);
}
.cf-text-accent-d-1 {
    color: var(--accent-d-1);
}
.cf-text-accent-d-2 {
    color: var(--accent-d-2);
}
.cf-text-accent-d-3 {
    color: var(--accent-d-3);
}
.cf-text-accent-d-4 {
    color: var(--accent-d-4);
}
.cf-text-accent-l-1 {
    color: var(--accent-l-1);
}
.cf-text-accent-l-2 {
    color: var(--accent-l-2);
}
.cf-text-accent-l-3 {
    color: var(--accent-l-3);
}
.cf-text-accent-l-4 {
    color: var(--accent-l-4);
}
.cf-border-accent {
    border-color: var(--accent);
}
.cf-border-accent-5 {
    border-color: var(--accent-5);
}
.cf-border-accent-10 {
    border-color: var(--accent-10);
}
.cf-border-accent-20 {
    border-color: var(--accent-20);
}
.cf-border-accent-30 {
    border-color: var(--accent-30);
}
.cf-border-accent-40 {
    border-color: var(--accent-40);
}
.cf-border-accent-50 {
    border-color: var(--accent-50);
}
.cf-border-accent-60 {
    border-color: var(--accent-60);
}
.cf-border-accent-70 {
    border-color: var(--accent-70);
}
.cf-border-accent-80 {
    border-color: var(--accent-80);
}
.cf-border-accent-90 {
    border-color: var(--accent-90);
}
.cf-border-accent-d-1 {
    border-color: var(--accent-d-1);
}
.cf-border-accent-d-2 {
    border-color: var(--accent-d-2);
}
.cf-border-accent-d-3 {
    border-color: var(--accent-d-3);
}
.cf-border-accent-d-4 {
    border-color: var(--accent-d-4);
}
.cf-border-accent-l-1 {
    border-color: var(--accent-l-1);
}
.cf-border-accent-l-2 {
    border-color: var(--accent-l-2);
}
.cf-border-accent-l-3 {
    border-color: var(--accent-l-3);
}
.cf-border-accent-l-4 {
    border-color: var(--accent-l-4);
}
.cf-bg-body {
    background-color: var(--bg-body);
}
.cf-bg-surface {
    background-color: var(--bg-surface);
}
.cf-text-body {
    color: var(--text-body);
}
.cf-text-title {
    color: var(--text-title);
}
.cf-bg-light {
    background-color: var(--light);
}
.cf-bg-light-5 {
    background-color: var(--light-5);
}
.cf-bg-light-10 {
    background-color: var(--light-10);
}
.cf-bg-light-20 {
    background-color: var(--light-20);
}
.cf-bg-light-30 {
    background-color: var(--light-30);
}
.cf-bg-light-40 {
    background-color: var(--light-40);
}
.cf-bg-light-50 {
    background-color: var(--light-50);
}
.cf-bg-light-60 {
    background-color: var(--light-60);
}
.cf-bg-light-70 {
    background-color: var(--light-70);
}
.cf-bg-light-80 {
    background-color: var(--light-80);
}
.cf-bg-light-90 {
    background-color: var(--light-90);
}
.cf-bg-light-d-1 {
    background-color: var(--light-d-1);
}
.cf-bg-light-d-2 {
    background-color: var(--light-d-2);
}
.cf-bg-light-d-3 {
    background-color: var(--light-d-3);
}
.cf-bg-light-d-4 {
    background-color: var(--light-d-4);
}
.cf-bg-light-d-5 {
    background-color: var(--light-d-5);
}
.cf-bg-light-d-6 {
    background-color: var(--light-d-6);
}
.cf-bg-light-d-7 {
    background-color: var(--light-d-7);
}
.cf-bg-light-d-8 {
    background-color: var(--light-d-8);
}
.cf-bg-light-l-1 {
    background-color: var(--light-l-1);
}
.cf-bg-light-l-2 {
    background-color: var(--light-l-2);
}
.cf-bg-light-l-3 {
    background-color: var(--light-l-3);
}
.cf-bg-light-l-4 {
    background-color: var(--light-l-4);
}
.cf-bg-light-l-5 {
    background-color: var(--light-l-5);
}
.cf-bg-light-l-6 {
    background-color: var(--light-l-6);
}
.cf-bg-light-l-7 {
    background-color: var(--light-l-7);
}
.cf-bg-light-l-8 {
    background-color: var(--light-l-8);
}
.cf-text-light {
    color: var(--light);
}
.cf-text-light-5 {
    color: var(--light-5);
}
.cf-text-light-10 {
    color: var(--light-10);
}
.cf-text-light-20 {
    color: var(--light-20);
}
.cf-text-light-30 {
    color: var(--light-30);
}
.cf-text-light-40 {
    color: var(--light-40);
}
.cf-text-light-50 {
    color: var(--light-50);
}
.cf-text-light-60 {
    color: var(--light-60);
}
.cf-text-light-70 {
    color: var(--light-70);
}
.cf-text-light-80 {
    color: var(--light-80);
}
.cf-text-light-90 {
    color: var(--light-90);
}
.cf-text-light-d-1 {
    color: var(--light-d-1);
}
.cf-text-light-d-2 {
    color: var(--light-d-2);
}
.cf-text-light-d-3 {
    color: var(--light-d-3);
}
.cf-text-light-d-4 {
    color: var(--light-d-4);
}
.cf-text-light-d-5 {
    color: var(--light-d-5);
}
.cf-text-light-d-6 {
    color: var(--light-d-6);
}
.cf-text-light-d-7 {
    color: var(--light-d-7);
}
.cf-text-light-d-8 {
    color: var(--light-d-8);
}
.cf-text-light-l-1 {
    color: var(--light-l-1);
}
.cf-text-light-l-2 {
    color: var(--light-l-2);
}
.cf-text-light-l-3 {
    color: var(--light-l-3);
}
.cf-text-light-l-4 {
    color: var(--light-l-4);
}
.cf-text-light-l-5 {
    color: var(--light-l-5);
}
.cf-text-light-l-6 {
    color: var(--light-l-6);
}
.cf-text-light-l-7 {
    color: var(--light-l-7);
}
.cf-text-light-l-8 {
    color: var(--light-l-8);
}
.cf-border-light {
    border-color: var(--light);
}
.cf-border-light-5 {
    border-color: var(--light-5);
}
.cf-border-light-10 {
    border-color: var(--light-10);
}
.cf-border-light-20 {
    border-color: var(--light-20);
}
.cf-border-light-30 {
    border-color: var(--light-30);
}
.cf-border-light-40 {
    border-color: var(--light-40);
}
.cf-border-light-50 {
    border-color: var(--light-50);
}
.cf-border-light-60 {
    border-color: var(--light-60);
}
.cf-border-light-70 {
    border-color: var(--light-70);
}
.cf-border-light-80 {
    border-color: var(--light-80);
}
.cf-border-light-90 {
    border-color: var(--light-90);
}
.cf-border-light-d-1 {
    border-color: var(--light-d-1);
}
.cf-border-light-d-2 {
    border-color: var(--light-d-2);
}
.cf-border-light-d-3 {
    border-color: var(--light-d-3);
}
.cf-border-light-d-4 {
    border-color: var(--light-d-4);
}
.cf-border-light-d-5 {
    border-color: var(--light-d-5);
}
.cf-border-light-d-6 {
    border-color: var(--light-d-6);
}
.cf-border-light-d-7 {
    border-color: var(--light-d-7);
}
.cf-border-light-d-8 {
    border-color: var(--light-d-8);
}
.cf-border-light-l-1 {
    border-color: var(--light-l-1);
}
.cf-border-light-l-2 {
    border-color: var(--light-l-2);
}
.cf-border-light-l-3 {
    border-color: var(--light-l-3);
}
.cf-border-light-l-4 {
    border-color: var(--light-l-4);
}
.cf-border-light-l-5 {
    border-color: var(--light-l-5);
}
.cf-border-light-l-6 {
    border-color: var(--light-l-6);
}
.cf-border-light-l-7 {
    border-color: var(--light-l-7);
}
.cf-border-light-l-8 {
    border-color: var(--light-l-8);
}
.cf-fill-light {
    fill: var(--light);
}
.cf-fill-light-5 {
    fill: var(--light-5);
}
.cf-fill-light-10 {
    fill: var(--light-10);
}
.cf-fill-light-20 {
    fill: var(--light-20);
}
.cf-fill-light-30 {
    fill: var(--light-30);
}
.cf-fill-light-40 {
    fill: var(--light-40);
}
.cf-fill-light-50 {
    fill: var(--light-50);
}
.cf-fill-light-60 {
    fill: var(--light-60);
}
.cf-fill-light-70 {
    fill: var(--light-70);
}
.cf-fill-light-80 {
    fill: var(--light-80);
}
.cf-fill-light-90 {
    fill: var(--light-90);
}
.cf-fill-light-d-1 {
    fill: var(--light-d-1);
}
.cf-fill-light-d-2 {
    fill: var(--light-d-2);
}
.cf-fill-light-d-3 {
    fill: var(--light-d-3);
}
.cf-fill-light-d-4 {
    fill: var(--light-d-4);
}
.cf-fill-light-d-5 {
    fill: var(--light-d-5);
}
.cf-fill-light-d-6 {
    fill: var(--light-d-6);
}
.cf-fill-light-d-7 {
    fill: var(--light-d-7);
}
.cf-fill-light-d-8 {
    fill: var(--light-d-8);
}
.cf-fill-light-l-1 {
    fill: var(--light-l-1);
}
.cf-fill-light-l-2 {
    fill: var(--light-l-2);
}
.cf-fill-light-l-3 {
    fill: var(--light-l-3);
}
.cf-fill-light-l-4 {
    fill: var(--light-l-4);
}
.cf-fill-light-l-5 {
    fill: var(--light-l-5);
}
.cf-fill-light-l-6 {
    fill: var(--light-l-6);
}
.cf-fill-light-l-7 {
    fill: var(--light-l-7);
}
.cf-fill-light-l-8 {
    fill: var(--light-l-8);
}
.cf-bg-dark {
    background-color: var(--dark);
}
.cf-bg-dark-5 {
    background-color: var(--dark-5);
}
.cf-bg-dark-10 {
    background-color: var(--dark-10);
}
.cf-bg-dark-20 {
    background-color: var(--dark-20);
}
.cf-bg-dark-30 {
    background-color: var(--dark-30);
}
.cf-bg-dark-40 {
    background-color: var(--dark-40);
}
.cf-bg-dark-50 {
    background-color: var(--dark-50);
}
.cf-bg-dark-60 {
    background-color: var(--dark-60);
}
.cf-bg-dark-70 {
    background-color: var(--dark-70);
}
.cf-bg-dark-80 {
    background-color: var(--dark-80);
}
.cf-bg-dark-90 {
    background-color: var(--dark-90);
}
.cf-text-dark {
    color: var(--dark);
}
.cf-text-dark-5 {
    color: var(--dark-5);
}
.cf-text-dark-10 {
    color: var(--dark-10);
}
.cf-text-dark-20 {
    color: var(--dark-20);
}
.cf-text-dark-30 {
    color: var(--dark-30);
}
.cf-text-dark-40 {
    color: var(--dark-40);
}
.cf-text-dark-50 {
    color: var(--dark-50);
}
.cf-text-dark-60 {
    color: var(--dark-60);
}
.cf-text-dark-70 {
    color: var(--dark-70);
}
.cf-text-dark-80 {
    color: var(--dark-80);
}
.cf-text-dark-90 {
    color: var(--dark-90);
}
.cf-border-dark {
    border-color: var(--dark);
}
.cf-border-dark-5 {
    border-color: var(--dark-5);
}
.cf-border-dark-10 {
    border-color: var(--dark-10);
}
.cf-border-dark-20 {
    border-color: var(--dark-20);
}
.cf-border-dark-30 {
    border-color: var(--dark-30);
}
.cf-border-dark-40 {
    border-color: var(--dark-40);
}
.cf-border-dark-50 {
    border-color: var(--dark-50);
}
.cf-border-dark-60 {
    border-color: var(--dark-60);
}
.cf-border-dark-70 {
    border-color: var(--dark-70);
}
.cf-border-dark-80 {
    border-color: var(--dark-80);
}
.cf-border-dark-90 {
    border-color: var(--dark-90);
}
.cf-fill-dark {
    fill: var(--dark);
}
.cf-fill-dark-5 {
    fill: var(--dark-5);
}
.cf-fill-dark-10 {
    fill: var(--dark-10);
}
.cf-fill-dark-20 {
    fill: var(--dark-20);
}
.cf-fill-dark-30 {
    fill: var(--dark-30);
}
.cf-fill-dark-40 {
    fill: var(--dark-40);
}
.cf-fill-dark-50 {
    fill: var(--dark-50);
}
.cf-fill-dark-60 {
    fill: var(--dark-60);
}
.cf-fill-dark-70 {
    fill: var(--dark-70);
}
.cf-fill-dark-80 {
    fill: var(--dark-80);
}
.cf-fill-dark-90 {
    fill: var(--dark-90);
}
.cf-bg-success {
    background-color: var(--success);
}
.cf-bg-success-5 {
    background-color: var(--success-5);
}
.cf-bg-success-10 {
    background-color: var(--success-10);
}
.cf-bg-success-20 {
    background-color: var(--success-20);
}
.cf-bg-success-30 {
    background-color: var(--success-30);
}
.cf-bg-success-40 {
    background-color: var(--success-40);
}
.cf-bg-success-50 {
    background-color: var(--success-50);
}
.cf-bg-success-60 {
    background-color: var(--success-60);
}
.cf-bg-success-70 {
    background-color: var(--success-70);
}
.cf-bg-success-80 {
    background-color: var(--success-80);
}
.cf-bg-success-90 {
    background-color: var(--success-90);
}
.cf-text-success {
    color: var(--success);
}
.cf-text-success-5 {
    color: var(--success-5);
}
.cf-text-success-10 {
    color: var(--success-10);
}
.cf-text-success-20 {
    color: var(--success-20);
}
.cf-text-success-30 {
    color: var(--success-30);
}
.cf-text-success-40 {
    color: var(--success-40);
}
.cf-text-success-50 {
    color: var(--success-50);
}
.cf-text-success-60 {
    color: var(--success-60);
}
.cf-text-success-70 {
    color: var(--success-70);
}
.cf-text-success-80 {
    color: var(--success-80);
}
.cf-text-success-90 {
    color: var(--success-90);
}
.cf-border-success {
    border-color: var(--success);
}
.cf-border-success-5 {
    border-color: var(--success-5);
}
.cf-border-success-10 {
    border-color: var(--success-10);
}
.cf-border-success-20 {
    border-color: var(--success-20);
}
.cf-border-success-30 {
    border-color: var(--success-30);
}
.cf-border-success-40 {
    border-color: var(--success-40);
}
.cf-border-success-50 {
    border-color: var(--success-50);
}
.cf-border-success-60 {
    border-color: var(--success-60);
}
.cf-border-success-70 {
    border-color: var(--success-70);
}
.cf-border-success-80 {
    border-color: var(--success-80);
}
.cf-border-success-90 {
    border-color: var(--success-90);
}
.cf-bg-error {
    background-color: var(--error);
}
.cf-bg-error-5 {
    background-color: var(--error-5);
}
.cf-bg-error-10 {
    background-color: var(--error-10);
}
.cf-bg-error-20 {
    background-color: var(--error-20);
}
.cf-bg-error-30 {
    background-color: var(--error-30);
}
.cf-bg-error-40 {
    background-color: var(--error-40);
}
.cf-bg-error-50 {
    background-color: var(--error-50);
}
.cf-bg-error-60 {
    background-color: var(--error-60);
}
.cf-bg-error-70 {
    background-color: var(--error-70);
}
.cf-bg-error-80 {
    background-color: var(--error-80);
}
.cf-bg-error-90 {
    background-color: var(--error-90);
}
.cf-text-error {
    color: var(--error);
}
.cf-text-error-5 {
    color: var(--error-5);
}
.cf-text-error-10 {
    color: var(--error-10);
}
.cf-text-error-20 {
    color: var(--error-20);
}
.cf-text-error-30 {
    color: var(--error-30);
}
.cf-text-error-40 {
    color: var(--error-40);
}
.cf-text-error-50 {
    color: var(--error-50);
}
.cf-text-error-60 {
    color: var(--error-60);
}
.cf-text-error-70 {
    color: var(--error-70);
}
.cf-text-error-80 {
    color: var(--error-80);
}
.cf-text-error-90 {
    color: var(--error-90);
}
.cf-border-error {
    border-color: var(--error);
}
.cf-border-error-5 {
    border-color: var(--error-5);
}
.cf-border-error-10 {
    border-color: var(--error-10);
}
.cf-border-error-20 {
    border-color: var(--error-20);
}
.cf-border-error-30 {
    border-color: var(--error-30);
}
.cf-border-error-40 {
    border-color: var(--error-40);
}
.cf-border-error-50 {
    border-color: var(--error-50);
}
.cf-border-error-60 {
    border-color: var(--error-60);
}
.cf-border-error-70 {
    border-color: var(--error-70);
}
.cf-border-error-80 {
    border-color: var(--error-80);
}
.cf-border-error-90 {
    border-color: var(--error-90);
}
/* Fluid Spacing */
.cf-padding-xs {
    padding: var(--cfv-space-xs);
}
.cf-padding-s {
    padding: var(--cfv-space-s);
}
.cf-padding-m {
    padding: var(--cfv-space-m);
}
.cf-padding-l {
    padding: var(--cfv-space-l);
}
.cf-padding-xl {
    padding: var(--cfv-space-xl);
}
.cf-padding-2xl {
    padding: var(--cfv-space-2xl);
}
.cf-padding-3xl {
    padding: var(--cfv-space-3xl);
}
.cf-padding-4xl {
    padding: var(--cfv-space-4xl);
}
.cf-padding-left-xs {
    padding-left: var(--cfv-space-xs);
}
.cf-padding-left-s {
    padding-left: var(--cfv-space-s);
}
.cf-padding-left-m {
    padding-left: var(--cfv-space-m);
}
.cf-padding-left-l {
    padding-left: var(--cfv-space-l);
}
.cf-padding-left-xl {
    padding-left: var(--cfv-space-xl);
}
.cf-padding-left-2xl {
    padding-left: var(--cfv-space-2xl);
}
.cf-padding-left-3xl {
    padding-left: var(--cfv-space-3xl);
}
.cf-padding-left-4xl {
    padding-left: var(--cfv-space-4xl);
}
.cf-padding-right-xs {
    padding-right: var(--cfv-space-xs);
}
.cf-padding-right-s {
    padding-right: var(--cfv-space-s);
}
.cf-padding-right-m {
    padding-right: var(--cfv-space-m);
}
.cf-padding-right-l {
    padding-right: var(--cfv-space-l);
}
.cf-padding-right-xl {
    padding-right: var(--cfv-space-xl);
}
.cf-padding-right-2xl {
    padding-right: var(--cfv-space-2xl);
}
.cf-padding-right-3xl {
    padding-right: var(--cfv-space-3xl);
}
.cf-padding-right-4xl {
    padding-right: var(--cfv-space-4xl);
}
.cf-padding-top-xs {
    padding-top: var(--cfv-space-xs);
}
.cf-padding-top-s {
    padding-top: var(--cfv-space-s);
}
.cf-padding-top-m {
    padding-top: var(--cfv-space-m);
}
.cf-padding-top-l {
    padding-top: var(--cfv-space-l);
}
.cf-padding-top-xl {
    padding-top: var(--cfv-space-xl);
}
.cf-padding-top-2xl {
    padding-top: var(--cfv-space-2xl);
}
.cf-padding-top-3xl {
    padding-top: var(--cfv-space-3xl);
}
.cf-padding-top-4xl {
    padding-top: var(--cfv-space-4xl);
}
.cf-padding-bottom-xs {
    padding-bottom: var(--cfv-space-xs);
}
.cf-padding-bottom-s {
    padding-bottom: var(--cfv-space-s);
}
.cf-padding-bottom-m {
    padding-bottom: var(--cfv-space-m);
}
.cf-padding-bottom-l {
    padding-bottom: var(--cfv-space-l);
}
.cf-padding-bottom-xl {
    padding-bottom: var(--cfv-space-xl);
}
.cf-padding-bottom-2xl {
    padding-bottom: var(--cfv-space-2xl);
}
.cf-padding-bottom-3xl {
    padding-bottom: var(--cfv-space-3xl);
}
.cf-padding-bottom-4xl {
    padding-bottom: var(--cfv-space-4xl);
}
.cf-padding-horizontal-xs {
    padding-left: var(--cfv-space-xs);
    padding-right: var(--cfv-space-xs);
}
.cf-padding-horizontal-s {
    padding-left: var(--cfv-space-s);
    padding-right: var(--cfv-space-s);
}
.cf-padding-horizontal-m {
    padding-left: var(--cfv-space-m);
    padding-right: var(--cfv-space-m);
}
.cf-padding-horizontal-l {
    padding-left: var(--cfv-space-l);
    padding-right: var(--cfv-space-l);
}
.cf-padding-horizontal-xl {
    padding-left: var(--cfv-space-xl);
    padding-right: var(--cfv-space-xl);
}
.cf-padding-horizontal-2xl {
    padding-left: var(--cfv-space-2xl);
    padding-right: var(--cfv-space-2xl);
}
.cf-padding-horizontal-3xl {
    padding-left: var(--cfv-space-3xl);
    padding-right: var(--cfv-space-3xl);
}
.cf-padding-horizontal-4xl {
    padding-left: var(--cfv-space-4xl);
    padding-right: var(--cfv-space-4xl);
}
.cf-padding-vertical-xs {
    padding-top: var(--cfv-space-xs);
    padding-bottom: var(--cfv-space-xs);
}
.cf-padding-vertical-s {
    padding-top: var(--cfv-space-s);
    padding-bottom: var(--cfv-space-s);
}
.cf-padding-vertical-m {
    padding-top: var(--cfv-space-m);
    padding-bottom: var(--cfv-space-m);
}
.cf-padding-vertical-l {
    padding-top: var(--cfv-space-l);
    padding-bottom: var(--cfv-space-l);
}
.cf-padding-vertical-xl {
    padding-top: var(--cfv-space-xl);
    padding-bottom: var(--cfv-space-xl);
}
.cf-padding-vertical-2xl {
    padding-top: var(--cfv-space-2xl);
    padding-bottom: var(--cfv-space-2xl);
}
.cf-padding-vertical-3xl {
    padding-top: var(--cfv-space-3xl);
    padding-bottom: var(--cfv-space-3xl);
}
.cf-padding-vertical-4xl {
    padding-top: var(--cfv-space-4xl);
    padding-bottom: var(--cfv-space-4xl);
}
.cf-margin-xs {
    margin: var(--cfv-space-xs);
}
.cf-margin-s {
    margin: var(--cfv-space-s);
}
.cf-margin-m {
    margin: var(--cfv-space-m);
}
.cf-margin-l {
    margin: var(--cfv-space-l);
}
.cf-margin-xl {
    margin: var(--cfv-space-xl);
}
.cf-margin-2xl {
    margin: var(--cfv-space-2xl);
}
.cf-margin-3xl {
    margin: var(--cfv-space-3xl);
}
.cf-margin-4xl {
    margin: var(--cfv-space-4xl);
}
.cf-margin-left-xs {
    margin-left: var(--cfv-space-xs);
}
.cf-margin-left-s {
    margin-left: var(--cfv-space-s);
}
.cf-margin-left-m {
    margin-left: var(--cfv-space-m);
}
.cf-margin-left-l {
    margin-left: var(--cfv-space-l);
}
.cf-margin-left-xl {
    margin-left: var(--cfv-space-xl);
}
.cf-margin-left-2xl {
    margin-left: var(--cfv-space-2xl);
}
.cf-margin-left-3xl {
    margin-left: var(--cfv-space-3xl);
}
.cf-margin-left-4xl {
    margin-left: var(--cfv-space-4xl);
}
.cf-margin-right-xs {
    margin-right: var(--cfv-space-xs);
}
.cf-margin-right-s {
    margin-right: var(--cfv-space-s);
}
.cf-margin-right-m {
    margin-right: var(--cfv-space-m);
}
.cf-margin-right-l {
    margin-right: var(--cfv-space-l);
}
.cf-margin-right-xl {
    margin-right: var(--cfv-space-xl);
}
.cf-margin-right-2xl {
    margin-right: var(--cfv-space-2xl);
}
.cf-margin-right-3xl {
    margin-right: var(--cfv-space-3xl);
}
.cf-margin-right-4xl {
    margin-right: var(--cfv-space-4xl);
}
.cf-margin-top-xs {
    margin-top: var(--cfv-space-xs);
}
.cf-margin-top-s {
    margin-top: var(--cfv-space-s);
}
.cf-margin-top-m {
    margin-top: var(--cfv-space-m);
}
.cf-margin-top-l {
    margin-top: var(--cfv-space-l);
}
.cf-margin-top-xl {
    margin-top: var(--cfv-space-xl);
}
.cf-margin-top-2xl {
    margin-top: var(--cfv-space-2xl);
}
.cf-margin-top-3xl {
    margin-top: var(--cfv-space-3xl);
}
.cf-margin-top-4xl {
    margin-top: var(--cfv-space-4xl);
}
.cf-margin-bottom-xs {
    margin-bottom: var(--cfv-space-xs);
}
.cf-margin-bottom-s {
    margin-bottom: var(--cfv-space-s);
}
.cf-margin-bottom-m {
    margin-bottom: var(--cfv-space-m);
}
.cf-margin-bottom-l {
    margin-bottom: var(--cfv-space-l);
}
.cf-margin-bottom-xl {
    margin-bottom: var(--cfv-space-xl);
}
.cf-margin-bottom-2xl {
    margin-bottom: var(--cfv-space-2xl);
}
.cf-margin-bottom-3xl {
    margin-bottom: var(--cfv-space-3xl);
}
.cf-margin-bottom-4xl {
    margin-bottom: var(--cfv-space-4xl);
}
.cf-margin-horizontal-xs {
    margin-left: var(--cfv-space-xs);
    margin-right: var(--cfv-space-xs);
}
.cf-margin-horizontal-s {
    margin-left: var(--cfv-space-s);
    margin-right: var(--cfv-space-s);
}
.cf-margin-horizontal-m {
    margin-left: var(--cfv-space-m);
    margin-right: var(--cfv-space-m);
}
.cf-margin-horizontal-l {
    margin-left: var(--cfv-space-l);
    margin-right: var(--cfv-space-l);
}
.cf-margin-horizontal-xl {
    margin-left: var(--cfv-space-xl);
    margin-right: var(--cfv-space-xl);
}
.cf-margin-horizontal-2xl {
    margin-left: var(--cfv-space-2xl);
    margin-right: var(--cfv-space-2xl);
}
.cf-margin-horizontal-3xl {
    margin-left: var(--cfv-space-3xl);
    margin-right: var(--cfv-space-3xl);
}
.cf-margin-horizontal-4xl {
    margin-left: var(--cfv-space-4xl);
    margin-right: var(--cfv-space-4xl);
}
.cf-margin-vertical-xs {
    margin-top: var(--cfv-space-xs);
    margin-bottom: var(--cfv-space-xs);
}
.cf-margin-vertical-s {
    margin-top: var(--cfv-space-s);
    margin-bottom: var(--cfv-space-s);
}
.cf-margin-vertical-m {
    margin-top: var(--cfv-space-m);
    margin-bottom: var(--cfv-space-m);
}
.cf-margin-vertical-l {
    margin-top: var(--cfv-space-l);
    margin-bottom: var(--cfv-space-l);
}
.cf-margin-vertical-xl {
    margin-top: var(--cfv-space-xl);
    margin-bottom: var(--cfv-space-xl);
}
.cf-margin-vertical-2xl {
    margin-top: var(--cfv-space-2xl);
    margin-bottom: var(--cfv-space-2xl);
}
.cf-margin-vertical-3xl {
    margin-top: var(--cfv-space-3xl);
    margin-bottom: var(--cfv-space-3xl);
}
.cf-margin-vertical-4xl {
    margin-top: var(--cfv-space-4xl);
    margin-bottom: var(--cfv-space-4xl);
}
.cf-gap-xs {
    gap: var(--cfv-space-xs);
}
.cf-gap-s {
    gap: var(--cfv-space-s);
}
.cf-gap-m {
    gap: var(--cfv-space-m);
}
.cf-gap-l {
    gap: var(--cfv-space-l);
}
.cf-gap-xl {
    gap: var(--cfv-space-xl);
}
.cf-gap-2xl {
    gap: var(--cfv-space-2xl);
}
.cf-gap-3xl {
    gap: var(--cfv-space-3xl);
}
.cf-gap-4xl {
    gap: var(--cfv-space-4xl);
}
/* Fluid Typography */
.cf-text-s {
    font-size: var(--cfv-text-s);
}
.cf-text-m {
    font-size: var(--cfv-text-m);
}
.cf-text-l {
    font-size: var(--cfv-text-l);
}
.cf-text-xl {
    font-size: var(--cfv-text-xl);
}
.cf-text-2xl {
    font-size: var(--cfv-text-2xl);
}
.cf-text-3xl {
    font-size: var(--cfv-text-3xl);
}
.cf-text-4xl {
    font-size: var(--cfv-text-4xl);
}
.cf-text-5xl {
    font-size: var(--cfv-text-5xl);
}
/* Contextual variables */
/* Headings */
H1 {
    font-size: var(--cfv-text-4xl);
    line-height: 1.2;
}
H2 {
    font-size: var(--cfv-text-3xl);
    line-height: 1.3;
}
H3 {
    font-size: var(--cfv-text-2xl);
    line-height: 1.3;
}
H4 {
    font-size: var(--cfv-text-xl);
    line-height: 1.3;
}
H5 {
    font-size: var(--cfv-text-l);
    line-height: 1.3;
}
H6 {
    font-size: var(--cfv-text-m);
    line-height: 1.4;
}
/* Line heights */
.cf-line-height-xs {
    line-height: 1;
}
.cf-line-height-s {
    line-height: 1.2;
}
.cf-line-height-m {
    line-height: 1.3;
}
.cf-line-height-l {
    line-height: 1.4;
}
.cf-line-height-xl {
    line-height: 1.5;
}
.cf-line-height-2xl {
    line-height: 1.8;
}
.cf-line-height-3xl {
    line-height: 2;
}
/* Text Modifiers */
.cf-italic {
    font-style: italic;
}
.cf-bold {
    font-weight: bold;
}
.cf-lowercase {
    text-transform: lowercase;
}
.cf-uppercase {
    text-transform: uppercase;
}
.cf-underline {
    text-decoration: underline;
}
.cf-font-100 {
    font-weight: 100;
}
.cf-font-200 {
    font-weight: 200;
}
.cf-font-300 {
    font-weight: 300;
}
.cf-font-400 {
    font-weight: 400;
}
.cf-font-500 {
    font-weight: 500;
}
.cf-font-600 {
    font-weight: 600;
}
.cf-font-700 {
    font-weight: 700;
}
.cf-font-800 {
    font-weight: 800;
}
.cf-font-900 {
    font-weight: 900;
}
/* Text Alignment */
.cf-text-left {
    text-align: left;
}
.cf-text-center {
    text-align: center;
}
.cf-text-right {
    text-align: right;
}
.cf-text-justify {
    text-align: justify;
}
/* Utilities */
.cf-display-none {
    display: none;
}
.cf-visible {
    visibility: visible;
}
.cf-hidden {
    visibility: hidden;
}
.cf-overflow-hidden {
    overflow: hidden;
}
.cf-overflow-auto {
    overflow: auto;
}
.cf-overflow-x-hidden {
    overflow-x: hidden;
}
.cf-overflow-x-auto {
    overflow-x: auto;
}
.cf-overflow-y-hidden {
    overflow-y: hidden;
}
.cf-overflow-y-auto {
    overflow-y: auto;
}
.cf-list-none {
    list-style-type: none;
}
.cf-white-space-nowrap {
    white-space: nowrap;
}
.cf-transition-global {
    transition: all 0.3s;
}
/* Positioning */
.cf-relative {
    position: relative;
}
.cf-absolute {
    position: absolute;
}
.cf-sticky {
    position: sticky;
}
.cf-fixed {
    position: fixed;
}
.cf-inset-0 {
    inset: 0;
}
.cf-bottom-0 {
    bottom: 0;
}
.cf-top-0 {
    top: 0;
}
.cf-left-0 {
    left: 0;
}
.cf-right-0 {
    right: 0;
}
/* Cursors */
.cf-pointer {
    cursor: pointer;
}
.cf-not-allowed {
    cursor: not-allowed;
}
.cf-cursor-auto {
    cursor: auto;
}
.cf-no-pointer-events {
    pointer-events: none;
}
/* Z-Index */
.cf-z--1 {
    z-index: -1;
}
.cf-z-0 {
    z-index: 0;
}
.cf-z-1 {
    z-index: 1;
}
.cf-z-10 {
    z-index: 10;
}
.cf-z-100 {
    z-index: 100;
}
.cf-z-1000 {
    z-index: 1000;
}
.cf-z-10000 {
    z-index: 10000;
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Custom Stylesheets */
/* Add your custom CSS here */