/* ==========================================================================
   Design tokens — the single source for every page on this site.

   The public directory, the admin dashboard, the partner portal, and both
   sign-in screens all import this. Before it existed each of those carried its
   own :root block and they had quietly drifted apart: four greys, three reds,
   two shadow scales. Change a value here and it changes everywhere.

   The palette parallels BNI: red (PMS 186), black, white. The action colours
   are separate from the brand on purpose — red means "us", blue and green mean
   "go somewhere".
   ========================================================================== */

:root {
  /* This is one fixed design, not a theme that follows the OS. */
  color-scheme: light;

  /* --- Ink ------------------------------------------------------------- */
  --ink: #16181a;
  --ink-soft: #4a4f55;
  --ink-faint: #666d74;

  /* --- Surfaces -------------------------------------------------------- */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #f5f6f7;
  --line: #dcdfe3;
  --line-strong: #c3c8ce;
  /* Frame thickness for cards and panels, and nothing smaller. The Design tab
     overrides this on the public page; tags, buttons, inputs and table rules
     stay at a hairline whatever it is set to, because a 3px pill reads as a
     mistake where a 3px card frame reads as a choice. */
  --line-w: 1px;

  /* --- Brand ----------------------------------------------------------- */
  --brand: #c8102e;
  --brand-bright: #9e0b23;
  --brand-ink: #ffffff;
  --accent: #c8102e;
  --accent-soft: #fdecee;

  /* --- Actions --------------------------------------------------------- */
  --action-site: #0d5cab;
  --action-call: #0d5cab;
  --action-map: #177a36;
  --action-ink: #ffffff;

  /*
   * Hover shades, stated rather than filtered.
   *
   * brightness() on a solid colour washes it toward grey and does nothing at
   * all to a white background, so each button that fills gets a real second
   * colour: a step deeper for the solid ones, a light fill for the outlined
   * phone button, and a warmed surface for the neutral ones.
   */
  --action-site-hover: #0a4a8c;
  --action-map-hover: #12652c;
  --action-call-hover: #dceaf9;
  --surface-hover: #eef0f3;

  /* --- Status ---------------------------------------------------------- */
  --ok: #177a36;
  --ok-soft: #e8f6ed;
  --warn: #b4531a;
  --warn-soft: #fdf1e7;
  --danger: #c8102e;
  --danger-soft: #fdecee;

  /* --- Hero ------------------------------------------------------------ */
  --hero-bg: #000000;
  --hero-stroke: 20px;
  --hero-min-h: 14rem;
  --hero-tagline: #d3d7dc;
  --hero-intro: #b4bac1;

  /* --- Shape ----------------------------------------------------------- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 6px;

  /* Three layers: a tight contact shadow, a mid diffusion, a wide soft cast.
     On a white page a white card has no edge, so the shadow does all the work. */
  --shadow:
    0 1px 2px rgb(16 20 24 / 7%),
    0 4px 10px -3px rgb(16 20 24 / 10%),
    0 14px 28px -10px rgb(16 20 24 / 15%);
  --shadow-lift:
    0 2px 4px rgb(16 20 24 / 9%),
    0 10px 20px -4px rgb(16 20 24 / 14%),
    0 28px 52px -14px rgb(16 20 24 / 22%);
  --shadow-brand:
    0 2px 5px rgb(200 16 46 / 22%),
    0 10px 22px -8px rgb(200 16 46 / 34%);

  /* --- Metrics --------------------------------------------------------- */
  --wrap: 143rem;
  --wrap-narrow: 64rem;
  --card-w: 24rem;
  /* A token because the grid's column ceiling is arithmetic on it. */
  --grid-gap: 0.9rem;
  --banner-ratio: 5 / 2;
  --tap: 2.75rem;

  /* --- Type ------------------------------------------------------------ */
  --font:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ==========================================================================
   Base, shared by every page
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: #ffffff;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand-bright);
}

img {
  max-width: 100%;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

/*
 * [hidden] comes from the user-agent stylesheet, which loses to any author
 * rule -- so a component that sets `display: grid` or `flex` stays on screen
 * even with the attribute set. This has bitten the search clear button, the
 * listing cards and the operator form; one rule here settles it everywhere.
 */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One focus treatment across the whole site. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}