/* Cornelius Circle — brand tokens and base styles.
   Colours sampled from "Program til Cornelius Circle 2026" (docs/). */

:root {
    --green: #557752;        /* page ground */
    --green-deep: #46633f;
    --orange: #c4743a;       /* header bars, program box */
    --cream: #f8e3af;        /* headline text on green */
    --cream-paper: #fbf1d6;  /* card surface */
    --sage: #8e9d72;         /* info boxes on green */
    --ink: #2b3327;          /* text on cream */
    --ink-muted: #6b735f;
    --c-red: #da323f;        /* circle graphic + "pledged" series */
    --c-orange: #f96800;
    --c-amber: #efa72f;
    --c-yellow: #f2e195;
    --c-grey: #97a490;
    --match: #8f948b;        /* "matching" series (gray) */
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--green);
    color: var(--cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }

#connection-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(43, 51, 39, 0.85);
    color: var(--cream); font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase;
    visibility: hidden; opacity: 0;
    transition: opacity 0.3s;
}

#toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 110; display: none;
    padding: 10px 18px; border-radius: 4px;
    color: #fff; font-size: 0.95rem;
    transition: opacity 0.3s;
    max-width: 90vw; text-align: center;
}

button {
    font: inherit; cursor: pointer;
    border: 0; border-radius: 4px;
    padding: 12px 18px;
    background: var(--orange); color: #fff;
    font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase;
}
button.secondary { background: var(--sage); color: var(--ink); }
button.danger { background: var(--c-red); }
button:disabled { opacity: 0.5; cursor: default; }

input, textarea, select {
    font: inherit;
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #b9ad84;
    background: #fff;
    color: var(--ink);
}
label { display: block; font-size: 0.85rem; color: var(--ink-muted); margin: 12px 0 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }