/* ProScape AI design tokens.
   Load order matters: after bootstrap.min.css (so the --bs-* mappings win),
   before site.css and every page stylesheet (so they can use the tokens).
   Three layers, top to bottom: primitives → Bootstrap mapping → component
   overrides. Change palette or type HERE, nowhere else. */

:root {
  /* ---- 1. Primitives — the wireframe palette. Brand green per BRIEF F31
     (the wireframe file's own darker accent is deliberately not used). ---- */
  --ground: #EFEEE9;        /* page background */
  --surface: #FFFFFF;       /* cards, panels, app bar */
  --sunk: #FAFAF9;          /* inset areas: inputs, table stripes */
  --line: #D4D4D0;          /* borders */
  --line-soft: #E6E5E0;     /* dividers */
  --ink: #1C1C1A;           /* text */
  --muted: #6B6B63;         /* secondary text — 4.6:1 on --ground */
  --faint: #65655C;         /* tertiary text, placeholders — 5.1:1 on --ground */
  --accent: #28a745;        /* the one green */
  --accent-2: #20c997;      /* gradient partner only */
  --accent-ink: #1F4A2B;    /* green as text/links, readable on --ground */
  --accent-soft: #E7EFE8;   /* green tint backgrounds */
  --accent-strong: #1E7E34; /* The green that goes UNDER white text. White on --accent is 3.1:1,
                               which fails WCAG AA for a button label; this is 5.1:1.

                               These are deliberately two tokens, not one. --accent stays the brand
                               green for borders, tints, icons and gradients; --accent-strong is
                               used only where white text sits on top of it. Collapsing them back
                               into one either breaks the brand colour or breaks the buttons. */
  --warn: #A64C08;          /* 4.9:1 on --ground; #B45309 was 4.3 */
  --warn-soft: #FBF0E2;

  --radius-sm: 6px;
  --radius: 10px;           /* the wireframe's radius */
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Fraunces on headings only (BRIEF F32); body and controls stay on the system stack. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* The small-label face. The wireframe sets every section heading, chip, tile name, slider end
     and count in it; without the token they all fell back to the body sans and a dozen small
     differences came from one missing line. */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---- 2. Bootstrap 5.3 mapping — components read these, which is why the
     5.1 → 5.3 upgrade happened first. ---- */
  --bs-body-bg: var(--ground);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-tertiary-bg: var(--sunk);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 40, 167, 69;
  --bs-success: var(--accent);
  --bs-success-rgb: 40, 167, 69;
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: 31, 74, 43;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 40, 167, 69;
  --bs-body-font-family: var(--font-body);
  --bs-heading-color: var(--ink);
}

/* ---- 3. Component overrides. Bootstrap 5.3's colour buttons hardcode their
   own --bs-btn-* values inside the class, so mapping --bs-primary alone
   recolours utilities only. These make the buttons follow the brand green. ---- */
.btn-primary,
.btn-success {
  --bs-btn-bg: var(--accent-strong);
  --bs-btn-border-color: var(--accent-strong);
  --bs-btn-hover-bg: #23923d;
  --bs-btn-hover-border-color: #218838;
  --bs-btn-active-bg: #218838;
  --bs-btn-active-border-color: #1e7e34;
  --bs-btn-focus-shadow-rgb: 40, 167, 69;
  --bs-btn-disabled-bg: var(--accent-strong);
  --bs-btn-disabled-border-color: var(--accent-strong);
}

.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--accent-ink);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 40, 167, 69;
}

/* Destructive actions are amber, not Bootstrap red. The design system chose amber and the
   design-view buttons (.dv-btn-danger) already honoured it, so the raw Bootstrap class was
   painting a second colour for the same class of action.

   The hover shade is lighter and the pressed shade darker, matching the green buttons above.
   Both keep white text above 4.5:1 — #BE5A0A and lighter do not, which is why the hover stops
   where it does. */
.btn-danger {
  --bs-btn-bg: var(--warn);
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-bg: #B85609;
  --bs-btn-hover-border-color: #B85609;
  --bs-btn-active-bg: #8D4006;
  --bs-btn-active-border-color: #8D4006;
  --bs-btn-focus-shadow-rgb: 166, 76, 8;
  --bs-btn-disabled-bg: var(--warn);
  --bs-btn-disabled-border-color: var(--warn);
}

.btn-outline-danger {
  --bs-btn-color: var(--warn);
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-bg: var(--warn);
  --bs-btn-hover-border-color: var(--warn);
  --bs-btn-active-bg: #8D4006;
  --bs-btn-active-border-color: #8D4006;
  --bs-btn-focus-shadow-rgb: 166, 76, 8;
}

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line);
}

.form-control,
.form-select {
  --bs-border-color: var(--line);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem rgba(40, 167, 69, .25);
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.hero-title,
.card-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ---- 4. Reaching things without a mouse, and not moving what people asked to keep still ---- */

/* Every interactive thing shows where the keyboard is. Browsers draw a default ring, but
   Bootstrap and our own resets remove it in enough places that relying on it loses the caret
   somewhere on nearly every page. Two rings — dark inside, light outside — so it stays visible
   on the green buttons as well as on paper. */
/* Not :where() — that has no specificity, so Bootstrap's own `.btn:focus-visible { outline: 0 }`
   wins and the ring silently never appears. This has to outrank the resets that remove it, which
   is what !important is actually for. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--surface);
}

/* Nothing here is animation anybody needs; it is all decoration. Somebody who has asked their
   system to stop moving things has usually asked for a reason. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- placeholders ----------------------------------------------------------------------
   An example of what to type is not something somebody typed. Left at the browser's default
   these read as dark as real text, so an empty box looks filled in — and on the design page the
   box sits beside a button that says "1 credit". Two components had set this for themselves; the
   rest, including "Change something" and the plant search, had not. One rule, every box.

   opacity:1 because Firefox dims placeholders on top of the colour, which would take this below
   the contrast the token is chosen for. */
::placeholder { color: var(--faint); opacity: 1; }

/* ---- the palette is light, and the browser should be told ---------------------------------
   Nothing here declared a colour scheme. The browser styles anything it draws itself — autofill,
   scrollbars, date and select popups, and any control left without a background of its own — to
   the system preference, and in dark mode those land dark on a page that stays white.

   Measured before claiming it: every control on the yard step already carries an explicit
   background from these tokens, so with the system in dark mode Chromium renders them the same
   with and without this line. It is here for the surfaces the tokens do not reach, not as a
   repair of something seen breaking.

   This says light rather than adding a dark palette, because there is one set of colours in this
   product and inventing a second is a different piece of work. */
:root { color-scheme: light; }

/* The address picker is Google's <gmp-place-autocomplete>, and it sets color-scheme: light dark
   on itself — so in dark mode its field and its suggestion list are free to render dark inside a
   white card, and the shadow root is closed, which puts every other property of theirs out of
   reach. color-scheme is inherited and inheritance crosses into a shadow tree, so declaring it on
   the host is the one instruction that still lands. */
.fl-location, .fl-location-box, gmp-place-autocomplete, gmpx-place-autocomplete { color-scheme: light; }