/* colors */
:root {
    --lf-col-0: hsl(0, 0%, 70%);
    --lf-col-1: hsl(0, 0%, 50%);
    --lf-col-2: hsl(0, 70%, 50%);
    --lf-col-3: hsl(25, 70%, 50%);
    --lf-col-4: hsl(60, 70%, 45%);
    --lf-col-5: hsl(105, 70%, 45%);
    --lf-col-6: hsl(170, 70%, 48%);
    --lf-col-7: hsl(210, 70%, 50%);
    --lf-col-8: hsl(250, 70%, 60%);
    --lf-col-9: hsl(300, 60%, 50%);
    --lf-col-10: hsl(340, 70%, 50%);
    --lf-col-dark-0: hsl(0, 0%, 40%);
    --lf-col-dark-1: hsl(0, 0%, 20%);
    --lf-col-dark-2: hsl(0, 70%, 35%);
    --lf-col-dark-3: hsl(25, 70%, 35%);
    --lf-col-dark-4: hsl(60, 70%, 35%);
    --lf-col-dark-5: hsl(105, 70%, 35%);
    --lf-col-dark-6: hsl(170, 70%, 35%);
    --lf-col-dark-7: hsl(210, 70%, 35%);
    --lf-col-dark-8: hsl(250, 70%, 40%);
    --lf-col-dark-9: hsl(300, 60%, 35%);
    --lf-col-dark-10: hsl(340, 70%, 35%);
    --lf-col-light-0: hsl(0, 0%, 100%);
    --lf-col-light-1: hsl(0, 0%, 95%);
    --lf-col-light-2: hsl(0, 70%, 94%);
    --lf-col-light-3: hsl(25, 70%, 94%);
    --lf-col-light-4: hsl(60, 70%, 94%);
    --lf-col-light-5: hsl(105, 70%, 95%);
    --lf-col-light-6: hsl(170, 70%, 94%);
    --lf-col-light-7: hsl(210, 70%, 94%);
    --lf-col-light-8: hsl(250, 70%, 95%);
    --lf-col-light-9: hsl(300, 60%, 95%);
    --lf-col-light-10: hsl(340, 70%, 95%);
}

.lf-col-0 {
    --lf-col: var(--lf-col-0);
    --lf-col-light: var(--lf-col-light-0);
    --lf-col-dark: var(--lf-col-dark-0);
}

.lf-col-1 {
    --lf-col: var(--lf-col-1);
    --lf-col-light: var(--lf-col-light-1);
    --lf-col-dark: var(--lf-col-dark-1);
}

.lf-col-2 {
    --lf-col: var(--lf-col-2);
    --lf-col-light: var(--lf-col-light-2);
    --lf-col-dark: var(--lf-col-dark-2);
}

.lf-col-3 {
    --lf-col: var(--lf-col-3);
    --lf-col-light: var(--lf-col-light-3);
    --lf-col-dark: var(--lf-col-dark-3);
}

.lf-col-4 {
    --lf-col: var(--lf-col-4);
    --lf-col-light: var(--lf-col-light-4);
    --lf-col-dark: var(--lf-col-dark-4);
}

.lf-col-5 {
    --lf-col: var(--lf-col-5);
    --lf-col-light: var(--lf-col-light-5);
    --lf-col-dark: var(--lf-col-dark-5);
}

.lf-col-6 {
    --lf-col: var(--lf-col-6);
    --lf-col-light: var(--lf-col-light-6);
    --lf-col-dark: var(--lf-col-dark-6);
}

.lf-col-7 {
    --lf-col: var(--lf-col-7);
    --lf-col-light: var(--lf-col-light-7);
    --lf-col-dark: var(--lf-col-dark-7);
}

.lf-col-8 {
    --lf-col: var(--lf-col-8);
    --lf-col-light: var(--lf-col-light-8);
    --lf-col-dark: var(--lf-col-dark-8);
}

.lf-col-9 {
    --lf-col: var(--lf-col-9);
    --lf-col-light: var(--lf-col-light-9);
    --lf-col-dark: var(--lf-col-dark-9);
}

.lf-col-10 {
    --lf-col: var(--lf-col-10);
    --lf-col-light: var(--lf-col-light-10);
    --lf-col-dark: var(--lf-col-dark-10);
}

.lf-bg-col-0 {
    --lf-bg-col: var(--lf-col-0);
    --lf-bg-col-light: var(--lf-col-light-0);
    --lf-bg-col-dark: var(--lf-col-dark-0);
}

.lf-bg-col-1 {
    --lf-bg-col: var(--lf-col-1);
    --lf-bg-col-light: var(--lf-col-light-1);
    --lf-bg-col-dark: var(--lf-col-dark-1);
}

.lf-bg-col-2 {
    --lf-bg-col: var(--lf-col-2);
    --lf-bg-col-light: var(--lf-col-light-2);
    --lf-bg-col-dark: var(--lf-col-dark-2);
}

.lf-bg-col-3 {
    --lf-bg-col: var(--lf-col-3);
    --lf-bg-col-light: var(--lf-col-light-3);
    --lf-bg-col-dark: var(--lf-col-dark-3);
}

.lf-bg-col-4 {
    --lf-bg-col: var(--lf-col-4);
    --lf-bg-col-light: var(--lf-col-light-4);
    --lf-bg-col-dark: var(--lf-col-dark-4);
}

.lf-bg-col-5 {
    --lf-bg-col: var(--lf-col-5);
    --lf-bg-col-light: var(--lf-col-light-5);
    --lf-bg-col-dark: var(--lf-col-dark-5);
}

