/* ======================================================================
   BRAND — MachineStand's own skin over the design-system tokens.

   The tokens shipped from the original mockup are a cool steel-blue on a
   grey ground, which is exactly why the app read as "clinical, dull,
   fill-in-the-blanks". Construction plant lives in two colours: the dark
   steel of the machine and the safety amber painted on it. This sheet pairs
   them - amber does the work (actions, active states, price, verification),
   steel frames it (nav, sticky bars) - on a clean cool-grey canvas with
   white, crisply bordered surfaces.

   Loaded after tokens/app/desktop, so it wins. Delete this one file to get
   the old look back.
   ====================================================================== */
:root {
  --brand-100: #fff6e0;
  --brand-200: #ffe8b3;
  --brand-300: #ffd577;
  --brand-400: #f9bf3b;
  --brand-500: #f2a516;   /* the amber on the machines */
  --brand-600: #d68e08;
  --brand-700: #a86d00;
  --brand-ink: #1a1305;   /* text on amber */

  --steel-900: #14181d;
  --steel-800: #1e242b;
  --steel-700: #2a323b;

  --color-accent: var(--brand-500);
  --color-accent-100: var(--brand-100);
  --color-accent-200: var(--brand-200);
  --color-accent-300: var(--brand-300);
  --color-accent-400: var(--brand-400);
  --color-accent-500: var(--brand-500);
  --color-accent-600: var(--brand-600);
  --color-accent-700: var(--brand-700);
  --color-accent-800: var(--steel-800);
  --color-accent-900: var(--steel-900);

  /* Cool grey canvas, white surfaces, #e5e7eb hairlines. */
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-text: #111827;
  --color-divider: #e5e7eb;
  --color-neutral-100: #f9fafb;
  --color-neutral-200: #f3f4f6;
  --color-neutral-300: #e5e7eb;
  --color-neutral-400: #d1d5db;
  --color-neutral-500: #9ca3af;
  --color-neutral-600: #6b7280;
  --color-neutral-700: #4b5563;
  --color-neutral-800: #374151;
  --color-neutral-900: #1f2937;
}

/* ---- Actions: amber means "do this" ---------------------------------- */
.btn-primary { background: var(--brand-500); color: var(--brand-ink); border-color: var(--brand-500); font-weight: 700; }
.btn-primary:hover { background: var(--brand-400); }
.btn-primary:active { background: var(--brand-600); }
.btn-secondary { background: var(--color-surface); }
.cta { background: var(--brand-500); color: var(--brand-ink); }
.cta-label { color: var(--brand-ink); }
.cta-call { background: var(--steel-900); }
a { color: var(--brand-700); }

/* ---- Selection states ------------------------------------------------- */
.chip { background: var(--color-surface); }
.chip.on { background: var(--steel-900); border-color: var(--steel-900); color: var(--brand-300); }
.chip:hover { border-color: var(--brand-500); }
.nav-link.on { color: var(--brand-600); }
.mode-option.on { background: var(--steel-900); border-color: var(--steel-900); color: var(--brand-300); }
.status-option.on { background: var(--steel-900); color: var(--brand-300); border-color: var(--steel-900); }

/* ---- Trust and money ---------------------------------------------------- */
.tag-accent { background: var(--brand-100); color: var(--brand-700); border: 1px solid var(--brand-300); }
.tag-outline { border-color: var(--color-neutral-400); color: var(--color-neutral-700); }
.trust-verified { color: var(--brand-700); border-color: var(--brand-500); background: var(--brand-100); }
.card-price { color: var(--steel-900); }
.results-count { color: var(--steel-800); font-weight: 500; }

/* ---- Surfaces: white on cool grey ---------------------------------------- */
.card { background: var(--color-surface); border: 1px solid var(--color-neutral-300); }
.card-photo-art { background: var(--color-neutral-100); }
.filter-panel, .panel, .stat { background: var(--color-surface); }
.input { background: var(--color-surface); }

/* ---- The visitor's top bar (phone): one dark line and a way in ---------- */
.topbar-signedout { background: var(--steel-900); color: #fff; border-bottom: 0; }
.topbar-signedout .topbar-note { color: color-mix(in srgb, #fff 82%, transparent); }
.topbar-signedout .topbar-note strong { color: var(--brand-400); }
.topbar-signin { background: var(--brand-500); color: var(--brand-ink); border-color: var(--brand-500); }

/* Category discovery: a quiet line where the future categories will sit. */
.chips-note { font-size: 11px; color: var(--color-neutral-600); margin-top: 6px; }

/* On a phone the toolbar is two deliberate rows - the count, then the
   controls together - instead of whichever control happens to wrap last. */
@media (max-width: 1023px) {
  .results-count { flex-basis: 100%; }
}

/* ---- Footer: steel band ------------------------------------------------- */
@media (min-width: 1024px) {
  .site-links { background: var(--steel-900); border-top: 0; }
  .site-links a { color: color-mix(in srgb, #fff 80%, transparent); }
  .site-links a:hover { color: var(--brand-400); }
  .site-links-note { color: color-mix(in srgb, #fff 55%, transparent); }

  .card { background: var(--color-surface); }
  .stat, .ph > .panel { background: var(--color-surface); }
}