@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@100;200;300;400;500;600;800;900&display=swap);

:where(:root) {
    /* https://colorffy.com/css-generator?ref=home-list */
    /* colorizing */
    --putih-00: #ffffffff;
    --putih-01: #fdfdfeff;
    --putih-02: #fbfbfeff;
    --putih-03: #fafafdff;
    --putih-05: #f8f8fcff; /* warna utama */
    --putih-06: #b4b4b6ff;
    --putih-07: #747476ff;
    --putih-08: #3a3a3bff;
    --putih-09: #000000ff;

    --biru-00: #ffffffff;
    --biru-01: #d6cefeff;
    --biru-02: #ab9ffbff;
    --biru-03: #7872f7ff;
    --biru-05: #2748f2ff; /* warna utama */
    --biru-06: #2937b0ff;
    --biru-07: #242672ff;
    --biru-08: #191739ff;
    --biru-09: #000000ff;

    --kuning-00: #ffffffff;
    --kuning-01: #f8fcd0ff;
    --kuning-02: #eff9a0ff;
    --kuning-03: #e4f56dff;
    --kuning-05: #d6f227ff; /* warna utama */
    --kuning-06: #9caf26ff;
    --kuning-07: #667120ff;
    --kuning-08: #343916ff;
    --kuning-09: #000000ff;

    --navy-00: #ffffff;
    --navy-01: #ced2da;
    --navy-02: #9fa6b7;
    --navy-03: #717c94;
    --navy-04: #455573;
    --navy-05: #183153; /* warna utama */
    --navy-06: #162843;
    --navy-07: #142033;
    --navy-08: #111824;
    --navy-09: #0a0e16;

    /* palette */
    --color-surface-01: var(--putih-00);
    --color-surface-02: var(--putih-05);
    --color-surface-03: var(--navy-05);
    --color-surface-04: var(--navy-06);

    --color-accent-01: var(--kuning-05);
    --color-accent-02: var(--biru-05);

    --color-text-light: #fafafaff;
    --color-text-light-dim: #fafafab3;
    --color-text-light-dimest: #fafafa17;
    --color-text-dark: #112233;
    --color-text-dark-dim: #112233b3;
    --color-text-dark-dimest: #11223317;

    /* padding, margin, gap */
    --space-00: 0.125rem;    /*2px*/
    --space-01: 0.25rem;     /*4px*/
    --space-02: 0.5rem;      /*8px*/
    --space-03: 0.75rem;     /*12px*/
    --space-04: 1rem;        /*16px*/
    --space-05: 1.125rem;    /*18px*/
    --space-06: 1.5rem;      /*24px*/
    --space-07: 2rem;        /*32px*/
    --space-08: 2.5rem;      /*40px*/
    --space-09: 3rem;        /*48px*/
    --space-10: 3.5rem;     /*56px*/
    --space-11: 4rem;       /*64px*/
    --space-12: 4.5rem;     /*72px*/
    --space-13: 5rem;       /*80px*/
    --space-14: 5.5rem;     /*88px*/
    --space-15: 6rem;       /*96px*/

    /* border-radius */
    --radius-00: var(--space-00);
    --radius-01: var(--space-01);
    --radius-02: var(--space-02);
    --radius-03: var(--space-03);
    --radius-04: var(--space-06);
    --radius-05: var(--space-09);
    --radius-pill: 1000em;
    --radius-round: 50%;

    /* efek */
    --filter-bright-00: brightness(100%);
    --filter-bright-01: brightness(110%);

    --filter-dark-00: brightness(99%);
    --filter-dark-01: brightness(95%);

    --transition-01: all .2s linear;

    --shadow-smooth-00:  0px 52.4px 52.3px -42px rgba(0, 0, 0, 0.05), 0px 82.6px 108.6px -42px rgba(0, 0, 0, 0.03), 0px 102.4px 169.5px -42px rgba(0, 0, 0, 0.023), 0px 126.1px 237.1px -42px rgba(0, 0, 0, 0.021), 0px 216px 328px -42px rgba(0, 0, 0, 0.018);
    --shadow-smooth-01: 0px 77.9px 52.3px -42px rgba(0, 0, 0, 0.05), 0px 122.7px 108.6px -42px rgba(0, 0, 0, 0.03), 0px 152.2px 169.5px -42px rgba(0, 0, 0, 0.023), 0px 187.4px 237.1px -42px rgba(0, 0, 0, 0.021), 0px 321px 328px -42px rgba(0, 0, 0, 0.018);

    --shadow-00: 0px 24px 24px rgba(0,0,0,0.1);

    /* font */
    --fontsize-body-small: clamp(0.625rem, 0.538rem + 0.4348vi, 0.875rem);
    --fontsize-body: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
    --fontsize-h6: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
    --fontsize-h5: clamp(1.5rem, 1.3261rem + 0.8696vi, 2rem);
    --fontsize-h4: clamp(2rem, 1.6522rem + 1.7391vi, 3rem);
    --fontsize-h3: clamp(2.5rem, 2.1957rem + 1.5217vi, 3.375rem);
    --fontsize-h2: clamp(3rem, 2.6522rem + 1.7391vi, 4rem);
    --fontsize-h1: clamp(2.375rem, 1.9837rem + 1.9565vi, 4.5rem);

    /* width */
    --width-default: min(1200px, 100% - 4rem);
    --width-full: min(90%, 100% - 4rem);
}

*,*::before,*::after {
    box-sizing: border-box;
    font-family: inherit;
    padding: 0;
    margin: 0;
    
    /* color: #fafafa !important;
    background-color: #111222 !important;
    outline: 2px dashed rgb(255, 96, 4); */

    &:is(:focus-visible) {
        outline: 3px solid var(--color-accent-02);
        outline-offset: 4px;
        border-radius: var(--radius-00);
        -webkit-border-radius: var(--radius-00);
        -moz-border-radius: var(--radius-00);
        -ms-border-radius: var(--radius-00);
        -o-border-radius: var(--radius-00);
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
    }
}

html {
    scroll-behavior: smooth;
}

/* config: lenis */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    font-family: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--fontsize-body);
    background-color: var(--color-surface-02);
    word-wrap: break-word;
    text-wrap: balance;
}

main {
    overflow: hidden;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
    font-style: italic;
}

.swiper {
    width: 600px;
    height: 300px;
}

/* config: typograph */
h1,h2,h3,h4,h5,h6 {
    text-transform: capitalize;
}

h1 {
    font-size: var(--fontsize-h1);
    font-weight: 700;
    letter-spacing: -2px;
}

h2 {
    font-size: var(--fontsize-h2);
    font-weight: 600;
    letter-spacing: -2px;
}

h3 {
    font-size: var(--fontsize-h3);
    font-weight: 600;
    letter-spacing: -2px;
}

h4 {
    font-size: var(--fontsize-h4);
    font-weight: 400;
}

h5 {
    font-size: var(--fontsize-h5);
    font-weight: 700;
    
}

h6 {
    font-size: var(--fontsize-h6);
    font-weight: 400;
}

.span-deco {
    color: var(--color-accent-02);
    font-weight: 800;
    text-transform: capitalize;
}

@media screen and (max-width: 768px) {
    /* body {
        &::before {
            content: 'Preview tidak bisa dilihat pada layar kurang dari 767px saat ini, pindah ke laptop / desktop';
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;
            width: 100%;
            padding: var(--space-08);
            color: var(--color-text-light);
            background-color: var(--color-surface-03);
            font-family: inherit;
            font-weight: 800;
            z-index: 400;
        }
    } */
}