.lf-bg-col-6 {
    --lf-bg-col: var(--lf-col-6);
    --lf-bg-col-light: var(--lf-col-light-6);
    --lf-bg-col-dark: var(--lf-col-dark-6);
}

.lf-bg-col-7 {
    --lf-bg-col: var(--lf-col-7);
    --lf-bg-col-light: var(--lf-col-light-7);
    --lf-bg-col-dark: var(--lf-col-dark-7);
}

.lf-bg-col-8 {
    --lf-bg-col: var(--lf-col-8);
    --lf-bg-col-light: var(--lf-col-light-8);
    --lf-bg-col-dark: var(--lf-col-dark-8);
}

.lf-bg-col-9 {
    --lf-bg-col: var(--lf-col-9);
    --lf-bg-col-light: var(--lf-col-light-9);
    --lf-bg-col-dark: var(--lf-col-dark-9);
}

.lf-bg-col-10 {
    --lf-bg-col: var(--lf-col-10);
    --lf-bg-col-light: var(--lf-col-light-10);
    --lf-bg-col-dark: var(--lf-col-dark-10);
}

.lf-color-example {
    white-space: nowrap;
    display: inline-block;
    margin: 2px 20px 2px 0px;
}

.lf-color-example span {
    display: inline-block;
    width: 20px;
}

.lf-color-example span.lf-col {
    background-color: var(--lf-col);
}

.lf-color-example span.lf-col-light {
    background-color: var(--lf-col-light);
}

.lf-color-example span.lf-col-dark {
    background-color: var(--lf-col-dark);
}

/* radius */
:root {
    --lf-radius-0: 0px;
    --lf-radius-1: 1px;
    --lf-radius-3: 3px;
    --lf-radius-5: 5px;
    --lf-radius-10: 10px;
    --lf-radius-15: 15px;
}

.lf-radius-0 {
    --lf-radius: var(--lf-radius-0);
}

.lf-radius-1 {
    --lf-radius: var(--lf-radius-1);
}

.lf-radius-3 {
    --lf-radius: var(--lf-radius-3);
}

.lf-radius-5 {
    --lf-radius: var(--lf-radius-5);
}

.lf-radius-10 {
    --lf-radius: var(--lf-radius-10);
}

.lf-radius-15 {
    --lf-radius: var(--lf-radius-15);
}

/* shadow */

:root {
    --lf-shadow-none: none;
    --lf-shadow-small: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --lf-shadow-medium: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
    --lf-shadow-large: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.lf-shadow-none {
    --lf-shadow: var(--lf-shadow-none);
}
.lf-shadow-small {
    --lf-shadow: var(--lf-shadow-small);
}
.lf-shadow-medium {
    --lf-shadow: var(--lf-shadow-medium);
}
.lf-shadow-large {
    --lf-shadow: var(--lf-shadow-large);
}

/* radius */
:root {
    --lf-border-0: 0px;
    --lf-border-1: 1px;
    --lf-border-2: 2px;
    --lf-border-3: 3px;
    --lf-border-4: 4px;
    --lf-border-5: 5px;
}

.lf-border-0 {
    --lf-border: var(--lf-border-0);
}

.lf-border-1 {
    --lf-border: var(--lf-border-1);
}

.lf-border-2 {
    --lf-border: var(--lf-border-2);
}

.lf-border-3 {
    --lf-border: var(--lf-border-3);
}

.lf-border-4 {
    --lf-border: var(--lf-border-4);
}

.lf-border-5 {
    --lf-border: var(--lf-border-5);
}



/* cut */

:root {
    --lf-cut-bottom-none: none;
    --lf-cut-bottom-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M0 280 Q100 318, 200 280 T400 280 V0 H0 Z" fill="white"/></svg>');
    --lf-cut-bottom-increasing: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M0 300 L400 270 V0 H0 Z" fill="white"/></svg>');
    --lf-cut-bottom-decreasing: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M0 270 L400 300 V0 H0 Z" fill="white"/></svg>');
}
.lf-cut-bottom-none {
    --lf-cut-bottom: var(--lf-cut-bottom-none);
}
.lf-cut-bottom-wave {
    --lf-cut-bottom: var(--lf-cut-bottom-wave);
}
.lf-cut-bottom-increasing {
    --lf-cut-bottom: var(--lf-cut-bottom-increasing);
}
.lf-cut-bottom-decreasing {
    --lf-cut-bottom: var(--lf-cut-bottom-decreasing);
}

/* aspect ratio */
:root {
    --lf-aspect-ratio-4-1: 4 / 1;
    --lf-aspect-ratio-3-1: 3 / 1;
    --lf-aspect-ratio-2-1: 2 / 1;
    --lf-aspect-ratio-16-9: 16 / 9;
    --lf-aspect-ratio-4-3: 4 / 3;
    --lf-aspect-ratio-1-1: 1 / 1;
    --lf-aspect-ratio-9-16: 9 / 16;
}
.lf-aspect-ratio-4-1 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-4-1);
}
.lf-aspect-ratio-3-1 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-3-1);
}
.lf-aspect-ratio-2-1 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-2-1);
}
.lf-aspect-ratio-16-9 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-16-9);
}
.lf-aspect-ratio-4-3 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-4-3);
}
.lf-aspect-ratio-1-1 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-1-1);
}
.lf-aspect-ratio-9-16 {
    --lf-aspect-ratio: var(--lf-aspect-ratio-9-16);
}