/*
 * AppsForMyCar v3, the "green" variant (SITE_THEME=green, docs/site-themes.md). Loaded after site.css on
 * the website and after account.css in the account; plain CSS, no build step.
 *
 * The v3 design, layout and type are untouched. The road-marking yellow becomes the product's own green:
 * fern (#0a6a4e) where the surface is light, mint (#5fd3a6 / #62e0b0) where it is dark. Yellow was a light
 * fill with ink on it; fern is a dark fill, so what sits on it is white, and the three places that relied
 * on yellow being light (the filled lane, the form card, the highlighter behind a word) are redrawn below.
 * Links move from harbour blue to the same green. Contrast of every pair: docs/site-themes-contrast.txt.
 *
 * html.v3 = the website (follows the device's light/dark). html.fi = the account (Filament's .dark).
 */

/* ---------- Website: tokens ---------- */
html.v3 {
    --kowhai: #0a6a4e;
    --on-kowhai: #ffffff;
    --harbour: #0a6a4e;
    --tar-link: #9be8c8;
}
@media (prefers-color-scheme: dark) {
    html.v3 {
        --kowhai: #5fd3a6;
        --on-kowhai: #0e1217;
        --harbour: #5fd3a6;
        --tar-link: #9be8c8;
    }
}
html.v3 ::selection, html.fi ::selection { background: #0a6a4e; color: #ffffff; }

/* On tarseal (the fleets lane, the footer) fern would sink into the black: the accent there is mint. */
html.v3 .lane--tar, html.v3 .foot { --kowhai: #62e0b0; --on-kowhai: #14181d; }

/* The filled lane and the form card: fern in both themes, white words, a white field with ink in it. */
html.v3 .lane--kowhai, html.v3 .lp-card {
    --bg: #0a6a4e; --fg: #ffffff; --muted: #d5efe3; --hair: #8fcab4; --link: #ffffff; --field: #ffffff;
    --ok: #c8ebdb; --warn: #ffe9a8; --bad: #ffd9d4;
    --kowhai: #62e0b0; --on-kowhai: #14181d;
    color-scheme: light;
}
html.v3 .lane--kowhai { background: #0a6a4e; border-top-color: #0a6a4e; }
html.v3 .lp-card { background: #0a6a4e; color: #ffffff; }
html.v3 .lp-card a { color: #ffffff; }
html.v3 .lane--kowhai .form input, html.v3 .lane--kowhai .form select, html.v3 .lane--kowhai .form textarea,
html.v3 .lp-card input, html.v3 .lp-card select, html.v3 .lp-card textarea { color: #14181d; border-color: #ffffff; }
html.v3 .lane--kowhai .check input, html.v3 .lp-card .check input { accent-color: #ffffff; }
html.v3 .lane--kowhai .form [aria-invalid="true"], html.v3 .lp-card [aria-invalid="true"] { border-color: #ffd9d4; box-shadow: 0 0 0 2px #ffd9d4; }
html.v3 .lane--kowhai .success { border-left-color: #ffffff; }
/* The button on green: white with deep fern words; pressed or pointed at, night with a white edge. */
html.v3 .lane--kowhai .btn-primary, html.v3 .lp-card .btn-primary { background: #ffffff; border-color: #ffffff; color: #073b2c; }
html.v3 .lane--kowhai .btn-primary:hover, html.v3 .lp-card .btn-primary:hover { background: #0e1217; border-color: #ffffff; color: #ffffff; }

/* "Fleets" was ink on a yellow highlighter. Ink on fern cannot be read, so it is underlined in every theme. */
html.v3 .feature-for .who--fleet { box-shadow: none; text-decoration: underline; text-decoration-color: var(--kowhai); text-decoration-thickness: 4px; text-underline-offset: .2em; }

/* ---------- Account: tokens ---------- */
html.fi {
    --a3-kowhai: #0a6a4e;
    --a3-on-kowhai: #ffffff;
    --a3-harbour: #0a6a4e;
}
html.fi.dark {
    --a3-kowhai: #5fd3a6;
    --a3-on-kowhai: #0e1217;
    --a3-harbour: #5fd3a6;
}
/* The tarseal parts (top bar, phone tab bar, More, the sign-in panel) are dark in both themes: mint. */
html.fi .fi-topbar, html.fi .a3-tabs, html.fi .a3-more-panel, html.fi .a3-welcome { --a3-kowhai: #62e0b0; --a3-on-kowhai: #14181d; --a3-harbour: #62e0b0; }

/* The shared map buttons kept their own dark-theme ink; on mint it is the account's. */
html.fi.dark .afmc-btn[aria-pressed="true"], html.fi.dark .afmc-btn-primary { color: #0e1217; }
html.fi.dark .afmc-map .leaflet-control-attribution a, html.fi.dark .afmc-map .leaflet-popup-content a { color: #62e0b0; }

/* Maps are drawn on light tiles in both themes: the route is fern. */
html.fi .a3-route { stroke: #0a6a4e; }