/* Gallant brand tokens. Loaded first on every page -- landing, auth and
   dashboard -- so all of them draw from one palette and a visitor who signs
   up does not feel they walked into a different product. dashboard.css used
   to own this block; the public pages carried their own navy-and-blue
   scheme from an earlier design. */

:root {
  /* ------------------------------------------------------------------
     Gallant brand tokens -- the same block as the admin console's
     globals.css, so the two apps share one vocabulary and one look.

     Palette from the logo: orange e85020 is the identity mark, indigo
     5058a8 the interactive accent, teal 00a890 the "good" hue. Hue is
     reserved for meaning -- brand for what you can act on, semantic for
     status -- and everything else is a neutral with a slight indigo bias
     so the greys read as chosen rather than default.

     Every colour below this block is a token. To rebrand, change this.
     ------------------------------------------------------------------ */
  --mark: #e85020;
  --mark-strong: #b53d14;
  --mark-soft: #fdeee7;
  --brand: #5058a8;
  --brand-strong: #3d4489;
  --brand-soft: #eceef8;
  --brand-ring: #9aa0d6;
  --brand-fill: #5058a8;
  --brand-fill-hover: #3d4489;
  --danger-fill: #c2331f;
  --warn-fill: #a2650e;
  --page: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #f8f8fb;
  --surface-3: #eef0f5;
  --line: #e2e4ee;
  --line-2: #eceef4;
  --ink: #161a2e;
  --ink-2: #4b5069;
  --ink-3: #7c8199;
  --ink-4: #a3a7ba;
  --ok: #0e8a74;      --ok-soft: #e3f5f0;
  --warn: #a2650e;    --warn-soft: #fdf1df;
  --danger: #c2331f;  --danger-soft: #fdeae6;
  --info: #3d4489;    --info-soft: #eceef8;
  --shadow-1: 0 1px 2px rgb(22 26 46 / 0.06);
  --shadow-2: 0 4px 12px rgb(22 26 46 / 0.08);
  --radius: 8px;

  /* The names the sheet grew up with, kept as aliases so any rule still
     using them lands on the palette rather than on a colour of its own.
     styles.css defines the same names (cyan and orange) and loads first;
     these win because they come later. */
  --primary-color: var(--ink);
  --secondary-color: var(--brand);
  --hover-secondary-color: var(--brand-strong);
  --accent-color: var(--brand-fill);
  --background-dark: var(--page);
  --background-light: var(--surface);
  --text-light: #ffffff;
  --text-dark: var(--ink);

  /* The dashboard is light-only for now; the tokens are the seam a dark
     theme would go through, as the admin already does. */
  color-scheme: light;
}

/* One font stack for every page. The public pages loaded Roboto and the
   dashboard the system stack; the switch between them was visible. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", "Open Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The show/hide eye on password fields (js/password-toggle.js). Lives here
   because both the public pages and the dashboard have password inputs. */
.pw-field {
  position: relative;
  display: block;
}

.pw-field input {
  width: 100%;
  padding-right: 2.75rem;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--brand);
  background: var(--brand-soft, rgba(80, 88, 168, 0.1));
  outline: none;
}