:root {
  color-scheme: light dark;
}

html {
    --fnd-background-1: light-dark(#f9fcff, #0c0c0c);
    --fnd-background-2: light-dark(#ffffff, #0f0f0f);
    --fnd-surface-1: light-dark(#fbfbff, #0c0c0c);
    --fnd-surface-2: light-dark(#ffffff, #131313);

    --fnd-accent-1-color: light-dark(#ffc400, #ffc400);
    --fnd-on-accent-1-color: light-dark(#ffffff, #000000);

    --fnd-accent-2-color: light-dark(#000000, #ffffff);
    --fnd-on-accent-2-color: light-dark(#ffffff, #000000);

    --fnd-neutral-1-color: light-dark(#eff3f8, #383838);
    --fnd-on-neutral-1-color: light-dark(#4f4f4f, #efefef);

    --fnd-shadow-color: light-dark(#c3c3c31a, #00000000);
    --fnd-box-shadow: 0 0 20px 4px var(--fnd-shadow-color);

    --fnd-border-color: light-dark(#efefef, #1d1c1c);

    --fnd-text-color: light-dark(#2a3547, #FFFFFFE5);
    --fnd-text-secondary-color: color-mix(in lab, transparent 60%, var(--fnd-text-color));
    --fnd-text-tertiary-color: color-mix(in lab, transparent 70%, var(--fnd-text-color));

    --fnd-contrast-color: light-dark(#2a3547, #ffffff);
    --fnd-on-contrast-color: light-dark(#ffffff, #000000);

    --fnd-danger-color: light-dark(#fff3f5, #ff1a1a);
    --fnd-on-danger-color: light-dark(#ff1a1a, #fff3f5);

    --fnd-warning-color: light-dark(#faf3ea, #FF9800);
    --fnd-on-warning-color: light-dark(#FF9800, #faf3ea);

    --fnd-success-color: light-dark(#e7fff4, #04985b);
    --fnd-on-success-color: light-dark(#04985b, #e7fff4);

    --fnd-green-color: light-dark(#04985b, #04985b);
    --fnd-red-color: light-dark(#ff1a1a, #ff1a1a);

    background-color: var(--fnd-background-1);
}

.opacity-80 {opacity: .8;}
.opacity-60 {opacity: .6;}
.opacity-40 {opacity: .4;}

/* region settings */
html {
    height: fit-content;
}

*, ::after, ::before {
    box-sizing: border-box
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    height: fit-content;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
/* endregion */