:root {
    /* Ubah nilai berikut untuk mengganti warna brand seluruh aplikasi. */
    color-scheme: light;
    --site-font-family: 'DM Sans', ui-sans-serif, Arial, sans-serif;
    --brand-primary: #006664;
    --brand-primary-hover: #004d4c;
    --brand-primary-soft: #e6f3f2;
    --brand-primary-focus: rgb(0 102 100 / 0.08);
    --brand-primary-focus-strong: rgb(0 102 100 / 0.15);
    --brand-primary-shadow: rgb(0 102 100 / 0.28);
    --brand-primary-shadow-strong: rgb(0 102 100 / 0.45);
    --site-layout-width: 1200px;
    --site-layout-gutter: 1rem;

    --primary: var(--brand-primary);
    --secondary-foreground: var(--brand-primary);
    --ring: var(--brand-primary);
}

html {
    min-height: 100%;
    background: #fff;
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background-color: #fff;
    font-family: var(--site-font-family);
    font-synthesis: none;
}

.home-page,
.home-page .site-main {
    background-color: #fff;
}

button,
input,
select,
textarea,
optgroup {
    color: inherit;
    font: inherit;
}

input,
select,
textarea {
    color-scheme: light;
}

.site-main .mx-auto.max-w-6xl {
    max-width: var(--site-layout-width);
    padding-inline: var(--site-layout-gutter);
}

.site-main .content-shell {
    width: min(calc(100% - var(--site-layout-gutter) - var(--site-layout-gutter)), var(--site-layout-width));
    padding-inline: var(--site-layout-gutter);
}