@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --hermes-white: rgb(255, 255, 255);
    --hermes-black: rgb(11, 11, 11);
    --hermes-blue: rgb(28, 96, 227);
    --hermes-green: rgb(105, 168, 67);
    --hermes-red: rgb(231, 71, 77);
    --gray-50: rgb(248, 249, 251);
    --gray-100: rgb(241, 243, 246);
    --gray-200: rgb(226, 230, 236);
    --gray-500: rgb(107, 114, 128);
    --gray-700: rgb(55, 65, 81);
    --shadow-card: 0 16px 42px rgba(11, 11, 11, 0.08);
    --radius-card: 18px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-family: "Roboto", Arial, sans-serif;
    color: var(--hermes-black);
    background: var(--gray-50);
}

body {
    min-height: 100vh;
    margin: 0;
}

button,
input {
    font: inherit;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.button:active {
    transform: translateY(1px);
}

.button-primary {
    color: var(--hermes-white);
    background: var(--hermes-blue);
    box-shadow: 0 8px 18px rgba(28, 96, 227, 0.2);
}

.button-primary:hover {
    background: rgb(23, 82, 197);
}

.button-secondary {
    color: var(--hermes-black);
    background: var(--gray-100);
}

.placeholder-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.placeholder-card {
    width: min(100%, 560px);
    padding: 36px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-card);
    background: var(--hermes-white);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.placeholder-card h1 {
    margin: 16px 0 8px;
}

.placeholder-card p {
    margin: 0 0 24px;
    color: var(--gray-500);
}