/* The look of the product. Renaming the product touches this file and the Brand:DisplayName
   setting in appsettings.json. Nothing else in the code carries the name.

   Every text colour below clears 4.5:1 against paper, surface, and tint, and every control
   border clears 3:1, which is the WCAG AA line. Check a replacement the same way before
   swapping it in. */

:root {
    /* Surfaces. A warm page with white cards on it, so a card lifts without a heavy shadow. */
    --brand-paper: #f6f4ef;
    --brand-surface: #ffffff;
    --brand-tint: #efebe3;

    /* Text and lines. */
    --brand-ink: #14213d;
    --brand-muted: #5b6577;
    --brand-line: #e3ded4;
    --brand-field: #857d6d;

    /* Emphasis. Accent is the brand and the focus ring. Link is for words you tap. */
    --brand-accent: #c2410c;
    --brand-link: #1d4ed8;

    /* Answers to a post: green, amber, and red, so in, maybe, and out read apart at a glance.
       Out is a deeper red than the accent, so it never reads as the brand or as a form error. */
    --brand-in: #166534;
    --brand-maybe: #92400e;
    --brand-out: #b91c1c;

    --brand-radius: 14px;
    --brand-radius-small: 10px;
}

/* The mark: a ticked box, because the product exists to get someone counted. The accent colour
   is repeated inside the drawing, so changing --brand-accent means changing it there too. */

.app-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 750;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.app-header .brand::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' rx='6' fill='%23c2410c'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}