/*
 * The warm field: the olive-brown backdrop shared by every anonymous page.
 *
 * It started life on the splash alone. Login and register now use it too, so
 * the paint lives here rather than in splash.css — two copies of a four-layer
 * gradient stack would drift the first time either was touched, and "the login
 * page is nearly the same brown as the homepage" is worse than either colour on
 * its own.
 *
 * Exposed two ways. `.warm-field` paints an element directly (the splash's
 * <main>); --warm-field-image is for surfaces that already have a class from
 * the brand kit and only need the background swapped (.gooo-main on the auth
 * pages). Both resolve to the same declarations.
 *
 * Deliberately not built from the --gooo-* tokens: those are the shared
 * grey.ooo dark palette, and this warm scheme is the one place that palette is
 * departed from. The brand bar sitting above the field keeps its own colours.
 */

:root {
    --warm-base: #56503f;
    --warm-edge: #35322a;
    --warm-ink: #f5f3ee;

    /*
     * Foreground tones for anything sitting on the field. Surfaces are black at
     * low alpha rather than opaque hexes so the weave and the centre glow still
     * read through them, which is what stops a panel looking pasted on — the
     * splash card has always worked this way and these generalise it.
     */
    --warm-surface: rgba(0, 0, 0, 0.2);
    --warm-recess: rgba(0, 0, 0, 0.26);
    --warm-hairline: rgba(255, 255, 255, 0.05);
    --warm-border: rgba(255, 255, 255, 0.12);
    --warm-muted: rgba(245, 243, 238, 0.72);
    --warm-faint: rgba(245, 243, 238, 0.42);

    /* Brass, picked to sit warm against the base rather than cut across it. */
    --warm-accent: #c2a468;
    --warm-accent-dim: rgba(194, 164, 104, 0.3);
    --warm-on-accent: #241f16;

    /* Desaturated toward the field so errors read as warning, not as an alarm. */
    --warm-danger: #f0b3a6;
    --warm-danger-bg: rgba(150, 52, 40, 0.24);
    --warm-danger-border: rgba(230, 140, 120, 0.38);

    /* Fine 3px weave, then a soft centre glow over the flat base. */
    --warm-field-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 80% 60% at 50% 34%, rgba(255, 255, 255, 0.07), transparent 70%),
        linear-gradient(to bottom, var(--warm-edge), transparent 28%, transparent 62%, var(--warm-edge));
}

.warm-field {
    background-color: var(--warm-base);
    background-image: var(--warm-field-image);
    color: var(--warm-ink);
}