@font-face {
    font-family: "Dvk Shadeerah Soft";
    src: url("../fonts/shadeerah-soft.8f8a9dcbbe09.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans-regular.3e7f038b85da.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans-medium.fbbc5a515be4.ttf") format("truetype");
    font-weight: 500 600;
    font-display: swap;
}

:root {
    --font-display: "Dvk Shadeerah Soft", "DM Sans", sans-serif;
    --font-body: "DM Sans", Arial, sans-serif;
    --navy-950: #0b1033;
    --navy-900: #111842;
    --navy-800: #1c265b;
    --cyan-500: #20c9d7;
    --cyan-400: #48dbe4;
    --blue-600: #4354df;
    --lavender-50: #f6f6ff;
    --lavender-100: #eceefe;
    --lavender-200: #dfe3fb;
    --white: #ffffff;
    --ink: #121831;
    --muted: #6b718b;
    --danger: #b4233c;
    --success: #157f73;
    --shadow-lg: 0 30px 80px rgba(22, 29, 76, 0.16);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --focus-ring: 0 0 0 4px rgba(32, 201, 215, 0.25);
}

* {
    box-sizing: border-box;
}

html {
    color: var(--ink);
    font-family: var(--font-body);
    background: var(--lavender-50);
}

body {
    min-width: 320px;
    margin: 0;
    background: var(--lavender-50);
}

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

button,
a,
input,
select,
textarea {
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: var(--focus-ring);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    color: var(--navy-950);
    background: var(--cyan-400);
    border-radius: 999px;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 16px clamp(22px, 5vw, 72px);
    color: var(--white);
    background: var(--navy-950);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--navy-950);
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    background: var(--cyan-400);
    border-radius: 10px;
}

.header-label {
    color: #b7bdd9;
    font-size: 0.88rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-link,
.header-logout button {
    color: var(--white);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.header-logout {
    margin: 0;
}

.header-logout button {
    padding: 8px 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

@media (max-width: 600px) {
    .site-header {
        padding: 14px 16px;
    }

    .header-actions {
        gap: 14px;
    }

    .header-label {
        display: none;
    }
}