:root {
    --gss-color-background: #f6f8fb;
    --gss-color-surface: #ffffff;
    --gss-color-surface-elevated: #eef3f7;
    --gss-color-action-primary: #0f766e;
    --gss-color-action-primary-hover: #115e59;
    --gss-color-action-on-primary: #ffffff;
    --gss-color-text-primary: #182230;
    --gss-color-text-secondary: #5d6b7c;
    --gss-color-border: #d7dee8;
    --gss-color-success: #16794c;
    --gss-color-warning: #a16207;
    --gss-color-error: #b42318;
    --gss-font-family: Inter, Segoe UI, system-ui, -apple-system, sans-serif;
    --gss-font-heading-lg: 700 2rem/1.15 var(--gss-font-family);
    --gss-font-heading-md: 700 1.35rem/1.25 var(--gss-font-family);
    --gss-font-body: 400 1rem/1.55 var(--gss-font-family);
    --gss-font-body-sm: 400 .9rem/1.45 var(--gss-font-family);
    --gss-font-label: 650 .9rem/1.2 var(--gss-font-family);
    --gss-space-xs: .5rem;
    --gss-space-sm: .75rem;
    --gss-space-md: 1rem;
    --gss-space-lg: 1.5rem;
    --gss-space-xl: 2.25rem;
    --gss-radius-control: .5rem;
    --gss-radius-card: .75rem;
    --gss-radius-dialog: 1rem;
    --gss-shadow-standard: 0 18px 45px rgb(16 24 40 / 10%);
    --gss-focus-ring: 3px solid color-mix(in srgb, var(--gss-color-action-primary) 70%, white);
    --gss-breakpoint-mobile: 480px;
    --gss-breakpoint-tablet: 760px;
    --gss-breakpoint-desktop: 1120px;
    --gss-content-width: 72rem;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--gss-color-background);
    color: var(--gss-color-text-primary);
    font: var(--gss-font-body);
}

body {
    margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: var(--gss-focus-ring);
    outline-offset: 2px;
}

.gss-sr-only {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

.gss-field {
    color: var(--gss-color-text-primary);
    display: grid;
    font: var(--gss-font-label);
    gap: var(--gss-space-xs);
}

.gss-input {
    background: var(--gss-color-surface);
    border: 1px solid var(--gss-color-border);
    border-radius: var(--gss-radius-control);
    color: var(--gss-color-text-primary);
    min-height: 2.75rem;
    padding: 0 var(--gss-space-sm);
}

.gss-input:focus,
.gss-checkbox input:focus-visible {
    outline: var(--gss-focus-ring);
    outline-offset: 2px;
}

.gss-checkbox {
    align-items: center;
    color: var(--gss-color-text-secondary);
    display: inline-flex;
    font: var(--gss-font-body-sm);
    gap: var(--gss-space-xs);
}

.gss-validation {
    color: var(--gss-color-error);
    font: var(--gss-font-body-sm);
    margin: 0;
}

.gss-card,
.gss-state {
    background: var(--gss-color-surface);
    border: 1px solid var(--gss-color-border);
    border-radius: var(--gss-radius-card);
    padding: var(--gss-space-lg);
}

.gss-card__header {
    margin-bottom: var(--gss-space-md);
}

.gss-card__header h2,
.gss-card__header p {
    margin: 0;
}

.gss-card__header p,
.gss-state p,
.gss-page-header span {
    color: var(--gss-color-text-secondary);
}

.gss-status {
    border-radius: 999px;
    display: inline-flex;
    font: var(--gss-font-label);
    padding: .25rem .65rem;
}

.gss-status--success {
    background: color-mix(in srgb, var(--gss-color-success) 14%, white);
    color: var(--gss-color-success);
}

.gss-status--warning {
    background: color-mix(in srgb, var(--gss-color-warning) 14%, white);
    color: var(--gss-color-warning);
}

.gss-status--neutral {
    background: var(--gss-color-surface-elevated);
    color: var(--gss-color-text-secondary);
}

.gss-state--error {
    border-color: color-mix(in srgb, var(--gss-color-error) 35%, var(--gss-color-border));
}

.gss-page-header {
    display: grid;
    gap: var(--gss-space-xs);
}

.gss-page-header h1,
.gss-page-header p {
    margin: 0;
}

.gss-page-header h1 {
    font: var(--gss-font-heading-lg);
}

.gss-page-header p {
    color: var(--gss-color-text-secondary);
    font: var(--gss-font-label);
    text-transform: uppercase;
}

.gss-nav-item {
    border-radius: var(--gss-radius-control);
    color: var(--gss-color-text-secondary);
    display: inline-flex;
    padding: var(--gss-space-xs) var(--gss-space-sm);
    text-decoration: none;
}

.gss-nav-item:hover,
.gss-nav-item[aria-current="page"] {
    background: var(--gss-color-surface-elevated);
    color: var(--gss-color-text-primary);
}