:root{
    /* Base Colors*/
    --sarah-purple: #D2C8F9;
    --sarah-black: #000;
    --sarah-red: #F9C8C8;
    --sarah-green: rgb(173, 210, 173);
    --sarah-blue: #;
    /* Color roless*/
    --sarah-color-primary: var(--sarah-purple);
    --sarah-color-background: #F7F5FF;
    --sarah-color-border: #D2C8F9;
    --sarah-color-text: var(--sarah-black);
    --sarah-color-text-subtle: #5e5e5e;
    --sarah-color-button: var(--sarah-black);
    --sarah-color-button-on: var(--sarah-color-background);
    --sarah-color-button-hover: var(--sarah-color-primary);
    --sarah-color-button-hover-on: var(--sarah-color-button);
    --sarah-color-button-press: color-mix(in oklab, var(--sarah-color-primary), var(--sarah-black) 10%);
    --sarah-color-link: var(--sarah-black);
    --sarah-color-link-hover: color-mix(in oklab, var(--sarah-color-primary), var(--sarah-black) 50%);
    --sarah-color-link-press: color-mix(in oklab, var(--sarah-color-primary), var(--sarah-black) 30%);
    --sarah-color-img-border: var(--sarah-black);

    /* Text Sizes */
    --sarah-text-s: 0.875rem;
    --sarah-text-m: 1rem; /* 16px */
    --sarah-text-l: 1.125rem;
    --sarah-text-xxl: 1.5rem;
    --sarah-text-xxxl: 1.875rem;
    --sarah-text-xxxxl: 2.25rem;
    
    /* Spacing*/
    --sarah-space-xs: 0.313rem; /* 5px */
    --sarah-space-s: 0.625rem;
    --sarah-space-m: 0.938rem;/* 15px */
    --sarah-space-l: 1.25rem;
    --sarah-space-xl: 1.563rem; /* 25px */
    --sarah-space-xxl: 3.125rem; /* 50px */
    --sarah-content-padding-l:var(--sarah-space-xxl);
}

@media screen and (max-width:699px){
    :root{
    --sarah-content-padding: var(--sarah-space-m);
    }
}
@media screen and (min-width:700px){
    :root{
    --sarah-content-padding: var(--sarah-space-xl);
    
    }
}