@font-face {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    src: url(/src/fonts/roboto.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    src: url(/src/fonts/playfair-display.woff2) format('woff2');
    font-display: swap;
}

:root {
    /* Expressive Spatial */
    --motion-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --motion-expressive-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1.00);
    --motion-expressive-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);

    /* Expressive Effects */
    --motion-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --motion-expressive-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --motion-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);

    /* Standard Spatial */
    --motion-standard-fast-spatial: 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --motion-standard-default-spatial: 500ms cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --motion-standard-slow-spatial: 750ms cubic-bezier(0.27, 1.06, 0.18, 1.00);

    /* Standard Effects */
    --motion-standard-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --motion-standard-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --motion-standard-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        --sync-green: #15803d;
    }
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --sync-green: #4ade80;
    }
}

:root[data-theme="light"] {
    --sync-green: #15803d;
}

:root[data-theme="dark"] {
    --sync-green: #4ade80;
}

::selection {
    background-color: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display";
    font-weight: 600 !important;
}

html {
    color-scheme: var(--color-scheme);
}

body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);

    font-family: "Roboto", sans-serif;
    margin-block-start: 94px;
    margin-block-end: 150px;
}

section {
    display: none;
    flex-direction: column;
}

section.active {
    display: flex;
}

hr {
    border: 1px solid var(--md-sys-color-outline-variant);
}

a {
    display: inline-block;
    position: relative;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    padding: 1px;
    z-index: 1;
}

a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 105%;
    height: 2px;
    background-color: var(--md-sys-color-primary);
    transition: all var(--motion-expressive-default-effects);
    opacity: 0.6;
    border-radius: 6px;
    z-index: -1;
}

a:hover {
    color: var(--md-sys-color-on-primary);
    z-index: 2;
}

a:hover::before {
    opacity: 1;
    background-color: var(--md-sys-color-primary);
    height: 22px;
    z-index: -1;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 200px;
    transition: all var(--motion-expressive-default-effects);
    cursor: pointer;
    border: none;
    outline: none;

    &:hover {
        transform: scale(1.01);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    &.primary {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);

        & .material-symbols-rounded {
            color: var(--md-sys-color-on-primary-container);
        }
    }

    &.secondary {
        background-color: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);

        & .material-symbols-rounded {
            color: var(--md-sys-color-on-secondary-container);
        }
    }

    &.tertiary {
        background-color: var(--md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container);

        & .material-symbols-rounded {
            color: var(--md-sys-color-on-tertiary-container);
        }
    }

    &.danger {
        background-color: var(--md-sys-color-error);
        color: var(--md-sys-color-on-error);

        & .material-symbols-rounded {
            color: var(--md-sys-color-on-error);
        }
    }
}

.content {
    transition: all var(--motion-expressive-default-effects);

    & .top-bar {
        transition: all var(--motion-expressive-default-effects);
    }
}

/* Material Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 600ms linear;
    background-color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 2;
    filter: blur(10px);
}

@media (min-width: 768px) {
    .content {
        margin-inline-start: 250px;
    }
}