:root {
    --color-primary: #55361b;
    --color-primary-dark: #130b05;
    --color-secondary: #f2d49f;
    --color-surface: #fff4e0;
    --color-surface-dark: #ffefce;
    --color-gold: #db9519;
    --color-gold-dark: #8e6317;

    --font-size-title: 72px;
    --font-size-subtitle: 32px;
    --font-size-body-large: 24px;
    --font-size-body: 18px;
    --font-size-icon: 24px;
    --font-size-icon-large: 32px;

    --font-weight-title: bold;
    --font-weight-subtitle: bold;
    --font-weight-body-large: normal;
    --font-weight-body: normal;

    --font-var-icon: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
    --font-var-icon-large: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 32;

    --radius: 20px;

    --shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

* {
    font-family: "Amaranth", sans-serif;
    font-size: var(--font-size-body);
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 100 700;
    src: url(/assets/material-symbols-rounded.woff2) format("woff2");
}

body,
html {
    height: 100%;
    width: 100%;
    background-color: var(--color-surface);
    color: var(--color-primary);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: var(--font-var-icon);
    font-size: var(--font-size-icon);
}

span.material-symbols-rounded.large {
    font-variation-settings: var(--font-var-icon-large);
    font-size: var(--font-size-icon-large);
}