/* NAROMX reusable brand tokens */
:root,
.brand-naromx {
  --brand-id: "naromx";
  --brand-bg: #071924;
  --brand-fg: #F4F4EE;
  --brand-accent: #59DBC5;
  --brand-accent-2: #F27466;
  --brand-muted: #AFC1C2;
  --brand-font-heading: 'Aref Ruqaa Ink', serif;
  --brand-font-body: 'Alexandria', system-ui, sans-serif;
}

.brand-naromx {
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--brand-font-body);
}

.brand-naromx .brand-heading {
  font-family: var(--brand-font-heading);
  font-weight: 850;
  letter-spacing: 0;
}

.brand-naromx .brand-button {
  border: 1px solid color-mix(in srgb, var(--brand-accent) 60%, transparent);
  background: var(--brand-accent);
  color: var(--brand-bg);
}

.brand-naromx .brand-card {
  border: 1px solid color-mix(in srgb, var(--brand-muted) 35%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--brand-bg) 92%, var(--brand-fg) 8%);
}

.brand-naromx .brand-kicker {
  color: var(--brand-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}