/* =========================================================
   Brand tokens
   ========================================================= */

:root {
    --color-primary: #4E9F63;
    --color-primary-hover: #105217;
    --color-text: #111;
    --color-muted: #6b7280;
    --color-background: #fff;
    --color-surface: #f9fafb;
    --color-border: #ccc;
    --norve-green: #105217;
    --color-light-text: #f3fdf5;
}

/* =========================================================
   Global theme
   ========================================================= */

body {
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

header {
    background-color: var(--norve-green);
}

header a {
    color: var(--color-light-text);
}

a:hover,
a:focus-visible {
   color: var(--color-primary-hover);
}

header a:hover,
header a:focus-visible {
    color: var(--color-light-text);
    text-shadow: #c62828;
    text-decoration: underline;
}

.cta {
    border: solid var(--color-background);
    padding: 2px 4px;
}

.cta:hover,
.cta:focus-visible {
    color: var(--color-text);
    background-color: var(--color-background);
    border: solid var(--color-background);
    text-decoration: none;
}

.form {
    max-width: 42rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.form-field label {
    font-size: 0.875rem;
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    font: inherit;
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--color-border, #ccc);
    background-color: #fff;
}

.form-field textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary, #005fcc);
    box-shadow: 0 0 0 2px #005fcc26 ;
}

.form-field input:invalid,
.form-field select:invalid,
.form-field textarea:invalid {
    border-color: #c62828;
}

.form-field input:invalid:focus,
.form-field select:invalid:focus,
.form-field textarea:invalid:focus {
    box-shadow: 0 0 0 2px #C339;
}

.form button[type="submit"] {
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background-color: var(--color-primary, #005fcc);
    color: #fff;
    cursor: pointer;
}

.form button[type="submit"]:hover {
  background-color: #004bb5;
}

.form button[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px #005fcc40;
}

.form-field .mandatory {
    color: #c62828;
}


/* =========================================================
   Typography defaults
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 var(--space-3);
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: var(--space-6);
}

h2 {
    font-size: var(--space-5);
}

h3 {
    font-size: var(--space-4);
}

p {
    margin-block: 0 var(--space-4);
}

ul,
ol {
    margin-block: 0 var(--space-4);
}

li {
    margin-block: var(--space-1);
}