@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
}

@layer base {
    :root {
        --color-bg: #fff;
        --color-bg-darker: #f8f8f8;
        --color-text: #333;
        --color-border: #ddd;
        --color-bg-alternate: #f5f5f5;
        --font-primary: 'Roboto', sans-serif;
        --font-secondary: 'Open Sans', sans-serif;
        --font-size-base: 14px;
        --font-size-small: 0.857rem;
        --font-size-large: 1.714rem;
    }

    body {
        font-family: var(--font-primary);
        font-size: var(--font-size-base);
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100vh;
        color: var(--color-text);
        background-color: var(--color-bg);
    }

    header {
        grid-column: 1 / -1;
        background-color: var(--color-bg-darker);
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 {
            margin: 0;
            font-family: var(--font-secondary);
            font-size: var(--font-size-base);
        }

        .header-nav {
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                gap: 1rem;

                li {
                    a {
                        text-decoration: none;
                        color: var(--color-text);
                        font-size: var(--font-size-base);
                    }
                }
            }
        }
    }

    main {
        padding: 1rem;
        background-color: var(--color-bg);
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }

        @media (min-width: 1024px) {
            grid-template-columns: 1fr 1fr 1fr;
        }

        section {
            padding: 1rem;
            border: 1px solid var(--color-border);
            border-radius: 5px;
            font-size: var(--font-size-base);
        }
    }
}

@layer components {
    .metrics {
        display: flex;
        gap: 1rem;

        .metric {
            flex: 1;
            display: flex;
            flex-wrap: wrap-reverse;
            background-color: var(--color-bg-alternate);
            padding: 1rem;
            border-radius: 5px;
            text-align: center;

            & > * {
                flex-basis: 100%;
            }

            .metric-number {
                font-size: var(--font-size-large);
                font-weight: bold;
                margin: 0;
            }

            .metric-label {
                font-size: var(--font-size-small);
                margin: 0;
                margin-block-start: 0.5rem;
            }
        }
    }
}