/* Gennissi brand tokens. Kept separate because this distribution omits Vite CSS sources. */
html.lazy[theme-accent="navy"] {
  --color-accent-50: #eef2ff;
  --color-accent-100: #dce4ff;
  --color-accent-200: #bdccff;
  --color-accent-300: #96aaf2;
  --color-accent-400: #7188de;
  --color-accent-500: #000080;
  --color-accent-600: #000066;
  --color-accent-700: #000052;
  --color-accent-800: #000040;
  --color-accent-900: #000030;
  --color-accent-950: #000020;
}
.gennissi-brand { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; text-decoration: none; color: inherit; }
.gennissi-brand-mark { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; color: white; background: #000080; font-size: 23px; font-weight: 800; }
.gennissi-brand strong { display: block; font-size: 20px; line-height: 1.2; }
.gennissi-brand small { display: block; font-size: 12px; letter-spacing: .06em; }
.gennissi-contact { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 20px; font-size: 12px; }
.gennissi-contact a { text-decoration: underline; text-underline-offset: 3px; }
html[theme-mode="light"] .gennissi-contact a { color: #000080; }
html[theme-mode="dark"] .gennissi-contact a { color: #bdccff; }

.gennissi-primary-button { background-color: var(--color-accent-500, #000080); color: #fff; }
.gennissi-primary-button:hover { background-color: var(--color-accent-600, #000066); }
.gennissi-primary-button:focus-visible { outline: 2px solid #7188de; outline-offset: 3px; }