:root {
    color-scheme: light;

    /* Brand */

    --color-primary: #087d73;
    --color-primary-hover: #06685f;
    --color-primary-soft: #e5f3ef;

    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    /* Surfaces */

    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f6f8;

    /* Text */

    --color-text: #20313b;
    --color-text-muted: #6b7a83;
    --color-text-light: #a0a3a5;

    /* Borders */

    --color-border: #e5eaed;
    --color-border-light: #eef5f3;

    /* Radius */

    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 16px;

    /* Shadows */

    --shadow-small:
        0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-medium:
        0 4px 12px rgba(63, 66, 69, 0.08);

    /* Layout */

    --content-width: 1280px;

    /* Spacing */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Typography */

    --font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    line-height: 1.2;
}

p {
    margin-top: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    padding: 12px 16px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-small);
    z-index: 1000;
}

.skip-link:focus {
    top: 16px;
}

::selection {
    background: rgba(8, 125, 115, 0.20);
}