/* ══ Signet brand system (signet-brand-kit-v1) ══════════════════════════
   One mark: the cartouche wordmark (signet-wordmark-*.svg). Nothing else stands for the brand.
   Monochrome only — black #050505 on light, white #FAFAF8 on dark. No third
   color, ever. (The single exception below is a semantic error red for states
   that must not be missed; it never touches brand surfaces.) Type in three roles,
   the same on every surface: Lexend for display (titles, figures, the wordmark),
   IBM Plex Sans for interface text, IBM Plex Mono for codes. Radii: 8px buttons
   and controls, 12px cards, 14px sheets, round pills. Fill states (empty →
   collecting → nearly → sealed) are the product-UI vocabulary. Motion: pour,
   then lash. The app's tokens (frontend/src/index.css) follow the same scale. */

:root {
  --black: #050505; --white: #FAFAF8;
  --bg: var(--white); --bg-2: #f1f1ee; --card: #ffffff; --card-2: #f7f7f4;
  --ink: var(--black); --ink-2: #454545; --muted: #7d7d7a;
  --hair: rgba(5,5,5,.11); --hair-2: rgba(5,5,5,.06);
  --accent: var(--black); --accent-hover: #262626;
  --tint: rgba(5,5,5,.05); --tint-2: rgba(5,5,5,.09); --tint-3: rgba(5,5,5,.16);
  --red: #b3261e; --red-tint: rgba(179,38,30,.07);
  --glass: rgba(250,250,248,.78);
  --r: 12px; --r-sm: 8px; --r-lg: 14px;
  --shadow-1: 0 1px 3px rgba(5,5,5,.05);
  --shadow-2: 0 24px 70px rgba(5,5,5,.12);
  --sans: "IBM Plex Sans", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Lexend", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ease: cubic-bezier(.32,.72,0,1);
  /* legacy aliases (older rules) — all resolve to the monochrome system */
  --blue: var(--accent); --blue-600: var(--accent-hover); --blue-tint: var(--tint);
  --green: var(--ink); --green-tint: var(--tint); --amber: var(--ink-2); --amber-tint: var(--tint-2);
  --serif: var(--display);
  --ok: var(--ink); --bad: var(--red); --warn: var(--ink-2);
}
::selection { background: rgba(5,5,5,.12); }
h1, h2, h3, h4 { font-family: var(--display); }

/* ── lockup: the wordmark, then the product name (the app's top bar sets it the same way) ── */
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.lockup img { height: 28px; width: auto; display: block; }
.lockup .product {
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.015em;
  color: var(--ink); padding-left: 14px; border-left: 1px solid var(--hair);
}
/* The micro-label: small caps over a card or a section, the same on every surface. */
.label, .eyebrow, .kicker { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lockup.dark .product { color: rgba(250,250,248,.7); border-color: rgba(250,250,248,.25); }
@media (max-width: 640px) { .lockup .product { display: none; } .lockup img { height: 26px; } }